/* ============================================================
   BASE — reset, atmosphere (grain / vignette / letterbox),
   typography, layout primitives, navigation.
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* Honor the hidden attribute even when a component sets display */
[hidden] { display: none !important; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  /* No CSS smooth-scroll: it fights the director's engine and
     GSAP's scrollTo (the "wheel barely nudges" bug). Anchor
     clicks are smoothed in JS instead. */
  scroll-behavior: auto;
}

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: color-mix(in oklch, var(--gold) 35%, transparent); color: var(--ink-100); }

/* ---- ATMOSPHERE: FIXED BACKDROP ------------------------ */
/* A quiet violet bloom that drifts behind everything */
.atmosphere {
  position: fixed; inset: -8vh -8vw; z-index: var(--z-bg);
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 20% 15%, color-mix(in oklch, var(--violet-deep) 26%, transparent) 0%, transparent 60%),
    radial-gradient(55% 45% at 85% 80%, color-mix(in oklch, var(--violet-mid) 18%, transparent) 0%, transparent 62%),
    var(--bg);
  animation: bloomDrift 34s var(--ease-in-out-cine) infinite alternate;
}
@keyframes bloomDrift {
  0%   { transform: translate3d(0,0,0) scale(1.02); }
  100% { transform: translate3d(2%, -1.5%, 0) scale(1.08); }
}

/* ---- FILM GRAIN ----------------------------------------
   Viewport-sized (a 200% translating sheet cost ~120MB of GPU
   tiles and blanked sections). Life comes from a cheap opacity
   flicker + background-position steps, not layer movement. */
.grain {
  position: fixed; inset: 0; z-index: var(--z-grain);
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  animation: grainFlicker 0.9s steps(3) infinite;
}
@keyframes grainFlicker {
  0%   { opacity: var(--grain-opacity); background-position: 0 0; }
  50%  { opacity: calc(var(--grain-opacity) * 1.35); background-position: -80px 40px; }
  100% { opacity: var(--grain-opacity); background-position: 60px -60px; }
}

/* ---- EDGE VIGNETTE ------------------------------------- */
.vignette {
  position: fixed; inset: 0; z-index: var(--z-vignette);
  pointer-events: none;
  background: var(--vignette);
}

/* ---- CINEMATIC LETTERBOX ------------------------------- */
.letterbox {
  position: fixed; left: 0; right: 0; z-index: var(--z-letterbox);
  height: var(--bar-height);
  background: #000;
  pointer-events: none;
  transform: scaleY(0);
  transition: transform var(--dur-cine) var(--ease-out-expo);
}
.letterbox--top    { top: 0;    transform-origin: top; }
.letterbox--bottom { bottom: 0; transform-origin: bottom; }
body.cinema .letterbox { transform: scaleY(1); }

@media (prefers-reduced-motion: reduce) {
  .atmosphere, .grain { animation: none; }
  html, html.presenting { scroll-behavior: auto; }
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--gold); font-weight: 700; line-height: 1.12; }

.script { font-family: var(--font-script); color: var(--gold); font-weight: 400; line-height: 1.3; }

/* Eyebrow / section label */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-antique);
  opacity: 0.85;
  text-align: center;
}

/* Section title — script, restrained */
.section-title {
  font-family: var(--font-script);
  font-size: var(--step-4);
  color: var(--gold);
  text-align: center;
  line-height: 1.25;
  margin-top: var(--space-xs);
}

.section-lede {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-style: italic;
  color: var(--champagne);
  opacity: 0.86;
  text-align: center;
  max-width: 42rem;
  margin: var(--space-md) auto 0;
  line-height: 1.6;
}

/* Narrative body */
.prose {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.75;
  color: var(--ink-85);
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2.5rem, 860px); margin-inline: auto; }

.section { position: relative; padding-block: var(--space-section); }
.section__head { margin-bottom: var(--space-xl); }

/* Ornaments */
.divider {
  width: 92px; height: 1px; margin: var(--space-md) auto;
  background: linear-gradient(90deg, transparent, var(--gold-antique), transparent);
  opacity: 0.7;
}
.ornament { text-align: center; color: var(--gold-antique); letter-spacing: 0.6em; opacity: 0.5; }

/* Hairline frame used on media */
.framed {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-frame);
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  padding: 1rem 1.5rem;
  background: linear-gradient(180deg, color-mix(in oklch, var(--noir-void) 92%, transparent), transparent);
  transition: background var(--dur-fast) var(--ease-out-soft), backdrop-filter var(--dur-fast);
  opacity: 0; transform: translateY(-8px);
}
.nav.revealed { opacity: 1; transform: none; transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo); }
.nav.scrolled {
  background: color-mix(in oklch, var(--noir-void) 94%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--hairline-soft);
}
.nav__inner { width: min(100% , var(--container)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nav__brand { font-family: var(--font-script); color: var(--gold); font-size: 1.5rem; }
.nav__links { display: flex; gap: 1.9rem; list-style: none; }
.nav__links a {
  font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-antique); opacity: 0.72; position: relative; transition: opacity var(--dur-fast);
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1px;
  background: var(--gold); transition: right var(--dur) var(--ease-out-expo);
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { right: 0; }
@media (max-width: 820px) { .nav__links { display: none; } }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--noir-void); }
::-webkit-scrollbar-thumb { background: color-mix(in oklch, var(--gold-antique) 30%, transparent); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in oklch, var(--gold-antique) 55%, transparent); }

/* Focus visibility for keyboard users */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

/* Utility */
.center { text-align: center; }
.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; }