/* ============================================================
   office.css — B5 office-reveal teaser (pure CSS set dressing)
   Sits behind the persona panels; fades/scales in on reveal.
   ============================================================ */
.office {
  position: absolute; inset: 0; z-index: 1; opacity: 0;
  background:
    radial-gradient(60% 50% at 38% 30%, rgb(var(--warm-glow) / calc(0.5 * var(--warmth))) 0%, transparent 60%),
    radial-gradient(40% 40% at 70% 78%, rgb(var(--warm-glow) / calc(0.18 * var(--warmth))) 0%, transparent 70%),
    linear-gradient(180deg, #1d150d 0%, #120d09 55%, #0a0706 100%);
  transform: scale(1.08);
  transition: opacity 1s var(--ease-out), transform 1.4s var(--ease-out);
}
.stage[data-step="open"] .office,
.stage[data-step="settle"] .office { opacity: 1; transform: scale(1); }

/* desk plane */
.office__desk {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(180deg, #2a1d11, #160f08);
  box-shadow: 0 -1px 0 rgb(var(--warm-glow) / 0.25);
  transform: perspective(800px) rotateX(34deg); transform-origin: bottom;
}
/* desk lamp pool */
.office__lamp {
  position: absolute; left: 24%; top: 18%; width: 40%; height: 60%;
  background: radial-gradient(circle at 50% 0%, rgb(var(--warm-glow) / calc(0.55 * var(--warmth))), transparent 62%);
  filter: blur(8px); animation: lamp-breathe 5s var(--ease-inout) infinite;
}
@keyframes lamp-breathe { 0%,100% { opacity: 0.8; } 50% { opacity: 1; } }
/* laptop glow with a faint purple/green CodeZero trace */
.office__laptop {
  position: absolute; left: 41%; bottom: 22%; width: 18%; height: 12%; border-radius: 4px;
  background: linear-gradient(180deg, rgba(244,241,234,0.9), rgb(var(--warm-glow) / 0.6));
  box-shadow: 0 0 40px 8px rgb(var(--warm-glow) / calc(0.5 * var(--warmth))),
              0 0 60px 12px rgb(var(--accent-glow) / 0.12);
  filter: blur(1px);
}
.office__laptop::after {
  content: ""; position: absolute; inset: 0; border-radius: 4px;
  background: linear-gradient(90deg, transparent 60%, rgb(var(--accent-glow) / 0.5), rgb(var(--green-glow) / 0.4));
  mix-blend-mode: screen; opacity: 0; animation: trace 6s var(--ease-inout) infinite 2s;
}
@keyframes trace { 0%,100% { opacity: 0; } 50% { opacity: 0.7; } }
/* bokeh dust */
.office__bokeh { position: absolute; inset: 0; opacity: 0.5;
  background-image:
    radial-gradient(circle, rgb(var(--warm-glow) / 0.8) 0%, transparent 70%),
    radial-gradient(circle, rgb(var(--warm-glow) / 0.6) 0%, transparent 70%),
    radial-gradient(circle, rgb(var(--accent-glow) / 0.5) 0%, transparent 70%);
  background-size: 8px 8px, 5px 5px, 6px 6px;
  background-position: 20% 40%, 64% 30%, 80% 60%;
  filter: blur(1px); animation: lamp-breathe 7s var(--ease-inout) infinite; }

/* office establishing art slot (optional real asset later) */
.office__slot {
  position: absolute; left: 50%; top: 46%; translate: -50% -50%;
  width: min(54vw, 40rem); aspect-ratio: 16/9; z-index: 2;
  opacity: 0; transition: opacity 1s var(--ease-out) 0.4s;
}
.stage[data-step="settle"] .office__slot { opacity: 1; }
.office__slot image-slot { width: 100%; height: 100%; display: block; }