/* ============================================================
   scenes.css — page section layouts
   ============================================================ */

/* ============================================================
   HERO — The Threshold
   ============================================================ */
.hero {
  min-height: 100dvh;
  display: grid;
  align-content: center;
  padding-top: 6rem;
  position: relative;
}
.hero__inner { position: relative; z-index: 2; }

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 2rem;
  padding: 0.5rem 1rem 0.5rem 0.6rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline-2);
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.hero__kicker .live {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 oklch(83% 0.13 79 / 0.6);
  animation: pulse-ring 2.4s var(--ease-out-expo) infinite;
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 oklch(83% 0.13 79 / 0.6); }
  70%  { box-shadow: 0 0 0 12px oklch(83% 0.13 79 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(83% 0.13 79 / 0); }
}
body[data-motion="off"] .hero__kicker .live { animation: none; }

.hero h1 {
  font-size: var(--text-hero);
  line-height: 0.94;
  letter-spacing: -0.04em;
  max-width: 16ch;
}
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span {
  display: block;
  transform: translateY(110%);
  animation: rise-in var(--dur-cinema) var(--ease-out-expo) forwards;
}
.hero h1 .line:nth-child(2) > span { animation-delay: 160ms; }
.hero h1 .line:nth-child(3) > span { animation-delay: 320ms; }
@keyframes rise-in { to { transform: translateY(0); } }
body[data-motion="off"] .hero h1 .line > span { transform: none; animation: none; }

/* ---- Living headline: kerning-safe decode · per-word magnetic · gold flow ----
   Words are whole text runs, so kerning + tracking stay intact (per-letter
   spans broke kerning). Each word is the transform unit for the magnetic lift. */
.js-hero .line { overflow: visible; }
.js-hero .line > span { transform: none; animation: none; }
.hero h1 .word {
  display: inline-block;
  transition: transform 0.4s var(--ease-spring);
  will-change: transform;
}
/* the gold line shimmers with a slow-moving gradient — signal that never sits still */
.hero h1 .line--gold .word {
  background: linear-gradient(100deg,
     var(--gold-soft) 0%, var(--gold) 42%, var(--ember) 66%, var(--gold-soft) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: gold-flow 5.5s linear infinite;
}
@keyframes gold-flow { to { background-position: 220% 0; } }

body[data-motion="off"] .hero h1 .word { transition: none; animation: none; }
@media (prefers-reduced-motion: reduce) { .hero h1 .word { transition: none; animation: none; } }

.hero__lede {
  margin-top: 2rem;
  max-width: 52ch;
  font-size: var(--text-lg);
  color: var(--text-muted);
  opacity: 0;
  animation: fade-up var(--dur-slow) var(--ease-out-expo) 620ms forwards;
}
.hero__cta {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  opacity: 0;
  animation: fade-up var(--dur-slow) var(--ease-out-expo) 780ms forwards;
}
@keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
body[data-motion="off"] .hero__lede,
body[data-motion="off"] .hero__cta { animation: none; opacity: 1; }

/* Live "signal meter" strip under the hero */
.hero__meter {
  margin-top: 3.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
  align-items: center;
  opacity: 0;
  animation: fade-up var(--dur-slow) var(--ease-out-expo) 940ms forwards;
}
body[data-motion="off"] .hero__meter { animation: none; opacity: 1; }
.stat { display: flex; flex-direction: column; gap: 0.2rem; }
.stat b {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--gold-soft);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.stat span { font-size: var(--text-xs); color: var(--text-faint); letter-spacing: 0.06em; text-transform: uppercase; }

/* Scroll cue */
.scroll-cue {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  color: var(--text-faint);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.scroll-cue .track {
  width: 1px; height: 44px;
  background: var(--hairline-2);
  overflow: hidden;
  position: relative;
}
.scroll-cue .track::after {
  content: ""; position: absolute; top: -50%; left: 0;
  width: 100%; height: 50%;
  background: var(--gold);
  animation: cue-fall 2.2s var(--ease-in-out) infinite;
}
@keyframes cue-fall { to { top: 100%; } }
body[data-motion="off"] .scroll-cue .track::after { animation: none; top: 25%; }

/* Cold-load guard: honor prefers-reduced-motion from first paint, before JS
   sets data-motion. Otherwise the hero headline sits off-screen until JS runs. */
@media (prefers-reduced-motion: reduce) {
  .hero h1 .line > span { transform: none; animation: none; }
  .hero__lede, .hero__cta, .hero__meter { opacity: 1; animation: none; }
  .hero__kicker .live { animation: none; }
  .scroll-cue .track::after { animation: none; top: 25%; }
}

/* ============================================================
   MANIFESTO — noise resolving to signal
   ============================================================ */
.manifesto { text-align: center; }
.manifesto__big {
  font-size: var(--text-2xl);
  line-height: 1.14;
  max-width: 20ch;
  margin-inline: auto;
}
.manifesto__big .dim { color: var(--text-faint); }
.manifesto__big .lit { color: var(--text); }
.manifesto__sub {
  margin-top: 2rem;
  color: var(--text-muted);
  max-width: 46ch;
  margin-inline: auto;
  font-size: var(--text-lg);
}

/* noise → signal visual */
.noise-signal {
  margin: var(--space-4) auto 0;
  max-width: 720px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg,
     transparent, var(--gold) 20%, var(--gold) 80%, transparent);
  position: relative;
  opacity: 0.9;
}
.noise-signal::before {
  content: "";
  position: absolute; inset: -8px 0;
  background:
    radial-gradient(2px 2px at 10% 50%, var(--text-faint), transparent),
    radial-gradient(2px 2px at 30% 20%, var(--text-faint), transparent),
    radial-gradient(2px 2px at 55% 80%, var(--text-faint), transparent),
    radial-gradient(2px 2px at 78% 30%, var(--text-faint), transparent),
    radial-gradient(2px 2px at 92% 60%, var(--text-faint), transparent);
  opacity: 0.5;
}

/* ============================================================
   THE FIVE POWERS — bento grid
   ============================================================ */
.powers {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.1rem;
}
.power { grid-column: span 6; padding: var(--space-3); min-height: 200px; display: flex; flex-direction: column; }
@media (min-width: 720px) {
  .power--a { grid-column: span 4; }
  .power--b { grid-column: span 2; }
  .power--c { grid-column: span 2; }
  .power--d { grid-column: span 2; }
  .power--e { grid-column: span 2; }
}
.power__n {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--accent);
  letter-spacing: var(--tracking-wide);
}
.power h3 { font-size: var(--text-xl); margin-top: 0.6rem; }
.power p { color: var(--text-muted); margin-top: 0.7rem; font-size: var(--text-sm); }
.power .spacer { flex: 1; }
.power__tag {
  margin-top: 1.4rem;
  font-size: var(--text-xs);
  color: var(--text-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.power__glyph {
  width: 40px; height: 40px;
  color: var(--accent);
  opacity: 0.95;
  filter: drop-shadow(0 0 10px color-mix(in oklch, var(--accent), transparent 55%));
}
/* each power carries its own colour of light */
.power--a { --accent: var(--gold); }
.power--b { --accent: var(--iris); }
.power--c { --accent: var(--cyan); }
.power--d { --accent: var(--rose); }
.power--e { --accent: var(--violet); }

/* ============================================================
   THE DAILY SIGNAL — verified vs future (honesty)
   ============================================================ */
.signal-legend {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  margin-bottom: var(--space-4);
  padding: 1rem 1.3rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--glass);
  backdrop-filter: blur(var(--blur));
  font-size: var(--text-sm);
  color: var(--text-muted);
  align-items: center;
}
.signal-legend .lg { display: inline-flex; align-items: center; gap: 0.55rem; }

.signal-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .signal-grid { grid-template-columns: 1fr 1fr; } }

.signal-col h3 {
  font-size: var(--text-lg);
  display: flex; align-items: center; gap: 0.8rem;
  margin-bottom: 1.1rem;
}
.signal-item {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.05rem 1.2rem;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--surface-2);
  margin-bottom: 0.75rem;
  transition: transform var(--dur-fast) var(--ease-out-expo), border-color var(--dur-fast) ease;
}
.signal-item:hover { transform: translateX(4px); border-color: var(--hairline-2); }
.signal-item__i {
  font-family: var(--font-display);
  color: var(--text-faint);
  font-size: var(--text-sm);
  min-width: 1.8ch;
}
.signal-item h4 { font-family: var(--font-sans); font-size: var(--text-base); font-weight: 600; letter-spacing: 0; }
.signal-item p { color: var(--text-muted); font-size: var(--text-sm); margin-top: 0.25rem; }
.signal-item .src { color: var(--verified-dim); font-size: var(--text-xs); }
.signal-col--future .signal-item .src { color: var(--violet-dim); }

/* ============================================================
   FINALE MODE — the 24h reset
   ============================================================ */
.finale {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .finale { grid-template-columns: 1.1fr 0.9fr; } }
.finale__ring {
  aspect-ratio: 1;
  max-width: 380px;
  width: 100%;
  margin-inline: auto;
  display: grid;
  place-items: center;
  position: relative;
}
.finale__count {
  text-align: center;
}
.finale__count b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--gold-soft);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.finale__count span { color: var(--text-faint); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.finale ul { list-style: none; display: grid; gap: 0.9rem; margin-top: 1.6rem; }
.finale li { display: flex; gap: 0.8rem; align-items: baseline; color: var(--text-muted); }
.finale li b { color: var(--gold); font-family: var(--font-display); font-weight: 500; }

/* ============================================================
   BUILD LEAGUE
   ============================================================ */
.league__tracks { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: var(--space-4); }
.quest-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.9rem;
}
.quest-day {
  padding: 1.1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--surface);
  transition: transform var(--dur-fast) var(--ease-out-expo), border-color var(--dur-fast) ease;
}
.quest-day:hover { transform: translateY(-3px); border-color: var(--gold-deep); }
.quest-day b { display: block; font-family: var(--font-display); color: var(--gold); font-size: var(--text-sm); margin-bottom: 0.4rem; letter-spacing: var(--tracking-wide); }
.quest-day p { font-size: var(--text-sm); color: var(--text-muted); }
.rubric {
  display: flex; flex-wrap: wrap; gap: 1rem;
  margin-top: var(--space-4);
}
.rubric .r {
  flex: 1 1 160px;
  padding: 1.1rem 1.3rem;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--glass);
}
.rubric .r b { font-family: var(--font-display); color: var(--text); display: block; font-size: var(--text-lg); font-weight: 500; }
.rubric .r span { color: var(--text-faint); font-size: var(--text-sm); }

/* ============================================================
   EPILOGUE + Finale Card
   ============================================================ */
.epilogue { text-align: center; }
.epilogue__lines {
  display: grid; gap: 0.4rem;
  margin: var(--space-4) auto 0;
  max-width: 40ch;
}
.epilogue__lines span { color: var(--text-faint); font-size: var(--text-lg); font-family: var(--font-display); }
.epilogue__lines span.lit { color: var(--text); }

.closer {
  text-align: center;
  padding-block: var(--space-6);
}
.closer h2 { font-size: var(--text-epic); line-height: 0.9; }
.closer h2 .a { color: var(--text-faint); }
.closer h2 .b { display:block; }
.closer p { color: var(--text-muted); margin: 1.6rem auto 2.4rem; max-width: 40ch; font-size: var(--text-lg); }

/* ============================================================
   THE DAWN — a new life is coming
   The one scene where the dark palette breaks into light.
   Sun rises + brightens on scroll-in (class .risen). Reduced
   motion snaps straight to the risen state.
   ============================================================ */
.dawn {
  position: relative;
  overflow: hidden;
  min-height: 92vh;
  display: grid;
  place-items: center;
  text-align: center;
  isolation: isolate;
}
.dawn__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* light rays fanning up from the horizon */
.dawn__rays {
  position: absolute;
  left: 50%; bottom: -6%;
  width: 170vmax; height: 170vmax;
  transform: translateX(-50%) scale(0.55);
  transform-origin: 50% 100%;
  background: repeating-conic-gradient(from 0deg at 50% 100%,
     oklch(88% 0.12 80 / 0.10) 0deg 2.4deg,
     transparent 2.4deg 9deg);
  -webkit-mask: radial-gradient(58% 58% at 50% 100%, #000 0%, transparent 72%);
          mask: radial-gradient(58% 58% at 50% 100%, #000 0%, transparent 72%);
  opacity: 0;
  transition: opacity 2.6s var(--ease-out-expo), transform 3.2s var(--ease-out-expo);
}
.dawn.risen .dawn__rays { opacity: 1; transform: translateX(-50%) scale(1); }

/* the rising sun */
.dawn__sun {
  position: absolute;
  left: 50%; bottom: 22%;
  width: min(680px, 92vw); aspect-ratio: 1;
  transform: translate(-50%, 44%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
     oklch(94% 0.07 86 / 0.95) 0%,
     oklch(84% 0.14 68 / 0.55) 30%,
     oklch(68% 0.17 46 / 0.18) 54%,
     transparent 70%);
  opacity: 0.22;
  filter: blur(1px);
  transition: transform 2.8s var(--ease-out-expo), opacity 2.8s var(--ease-out-expo);
}
.dawn.risen .dawn__sun { transform: translate(-50%, 6%); opacity: 1; }

/* a bright horizon line */
.dawn__horizon {
  position: absolute;
  left: 0; right: 0; bottom: 30%;
  height: 1px;
  background: linear-gradient(90deg, transparent, oklch(92% 0.1 82 / 0.75), transparent);
  opacity: 0;
  transition: opacity 2.2s var(--ease-out-expo) 0.5s;
}
.dawn.risen .dawn__horizon { opacity: 1; }

.dawn__copy { position: relative; z-index: 2; }
/* soft scrim keeps copy legible over the sun's bright core */
.dawn__copy::before {
  content: "";
  position: absolute;
  inset: -18% -10%;
  z-index: -1;
  background: radial-gradient(58% 62% at 50% 48%, oklch(9% 0.02 275 / 0.62), transparent 74%);
  pointer-events: none;
}
.dawn__copy .eyebrow { display: block; margin-bottom: 1.2rem; }
.dawn h2 { display: grid; gap: 0.5rem; }
.dawn__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-lg);
  color: var(--text-muted);
}
.dawn__big { font-size: var(--text-2xl); line-height: 1.02; }
.dawn__copy p {
  margin: 1.7rem auto 0;
  max-width: 44ch;
  color: var(--text);
  font-size: var(--text-lg);
}

body[data-motion="off"] .dawn__rays,
body[data-motion="off"] .dawn__sun,
body[data-motion="off"] .dawn__horizon { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .dawn__rays, .dawn__sun, .dawn__horizon { transition: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--hairline);
  padding: var(--space-4) 0 var(--space-3);
  color: var(--text-faint);
  font-size: var(--text-sm);
}
.footer__grid {
  display: flex; flex-wrap: wrap; gap: 2rem;
  justify-content: space-between; align-items: flex-start;
}
.footer a:hover { color: var(--text); }
.footer .note { max-width: 40ch; line-height: 1.6; }
.footer .cols { display: flex; gap: 3rem; flex-wrap: wrap; }
.footer .col b { color: var(--text-muted); display: block; margin-bottom: 0.7rem; font-weight: 600; }
.footer .col a { display: block; margin-bottom: 0.4rem; color: var(--text-faint); }

/* ============================================================
   Responsive refinements
   ============================================================ */
@media (max-width: 640px) {
  /* Anchor hero content near the top so the headline is never
     centered off-screen when the stack is taller than the viewport. */
  .hero {
    align-content: start;
    padding-top: 6.5rem;
    padding-bottom: 3rem;
    min-height: 100dvh;
  }
  .hero__meter { gap: 1.4rem 2rem; margin-top: 2.4rem; }
  .wordmark small { display: none; }
  .masthead { padding-inline: var(--gutter); }
  .powers { gap: 0.8rem; }
  .finale__ring { max-width: 300px; }
  .controls { bottom: 1rem; right: 1rem; }
  .ctrl { padding: 0.5rem 0.7rem; }
  /* Give the closer headline room to breathe on small screens */
  .closer h2 { font-size: clamp(2.6rem, 12vw, 4rem); }
}

/* Tablet: two-column powers so the bento still reads as intentional */
@media (min-width: 641px) and (max-width: 719px) {
  .powers { grid-template-columns: repeat(2, 1fr); }
  .power { grid-column: span 1 !important; }
}