/* The office: wall, window, desk, the things on it, and the iris wipe between rooms. */

@property --iris {
  syntax: '<length>';
  inherits: false;
  initial-value: 160vmax;
}

#scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #06080a;
}
#smoke { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
#props { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
#stage { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
#stage > * { pointer-events: auto; }

.backdrop { position: absolute; inset: 0; opacity: 0; transition: opacity 0.2s; }
.backdrop.is-active { opacity: 1; }
/* Lamp on: warm light pooling from the left across the room. */
.backdrop-office::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(55% 75% at 8% 66%, rgba(255, 190, 110, 0.32), rgba(255, 170, 90, 0.08) 55%, transparent 75%);
  mix-blend-mode: screen;
  opacity: var(--lamp-glow);
  transition: opacity 0.18s ease;
}
.backdrop-layer { position: absolute; inset: 0; }
.backdrop-layer:empty { display: none; }

/* ---------- Wall ---------- */

.wall {
  position: absolute;
  inset: 0;
  background-color: #23262a;
  background-image:
    radial-gradient(70% 60% at 50% 30%, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.55) 75%),
    var(--img-plaster, none);
  background-size: auto, 900px 900px;
  background-blend-mode: normal, overlay;
  filter: brightness(calc(var(--scene-bright) * 0.62));
}
.wall::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--tex-grain-dark);
  opacity: 0.8;
  mix-blend-mode: overlay;
}
html[data-theme='light'] .wall { background-color: #3a2f25; }

/* ---------- Window ---------- */

.window {
  position: absolute;
  left: 6vw;
  right: 6vw;
  top: 3vh;
  height: 58vh;
  border: clamp(10px, 1.3vw, 22px) solid #1b120b;
  border-bottom-width: clamp(12px, 1.6vw, 26px);
  box-shadow:
    inset 0 0 0 2px #2c1d12,
    inset 0 0 40px rgba(0, 0, 0, 0.6),
    0 0 0 1px #0b0704,
    0 30px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  background: #0b1520;
}
.outside { position: absolute; inset: -6px; filter: blur(2.2px) saturate(0.9); }
.outside canvas.city { width: 100%; height: 100%; display: block; }
canvas.glass { position: absolute; inset: 0; width: 100%; height: 100%; }
.sheen {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.06) 0%, transparent 28%, transparent 60%, rgba(255, 255, 255, 0.03) 75%, transparent 85%),
    radial-gradient(120% 90% at 50% 120%, rgba(0, 0, 0, 0.5), transparent 60%);
  pointer-events: none;
}

.neon {
  position: absolute;
  right: 17%;
  top: 22%;
  display: grid;
  gap: 0.15em;
  padding: 0.35em 0.3em;
  font-family: var(--font-deco);
  font-size: clamp(14px, 1.6vw, 30px);
  line-height: 1;
  text-align: center;
  color: #ffd2c4;
  background: #120a0a;
  border: 2px solid #2a1612;
  text-shadow: 0 0 4px #ff3b2a, 0 0 12px #ff2a1a, 0 0 28px #ff1a0a, 0 0 54px #c40e05;
  transition: color 0.04s, text-shadow 0.04s;
}
.neon.off { color: #4a1d18; text-shadow: none; }

.mullions {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1.25fr;
  pointer-events: none;
}
.mullions i {
  box-shadow: 0 0 0 clamp(3px, 0.35vw, 6px) #1b120b, inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 0 18px rgba(0, 0, 0, 0.35);
}
.blind-stack {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5%;
  min-height: 14px;
  background: repeating-linear-gradient(180deg, #2a2219 0 3px, #15100b 3px 5px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

.gold-leaf {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(3vh + 2.2vh);
  text-align: center;
  pointer-events: none;
  z-index: 1;
}
.gold-title, .gold-sub {
  font-family: var(--font-deco);
  background: linear-gradient(180deg, #fff1b8 0%, #e2b955 40%, #a87926 62%, #f2d27e 80%, #8a5d1a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.9)) drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
}
.gold-title { font-size: clamp(20px, 2.9vw, 52px); letter-spacing: 0.06em; line-height: 1.1; }
.gold-sub { font-size: clamp(11px, 1vw, 18px); letter-spacing: 0.4em; text-transform: uppercase; margin-top: 0.35em; }

.sill {
  background-image: linear-gradient(180deg, rgba(255, 220, 180, 0.12), rgba(0, 0, 0, 0.5)), var(--img-desk-wood, none) !important;
  background-size: auto, 700px auto !important;
  position: absolute;
  left: calc(6vw - 1.2vw);
  right: calc(6vw - 1.2vw);
  top: 61vh;
  height: 1.6vh;
  background: linear-gradient(180deg, #3a2618, #1c120a);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
}

.neon-wash {
  position: absolute;
  inset: 0;
  background: radial-gradient(40% 50% at 78% 35%, rgba(255, 40, 20, 0.12), transparent 70%);
  mix-blend-mode: screen;
  transition: opacity 0.05s;
  pointer-events: none;
}
.neon-wash.off { opacity: 0.2; }

/* ---------- Desk ---------- */

.desk {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(61vh + 1.6vh);
  bottom: 0;
  background:
    linear-gradient(180deg, rgba(255, 220, 170, 0.08) 0, transparent 3px),
    linear-gradient(180deg, var(--desk-2) 0%, var(--desk) 55%, #0c0805 100%);
  box-shadow: inset 0 14px 30px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.desk-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='300'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0035 .09' numOctaves='4' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .33 0 0 0 0 .17 0 0 0 1.2 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  background-size: 900px 300px;
  opacity: 0.55;
  mix-blend-mode: overlay;
}
/* Real wood: laid flat and receding from the window, lit low. */
html.has-tex .desk-grain {
  inset: -2% -45% -60%;
  background-image: var(--img-desk-wood);
  background-size: 1100px auto;
  opacity: 1;
  mix-blend-mode: normal;
  transform: perspective(620px) rotateX(52deg);
  transform-origin: 50% 0;
  filter: brightness(0.62) saturate(0.85) contrast(1.05);
}
html.has-tex[data-theme='light'] .desk-grain { filter: brightness(0.9) saturate(0.95) contrast(1.05); }
.desk::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0, transparent 18%, transparent 55%, rgba(0, 0, 0, 0.6) 100%),
    radial-gradient(80% 120% at 50% 0%, rgba(150, 175, 210, 0.08), transparent 70%);
}
.pane-light {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 0;
  height: 90%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1.25fr;
  gap: 1.4vw;
  transform: perspective(500px) rotateX(58deg);
  transform-origin: top center;
  filter: blur(7px);
  opacity: 0.07;
  mix-blend-mode: screen;
  pointer-events: none;
}
.pane-light i { background: #b8cde6; }
html[data-theme='light'] .pane-light { opacity: 0.035; }
.lamp-pool {
  position: absolute;
  inset: 0;
  background: radial-gradient(38% 70% at 9% 15%, rgba(255, 205, 130, 0.55), rgba(255, 190, 110, 0.12) 50%, transparent 75%);
  mix-blend-mode: soft-light;
  opacity: var(--lamp-glow);
  transition: opacity 0.25s;
}

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.65) 100%),
    radial-gradient(60% 60% at 8% 55%, rgba(255, 196, 120, calc(0.16 * var(--lamp-glow))), transparent 70%);
}

/* ---------- Iris wipe between rooms ---------- */

.iris {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent var(--iris), #000 calc(var(--iris) + 1px));
  --iris: 160vmax;
}
.iris.closing { animation: iris-close 0.48s cubic-bezier(.6, 0, .9, .5) forwards; }
.iris.opening { animation: iris-open 0.52s cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes iris-close { from { --iris: 110vmax; } to { --iris: 0vmax; } }
@keyframes iris-open { from { --iris: 0vmax; } to { --iris: 110vmax; } }

/* ---------- Props on the desk ---------- */

.prop {
  position: absolute;
  pointer-events: auto;
  background: none;
  border: 0;
  padding: 0;
  filter: brightness(calc(0.7 + 0.3 * var(--lamp-glow))) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55));
  transition: filter 0.3s;
}
button.prop { cursor: pointer; }
.prop svg { display: block; width: 100%; height: auto; overflow: visible; }
button.prop:hover { filter: brightness(calc(0.85 + 0.3 * var(--lamp-glow))) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55)); }
button.prop:focus-visible { outline: 2px dashed var(--brass-hi); outline-offset: 4px; }

.prop.lamp { left: 2vw; bottom: 26vh; width: clamp(120px, 12vw, 240px); }
.prop.phono { left: 1.2vw; bottom: 2.5vh; width: clamp(170px, 17vw, 330px); }
.prop.ashtray { right: 2.6vw; bottom: 25vh; width: clamp(110px, 9.5vw, 190px); }
.prop.inkwell { right: 5vw; bottom: 8vh; width: clamp(110px, 10vw, 200px); }

/* Lamp */
.lamp .shade-on, .lamp .lamp-cone { opacity: 0; transition: opacity 0.12s; }
.lamp .lamp-bulb { opacity: 0.15; transition: opacity 0.12s; }
.lamp.on .shade-on, .lamp.on .lamp-cone { opacity: 1; }
.lamp.on .lamp-bulb { opacity: 1; filter: drop-shadow(0 0 8px #ffe7a3); }
.lamp.on { filter: brightness(1.05) drop-shadow(0 0 30px rgba(255, 210, 130, 0.35)) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55)); }
.lamp .lamp-chain { transition: transform 0.2s; }
.lamp.tug .lamp-chain { animation: chain-tug 0.4s ease; }
@keyframes chain-tug { 30% { transform: translateY(7px); } 60% { transform: translateY(-2px); } }

/* Gramophone */
.phono .record-spin { transform-origin: 0 0; }
.phono.playing .record-spin { animation: spin78 0.77s linear infinite; }
@keyframes spin78 { to { transform: rotate(360deg); } }
.phono .tonearm { transform-origin: 238px 62px; transition: transform 0.9s cubic-bezier(.4, .1, .3, 1); }
.phono.playing .tonearm { transform: rotate(25deg); }
.now-playing {
  position: absolute;
  left: 8%;
  bottom: 100%;
  margin-bottom: 4px;
  padding: 3px 8px;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  color: var(--graphite);
  background: #e6dcbc;
  background-image: var(--tex-noise);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  transform: rotate(-2deg);
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cigar ember */
.ashtray .ember-glow { animation: ember 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ashtray .ember { animation: ember-core 2.1s ease-in-out infinite; }
@keyframes ember { 0%, 100% { opacity: 0.55; transform: scale(0.9); } 45% { opacity: 1; transform: scale(1.1); } 60% { opacity: 0.75; } }
@keyframes ember-core { 0%, 100% { fill: #ff9a3a; } 50% { fill: #ffd27a; } }

/* Ink vial + pen */
.inkwell .pen { transform-box: view-box; transition: transform 0.45s ease, opacity 0.3s; }
.inkwell.pen-away .pen { transform: translate(30px, -150px) rotate(-25deg); opacity: 0; }
.inkwell.dropping .pen { animation: pen-drop 1.1s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes pen-drop {
  0% { transform: translate(14px, -150px) rotate(-40deg); opacity: 0; }
  20% { opacity: 1; }
  36% { transform: translate(0, -6px) rotate(-4deg); }
  48% { transform: translate(-2px, -20px) rotate(-9deg); }
  60% { transform: translate(0, 0) rotate(0); }
  68% { transform: translate(0, -5px) rotate(-1deg); }
  76%, 100% { transform: none; }
}

/* ---------- Small screens: keep lamp + gramophone reachable, park the rest ---------- */

@media (max-width: 860px) {
  .window { left: 3vw; right: 3vw; top: 1.5vh; height: 30vh; }
  .sill { top: 31.5vh; left: 1.5vw; right: 1.5vw; }
  .desk { top: 33vh; }
  .prop.ashtray, .prop.inkwell { display: none; }
  .prop.lamp { left: 8px; bottom: 8px; top: auto; width: 64px; z-index: 6; }
  .prop.phono { left: 80px; bottom: 10px; width: 108px; z-index: 6; }
  .now-playing { display: none; }
  .gold-title { font-size: clamp(16px, 5vw, 26px); }
}

/* ---------- Real-time 3D office (office3d.js) ---------- */

#office3d { position: fixed; inset: 0; z-index: 0; opacity: 0; transition: opacity 1.4s ease; }
#office3d canvas { display: block; width: 100%; height: 100%; }
html.has-3d #office3d { opacity: 1; }
html.has-3d #scene { background: transparent; z-index: 1; pointer-events: none; }
html.has-3d .backdrop-office { opacity: 0; transition: opacity 1.4s ease; }
html.has-3d #smoke { display: none; }
html.has-3d #props .prop { opacity: 0; pointer-events: none; transition: opacity 1s ease; }
html.has-3d #props .now-playing { opacity: 1; }
/* The gold-leaf name stays on the glass in both offices. */
html.has-3d .gold-leaf { text-shadow: none; }