/* ============================================================
   base.css — tokens, reset, typography, ambient FX.

   Deliberately small. There are two stages (entry, film) and one
   video element; anything not used by those is not in here.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --bg:        #050608;
  --ink:       #f2f3f7;
  --ink-2:     #b9bfcc;
  --line:      rgba(255, 255, 255, 0.09);
  --line-2:    rgba(255, 255, 255, 0.16);

  /* single accent — warm gold, chosen to sit against the near-black film */
  --accent:     #e8b15c;
  --accent-hi:  #ffdfa8;
  --accent-glow: rgba(232, 177, 92, 0.42);

  --glass-blur: saturate(150%) blur(18px);

  --font: "Space Grotesk", ui-sans-serif, system-ui, -apple-system,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.6;
  overflow: hidden;              /* nothing scrolls; the film is the page */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, video, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: #0a0a0a; }

/* ============================================================
   AMBIENT FX
   ============================================================ */
.fx {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* one pre-rendered noise tile, jittered by transform (stays on the GPU) */
.fx__grain {
  position: absolute;
  inset: -60px;
  opacity: 0;
  background-repeat: repeat;
  will-change: transform;
  animation: grainShift 0.7s steps(6, end) infinite;
}
body[data-stage="landing"] .fx__grain { opacity: 0.06; }

@keyframes grainShift {
  0%   { transform: translate3d(0, 0, 0); }
  17%  { transform: translate3d(-14px, 9px, 0); }
  34%  { transform: translate3d(11px, -13px, 0); }
  51%  { transform: translate3d(-9px, -8px, 0); }
  68%  { transform: translate3d(13px, 11px, 0); }
  85%  { transform: translate3d(-6px, 14px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.fx__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.42), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.5));
}
/* A soft vignette blends the edges of the letterboxed frame into the black
   bars, so it reads as a projected frame rather than a square pasted on. */
body[data-stage="film"] .fx__vignette { opacity: 0.45; }

/* ============================================================
   LETTER-STAGGERED TITLE
   .ch spans are produced by splitChars() in util.js
   ============================================================ */
[data-split] { display: inline-flex; }
.ch {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.9em, 0) rotate(4deg);
  transition: opacity 0.75s var(--e-out), transform 0.85s var(--e-out);
  transition-delay: calc(var(--i, 0) * 55ms + var(--split-base, 0ms));
}
[data-split].is-in .ch { opacity: 1; transform: none; }

/* ============================================================
   NOSCRIPT
   ============================================================ */
.noscript {
  position: relative;
  z-index: 100;
  padding: 22vh 6vw;
  background: var(--bg);
  text-align: center;
}
.noscript h1 { font-size: clamp(2.5rem, 9vw, 5rem); letter-spacing: 0.14em; margin-bottom: 1rem; }
.noscript p { color: var(--ink-2); }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fx__grain { display: none; }
  .ch { opacity: 1 !important; transform: none !important; }
}