/* ============================================================
   Visual effects — grain, parallax, spotlight, wipe, ticker,
   cascade, magnetic buttons
   ============================================================ */

/* ---------- 1. Film grain on dark sections ---------- */
.paneB, .paneC, .idstrip, .cta, .lead-hero, .roster-hero { position: relative; }
.paneB::after, .paneC::after, .idstrip::after, .cta::after,
.lead-hero::after, .roster-hero::after {
  content: ""; position: absolute; inset: -120% ; z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 190px 190px;
  opacity: .072;
  animation: grainShift 1.1s steps(4) infinite;
  will-change: transform;
}
@keyframes grainShift {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-2%,1.5%); }
  50%  { transform: translate(1.5%,-2%); }
  75%  { transform: translate(-1.5%,-1%); }
  100% { transform: translate(0,0); }
}
/* keep foreground above grain */
.marquee, .strip-slide, .paneB .inner, .cta .inner,
.idstrip-inner, .footer-grid, .footer-bottom { position: relative; z-index: 1; }
body[data-motifs="off"] .paneB::after,
body[data-motifs="off"] .paneC::after,
body[data-motifs="off"] .idstrip::after,
body[data-motifs="off"] .cta::after,
body[data-motifs="off"] .lead-hero::after,
body[data-motifs="off"] .roster-hero::after { opacity: 0; }

/* ---------- 2. Parallax letters ---------- */
.sec-motif b, .ghost-letters, .hero-logo { will-change: transform; }

/* ---------- 3. Cursor spotlight on CTA ---------- */
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 40%),
    rgba(255,255,255,.07), transparent 68%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.cta.spot-on::before { opacity: 1; }

/* ---------- 4. Hero headline wipe-up ---------- */
.hero-h1 .ln, .lead-hero h1 .ln, .roster-hero h1 .ln { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.hero-h1 .wd, .lead-hero h1 .wd, .roster-hero h1 .wd {
  display: inline-block; will-change: transform;
  transform: translateY(-118%);
  transition: transform 1.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-h1.wipe-in .wd, .lead-hero h1.wipe-in .wd, .roster-hero h1.wipe-in .wd { transform: translateY(0); }

/* ---------- 5. Identity strip ticker ---------- */
.idstrip { overflow: hidden; }
.idstrip.is-ticker .idstrip-inner {
  display: flex; flex-wrap: nowrap; justify-content: flex-start;
  gap: 0; max-width: none; padding: 0;
  width: max-content;
  animation: tickerRun 34s linear infinite;
}
.idstrip.is-ticker .idstrip-item { padding: 0 30px; white-space: nowrap; }
.idstrip.is-ticker:hover .idstrip-inner { animation-play-state: paused; }
@keyframes tickerRun { to { transform: translateX(-50%); } }

/* ---------- 6. Roster name cascade ---------- */
.roster-names li {
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.roster-names li.name-in { opacity: 1; transform: none; }


/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .paneB::after, .paneC::after, .idstrip::after, .cta::after,
  .lead-hero::after, .roster-hero::after { animation: none; }
  .idstrip.is-ticker .idstrip-inner { animation: none; width: auto; justify-content: center; flex-wrap: wrap; }
  .hero-h1 .wd, .lead-hero h1 .wd, .roster-hero h1 .wd { transform: none !important; transition: none; }
  .roster-names li { opacity: 1; transform: none; transition: none; }
  .cta::before { display: none; }
}

/* ---------- hero sequence: badge / lead / buttons land after the headline ---------- */
.hero .pane .badge,
.hero .pane .lead,
.hero .pane .heroA-cta,
.lead-hero .badge, .lead-hero p,
.roster-hero .badge, .roster-hero p {
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.hero-seq .badge,
.hero-seq .lead,
.hero-seq .heroA-cta,
.hero-seq p.seq-item {
  opacity: 0; transform: translateY(16px);
}
.hero-seq.seq-in .badge,
.hero-seq.seq-in .lead,
.hero-seq.seq-in .heroA-cta,
.hero-seq.seq-in p.seq-item {
  opacity: 1; transform: none;
}
.hero-seq.seq-in .badge { transition-delay: .12s; }
.hero-seq.seq-in .lead, .hero-seq.seq-in p.seq-item { transition-delay: var(--seq-lead, .62s); }
.hero-seq.seq-in .heroA-cta { transition-delay: var(--seq-cta, .78s); }
.hero-seq .marquee, .hero-seq .strip-slide {
  opacity: 0; transform: translateY(18px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.hero-seq.seq-in .marquee { opacity: 1; transform: none; transition-delay: var(--seq-strip, 1.5s); }
.hero-seq.seq-in .strip-slide { opacity: 1; transform: none; transition-delay: calc(var(--seq-strip, 1.5s) + .16s); }
@media (prefers-reduced-motion: reduce) {
  .hero-seq .badge, .hero-seq .lead, .hero-seq .heroA-cta,
  .hero-seq p.seq-item, .hero-seq .marquee, .hero-seq .strip-slide {
    opacity: 1 !important; transform: none !important; transition: none;
  }
}