/* ============================================================
   base.css — reset + stage scaffold + shared typography
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--graphite-900);
  color: var(--ink-100);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden; /* hero owns the viewport in phase 1 */
}
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--warm-300); outline-offset: 3px; border-radius: 4px; }

#root { height: 100%; }

/* The fixed-stage: full viewport, the hero composition lives inside */
.stage {
  position: relative;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  background:
    radial-gradient(72% 92% at 19% 50%,
      rgb(var(--warm-glow) / calc(0.28 * var(--warmth))) 0%,
      rgb(var(--warm-glow) / 0) 54%),
    radial-gradient(60% 104% at 88% 56%,
      rgb(var(--accent-glow) / 0.2) 0%,
      rgb(var(--accent-glow) / 0) 56%),
    radial-gradient(40% 60% at 50% 120%, rgba(0,0,0,0.5), transparent 60%),
    linear-gradient(101deg, #1d160e 0%, #120c10 47%, #0a0910 100%);
  transition: filter 0.6s var(--ease-out);
}

/* camera push-in during activation */
.stage[data-phase="activating"] .camera,
.stage[data-phase="office"] .camera { will-change: transform; }
.camera {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  /* GSAP owns the transform during activation — do NOT transition transform
     (a CSS transition would smooth/eat GSAP's per-frame writes). */
  transition: filter 0.9s var(--ease-inout);
}

/* loading poster (pre-mount fallback handled in index.html) */
.boot {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--graphite-900); z-index: 9999;
  font-family: var(--font-mono); color: var(--ink-500);
  font-size: var(--fs-kicker); letter-spacing: 0.3em; text-transform: uppercase;
}

/* utility */
.mono { font-family: var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; }

/* ---------- custom cursor (global) ---------- */
@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
  body * { cursor: none; }
  /* but restore the real cursor over chrome UI (Tweaks panel) — it sits above
     the custom-cursor layer, so without this the pointer vanishes over it */
  [data-omelette-chrome], [data-omelette-chrome] * { cursor: auto; }
  [data-omelette-chrome] .twk-hd { cursor: move; }
  [data-omelette-chrome] button, [data-omelette-chrome] input,
  [data-omelette-chrome] select, [data-omelette-chrome] [role="switch"],
  [data-omelette-chrome] [role="radio"] { cursor: pointer; }
  [data-omelette-chrome] input[type="range"] { cursor: ew-resize; }
}
#custom-cursor {
  position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none;
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid rgba(244,241,234,0.85); background: rgba(244,241,234,0.05);
  color: rgba(244,241,234,0.92);
  box-shadow: 0 0 0 1.5px rgba(0,0,0,0.28), 0 2px 12px rgba(0,0,0,0.35);
  will-change: transform; backface-visibility: hidden;
  transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out),
              background 0.35s var(--ease-out), border-radius 0.35s var(--ease-out);
}
#custom-cursor .cursor-plus { transition: opacity 0.25s var(--ease-out); }
#custom-cursor .cursor-ring { position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 0.3s var(--ease-out); animation: cursor-spin 8s linear infinite; }
#custom-cursor.is-down { width: 22px; height: 22px; }
@keyframes cursor-spin { to { transform: rotate(360deg); } }
/* scroll state: grow into a rotating SCROLL ring */
.stage[data-scrollcue="on"] ~ #custom-cursor,
#custom-cursor.is-scroll {
  width: 86px; height: 86px; background: rgba(244,241,234,0.16); border-color: transparent;
}
#custom-cursor.is-scroll .cursor-plus { opacity: 0; }
#custom-cursor.is-scroll .cursor-ring { opacity: 1; }
@media (hover: none), (pointer: coarse) { #custom-cursor { display: none; } }
/* terminal-style slashed zero — wrap the "O"/"0" you want cut */
.z0 { position: relative; display: inline-block; }
.z0::after {
  content: ""; position: absolute; left: 50%; top: 4%; bottom: 4%; width: 0.085em;
  background: var(--slash-color, currentColor);
  transform: translateX(-50%) rotate(24deg); transform-origin: center; border-radius: 2px;
  pointer-events: none;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 120ms !important; }
}