/* FILE MAP
   file: css/main.css
   site: SINGULARITY — Ezon Partners × Fable 5 (direction 1 of 5)
   role: design system + experience layout (/, shared tokens also used by /guide/)
   contract: DIRECTIONS.md — VARIANCE 8 · MOTION 9 · DENSITY 2
   palette: void #070608 · deep #100C0E · text #EDE6DA · muted #9A8F80
            accent amber #FF9E4F -> white-hot #FFD9A0 (single family)
   type: Instrument Serif (display/voice) · Geist (UI/body) · Geist Mono (annotations)
*/

/* ---------- tokens ---------- */
:root {
  --void: #070608;
  --deep: #100C0E;
  --ink: #EDE6DA;
  --muted: #9A8F80;
  --amber: #FF9E4F;
  --hot: #FFD9A0;
  --amber-06: rgba(255, 158, 79, .06);
  --amber-14: rgba(255, 158, 79, .14);
  --amber-30: rgba(255, 158, 79, .30);

  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Geist Mono', 'SFMono-Regular', Menlo, monospace;

  --micro: 0.6875rem;          /* 11px mono annotations */
  --body: 1.0625rem;
  --lede: clamp(1.125rem, 0.9rem + 1vw, 1.375rem);
  --title: clamp(2.75rem, 1.4rem + 6vw, 5.5rem);
  --display: clamp(3.25rem, 1.8rem + 8.4vw, 8.25rem);
  --numeral: clamp(11rem, 30vw, 27rem);

  --edge: clamp(1.25rem, 7vw, 6.5rem);
  --shadow-amber: 0 24px 80px -24px rgba(255, 158, 79, .18);
}

/* ---------- base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--body);
  line-height: 1.7;
  font-weight: 340;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--amber); color: var(--void); }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 1px solid var(--amber);
  outline-offset: 4px;
}

em { font-style: italic; }

.mono {
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 420;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- fixed field (WebGL canvas + fallback) ---------- */
#field,
#field-fallback {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

#field { display: none; }
html.webgl #field { display: block; }

/* static poster: layered radial composition approximating the scene */
#field-fallback {
  background:
    radial-gradient(58% 10% at 68% 55%, rgba(255, 158, 79, .30), transparent 62%),
    radial-gradient(34% 6% at 68% 54%, rgba(255, 217, 160, .38), transparent 70%),
    radial-gradient(16% 16% at 68% 52%, #000 42%, rgba(255, 158, 79, .32) 52%, transparent 66%),
    radial-gradient(120% 90% at 70% 45%, var(--deep), var(--void) 68%);
}
html.webgl #field-fallback { display: none; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---------- header ---------- */
.site-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem var(--edge);
  background: linear-gradient(rgba(7, 6, 8, .82), transparent);
}

.brand { color: var(--ink); display: inline-flex; }
.brand svg { height: 1.375rem; width: auto; display: block; }

.site-head nav a {
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: color .35s cubic-bezier(.16, 1, .3, 1);
}
.site-head nav a:hover { color: var(--hot); }
.site-head nav a svg { width: .75rem; height: .75rem; }

/* ---------- progress rail (right edge) ---------- */
.rail {
  position: fixed;
  right: 1.75rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .875rem;
}
.rail a {
  color: var(--muted);
  opacity: .45;
  font-size: .625rem;
  letter-spacing: .1em;
  transition: opacity .4s, color .4s;
}
.rail a.is-live { opacity: 1; color: var(--amber); }
.rail .track {
  width: 1px;
  height: 16vh;
  background: rgba(154, 143, 128, .25);
  position: relative;
  overflow: hidden;
}
.rail .track i {
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 18%;
  background: var(--amber);
  transform: translateY(0);
}

/* velocity HUD (bottom-left) */
.hud {
  position: fixed;
  left: var(--edge);
  bottom: 1.5rem;
  z-index: 25;
  font-size: .625rem;
  color: var(--muted);
}
.hud b { color: var(--amber); font-weight: 420; }

/* ---------- scenes ---------- */
main { position: relative; z-index: 1; }

.scene {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
}
.mov { min-height: 135vh; }

/* hero */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--edge);
  min-height: 100dvh;
}
.kicker { margin-bottom: 2.25rem; color: var(--amber); }
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--display);
  line-height: .96;
  letter-spacing: -.01em;
  max-width: 11ch;
}
.display em { color: var(--hot); }
.hero .lede {
  margin-top: 2.5rem;
  max-width: 44ch;
  color: var(--muted);
  font-size: var(--lede);
  line-height: 1.65;
  font-weight: 360;
}
.cue {
  position: absolute;
  bottom: 1.5rem;
  right: var(--edge);
  display: flex;
  align-items: center;
  gap: .875rem;
  font-size: .625rem;
  color: var(--muted);
}
.cue .cue-line {
  display: block;
  width: 1px; height: 3.5rem;
  background: linear-gradient(var(--amber), transparent);
  animation: fall-line 2.6s cubic-bezier(.16, 1, .3, 1) infinite;
  transform-origin: top;
}
@keyframes fall-line {
  0% { transform: scaleY(0); opacity: 0; }
  35% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(1.5rem); opacity: 0; }
}

/* movement scenes: asymmetric captions pinned at edges */
.caption {
  position: absolute;
  max-width: 33rem;
  z-index: 2;
  text-shadow: 0 1px 18px rgba(7, 6, 8, .85);
}
/* warm-dark scrim so copy stays legible over the incandescent disk.
   closest-side guarantees full transparency at every box edge — no clipped rim. */
.caption::before {
  content: '';
  position: absolute;
  inset: -4.5rem -6rem;
  background: radial-gradient(closest-side, rgba(7, 6, 8, .82), rgba(7, 6, 8, 0));
  z-index: -1;
}
.caption .meta {
  margin-bottom: 1.5rem;
  color: var(--amber);
  text-shadow: 0 1px 6px rgba(7, 6, 8, .95), 0 1px 22px rgba(7, 6, 8, .8);
}
.caption .meta span { color: var(--muted); }
.caption .title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--title);
  line-height: 1;
  letter-spacing: -.005em;
  margin-bottom: 1.5rem;
}
.caption .body { color: var(--ink); max-width: 38ch; }
.caption .voice {
  margin-top: 1.75rem;
  font-family: var(--serif);
  font-size: 1.375rem;
  color: var(--amber);
}

.numeral {
  position: absolute;
  font-family: var(--serif);
  font-size: var(--numeral);
  line-height: .8;
  color: var(--amber-06);
  -webkit-text-stroke: 1px var(--amber-30);
  z-index: 1;
  user-select: none;
}

/* per-movement composition (VARIANCE 8) */
.mov-1 .caption { left: var(--edge); bottom: 16vh; }
.mov-1 .numeral { right: 6vw; top: 24vh; } /* clears the fixed GUIA nav even with parallax drift */

.mov-2 .caption { right: var(--edge); top: 24vh; }
.mov-2 .numeral { left: 3vw; bottom: 14vh; }

.mov-3 .caption { left: var(--edge); top: 50%; transform: translateY(-50%); }
.mov-3 .numeral {
  left: 58%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(var(--numeral) * 1.35);
  color: transparent;
}

.mov-4 .caption { right: var(--edge); bottom: 14vh; text-align: left; }
.mov-4 .numeral { left: 5vw; top: -7vh; }

.mov-5 .caption { left: var(--edge); bottom: 22vh; }
.mov-5 .numeral { right: 4vw; bottom: -9vh; }

/* finale: dead center — the singularity itself */
.finale {
  min-height: 120dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--edge);
}
.finale .display { max-width: none; }
.finale .lede {
  margin-top: 2rem;
  color: var(--muted);
  font-size: var(--lede);
  max-width: 44ch;
}
.guide-link {
  margin-top: 3.5rem;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: var(--amber);
  border: 1px solid var(--amber-30);
  padding: 1rem 1.75rem;
  border-radius: 100px;
  box-shadow: var(--shadow-amber);
  transition: border-color .4s, color .4s, transform .4s cubic-bezier(.16, 1, .3, 1);
}
.guide-link:hover { border-color: var(--amber); color: var(--hot); }
.guide-link:active { transform: translateY(1px); }
.guide-link svg { width: .8125rem; height: .8125rem; }

/* ---------- footer ---------- */
.site-foot {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 2rem var(--edge) 2.5rem;
  border-top: 1px solid rgba(154, 143, 128, .16);
  font-size: .625rem;
}

/* ---------- reveal defaults (JS enhances; no-JS stays visible) ---------- */
html.choreo [data-reveal] { opacity: 0; }
html.choreo.static [data-reveal] { opacity: 1; }

/* ---------- mobile collapse (strict single column) ---------- */
@media (max-width: 899px) {
  .rail, .hud { display: none; }
  .mov { min-height: 100dvh; display: flex; align-items: flex-end; }
  .caption {
    position: static;
    max-width: none;
    transform: none;
    padding: 22vh var(--edge) 14vh;
  }
  .mov-3 .caption { transform: none; }
  .numeral { font-size: clamp(9rem, 46vw, 14rem); opacity: .8; }
  .mov-3 .numeral { font-size: clamp(9rem, 46vw, 14rem); color: var(--amber-06); }
  .cue { left: var(--edge); right: auto; }
  .site-foot { flex-direction: column; gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cue .cue-line { animation: none; }
}