/* ==========================================================================
   MOTION LAYER — cinematic intro, scroll choreography and the "chunk loading"
   signature. Loaded after styles.css; driven by assets/motion.js (GSAP 3.13).
   Everything here degrades to the static page when JS or GSAP is missing.
   ========================================================================== */

:root {
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);      /* ≈ expo.out — entrances */
  --e-inout: cubic-bezier(0.87, 0, 0.13, 1);   /* ≈ expo.inOut — wipes, sweeps */
  --e-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* ≈ back.out — pops */
}

/* ---------- Boot: hide what the intro is about to reveal (no flash) ---------- */
.motion-boot .is-home .site-header,
.motion-boot .hero-copy > *,
.motion-boot .hero-caption,
.motion-boot .hero-photo,
.motion-boot .subpage-heading > *,
.motion-boot .reviews-page-title > *,
.motion-boot .wiki-article > h1,
.motion-boot .wiki-article > h1 + * { opacity: 0; }

/* The old CSS-only intro is replaced by the GSAP timeline. */
.cine .hero-copy > *,
.cine .hero-caption,
.cine .hero-photo,
.cine .hero-photo img { animation: none; }

/* ---------- Hero: lens, light, chunk reveal, embers ---------- */
.hero-lens,
.hero-embers,
.hero-chunks {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-chunks { display: none; }
.cine .hero-chunks { display: block; }

.hero-photo img { transform-origin: 62% 58%; will-change: transform; }

/* Vignette + a warm light leak drifting over the forest. */
.hero-lens {
  overflow: hidden;
  background: radial-gradient(125% 95% at 55% 45%, transparent 52%, rgba(0, 0, 0, 0.55));
}

.hero-lens::before {
  content: '';
  position: absolute;
  top: -38vw;
  right: -22vw;
  width: 78vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 150, 60, 0.2), rgba(255, 96, 10, 0.07) 48%, transparent 72%);
  mix-blend-mode: screen;
  animation: sl-leak 16s ease-in-out infinite alternate;
}

.hero.is-offscreen .hero-lens::before { animation-play-state: paused; }

/* Film grain over the whole page: one texture ties the sections together. */
.film-grain {
  position: fixed;
  z-index: 90;
  inset: -64px;
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='256' height='256' filter='url(%23n)'/></svg>");
}

.film-grain.is-live { animation: sl-grain 0.6s steps(5) infinite; }

/* A sheen passes over the title letters every few seconds. */
.cine .hero-copy h1 { position: relative; font-kerning: none; }

.cine .hero-copy h1::after {
  content: attr(aria-label);
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  pointer-events: none;
  color: transparent;
  background: linear-gradient(100deg, transparent 42%, rgba(255, 228, 196, 0.95) 50%, transparent 58%) no-repeat;
  background-size: 300% 100%;
  background-position: var(--sheen, 100%) 0;
  -webkit-background-clip: text;
  background-clip: text;
}

/* Title: every letter rises out of its own mask. The padding keeps the negative
   tracking and the heavy glyph tops from being clipped. */
.sl-cm {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.12em 0.1em 0.1em;
  margin: -0.12em -0.1em -0.1em;
}

.sl-ch { display: inline-block; will-change: transform; }

/* SplitText line masks (lead, section headings). */
.sl-line-mask { padding: 0.14em 0.1em 0.1em; margin: -0.14em -0.1em -0.1em; }

/* Caption hairline draws in from the left. */
.cine .hero-caption { position: relative; border-top-color: transparent; }
.cine .hero-caption::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
  transform: scaleX(var(--draw, 1));
  transform-origin: 0 50%;
}

/* Scroll cue: a single block dropping, like an item falling a block down. */
.hero-scroll {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.hero-scroll i {
  width: 6px;
  height: 6px;
  background: var(--accent);
  animation: sl-drop 1.8s var(--e-inout) infinite;
}

@keyframes sl-drop {
  0% { transform: translateY(-7px); opacity: 0; }
  25% { opacity: 1; }
  65% { transform: translateY(5px); opacity: 1; }
  100% { transform: translateY(8px); opacity: 0; }
}

/* ---------- Buttons: a light sweep on hover ---------- */
.primary-button,
.login-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.primary-button::after,
.login-button::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.42) 50%, transparent 70%);
  transform: translateX(-130%);
  pointer-events: none;
}

.primary-button:hover::after,
.login-button:hover::after {
  transform: translateX(130%);
  transition: transform 0.75s var(--e-out);
}

.is-authenticated .login-button::after { content: none; }

/* ---------- Header scroll progress ---------- */
.scroll-progress {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ---------- Stats: accent rule draws over the item on hover ---------- */
.stat-item { position: relative; }
.stat-item::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.6s var(--e-out);
}
.stat-item:hover::after { transform: scaleX(1); }

/* ---------- Ticker: JS drives it by scroll velocity ---------- */
.cine .ticker-track { animation: none; will-change: transform; }

/* ---------- About: drawn rules, lit row, chapter counter ---------- */
.about-item { position: relative; }

.cine .about-item { border-bottom-color: transparent; }
.cine .about-item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
  transform: scaleX(var(--draw, 1));
  transform-origin: 0 50%;
}

.about-item::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.9s var(--e-out);
}

.about-item.is-lit::before,
.about-item:hover::before { transform: scaleX(1); }
.about-item.is-lit .about-num { color: var(--accent); }

.about-item h3 { transition: transform 0.6s var(--e-out); }
.about-item.is-lit h3 { transform: translateX(8px); }

.about-progress { display: none; margin-top: 48px; }

.about-progress-label {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-family: var(--font-label);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.about-progress-label b {
  display: inline-block;
  color: var(--text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.about-progress-bar {
  display: grid;
  max-width: 260px;
  grid-template-columns: repeat(var(--n, 5), 1fr);
  gap: 6px;
  margin-top: 14px;
}

.about-progress-bar i {
  position: relative;
  height: 3px;
  overflow: hidden;
  background: var(--line);
}

.about-progress-bar i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.6s var(--e-out);
}

.about-progress-bar i.is-on::after { transform: scaleX(1); }

@media (min-width: 1101px) {
  .cine .about-progress { display: block; }
}

/* ---------- Links band: rule draws under the hovered link ---------- */
.cta-links a { position: relative; }
.cta-links a::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--on-accent);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.55s var(--e-out);
}

.cta-links a:hover::before { transform: scaleX(1); transform-origin: 0 50%; }

/* ---------- Chapter indicator in the header (desktop) ---------- */
.chapter-hud {
  display: none;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  color: var(--muted);
  font-family: var(--font-label);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.chapter-hud.is-on { opacity: 1; }
.chapter-hud-roll { display: inline-flex; gap: 10px; overflow: hidden; padding: 2px 0; }
.chapter-hud b { color: var(--accent); font-weight: 500; }

@media (min-width: 1101px) {
  .cine .chapter-hud { display: inline-flex; }
}

/* ---------- Links band edges: chunks load in, then crumble into the footer ---------- */
.cta-band { position: relative; }

.block-edge {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 36), 1fr);
  grid-template-rows: repeat(var(--rows, 3), var(--b, 40px));
  pointer-events: none;
}

.block-edge.is-top { top: 0; }
.block-edge.is-bottom { bottom: 0; }
.block-edge i { background: var(--bg); }

/* ---------- Footer: giant wordmark cropped by the bottom edge ---------- */
.site-footer.has-mark { padding-bottom: 0; }

.footer-mark {
  width: var(--wrap);
  height: 0.74em;
  margin: 56px auto 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 200px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.06em;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

.footer-mark-inner { display: inline-flex; }

.footer-mark-inner span {
  display: inline-block;
  padding-right: 0.06em;
  margin-right: -0.06em;
  background: linear-gradient(180deg, #2c2a26 0%, #1b1a18 52%, var(--bg) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 760px) {
  .hero-scroll { display: none; }
  .footer-mark { margin-top: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-lens::before,
  .film-grain,
  .hero-scroll i { animation: none; }
  .primary-button:hover::after,
  .login-button:hover::after { transition: none; }
}