/* ──────────────────────────────────────────────────────────────
   v3-motion — animation layer for the v3 site
   imported by every page that wants the cinematic treatment
   ────────────────────────────────────────────────────────── */

/* ─── reveal on scroll ─── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal[data-d="1"] { transition-delay: 80ms; }
.reveal[data-d="2"] { transition-delay: 160ms; }
.reveal[data-d="3"] { transition-delay: 240ms; }
.reveal[data-d="4"] { transition-delay: 320ms; }
.reveal[data-d="5"] { transition-delay: 400ms; }
.reveal[data-d="6"] { transition-delay: 480ms; }
.reveal[data-d="7"] { transition-delay: 560ms; }

.reveal.from-left { transform: translateX(-32px); }
.reveal.from-left.in { transform: translateX(0); }
.reveal.from-right { transform: translateX(32px); }
.reveal.from-right.in { transform: translateX(0); }
.reveal.scale { transform: scale(0.96); }
.reveal.scale.in { transform: scale(1); }
.reveal.blur { filter: blur(12px); }
.reveal.blur.in { filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none !important; filter: none !important; transition: none; }
}

/* ─── brand splash on first load ─── */
.splash {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--ink);
  display: grid; place-items: center;
  pointer-events: all;
  transition: opacity 700ms cubic-bezier(0.65, 0, 0.35, 1), visibility 700ms;
  overflow: hidden;
}
.splash.done { opacity: 0; visibility: hidden; pointer-events: none; }
.splash::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 30% at 50% 100%, rgba(255,122,26,0.4), transparent 65%),
    radial-gradient(ellipse 60% 30% at 50% 0%, rgba(94,174,255,0.06), transparent 65%);
  animation: splash-bg 2200ms ease-in-out infinite;
}
@keyframes splash-bg {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
.splash-mark {
  position: relative; z-index: 2;
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(72px, 14vw, 200px);
  letter-spacing: -0.045em;
  color: var(--paper);
  display: flex;
  animation: splash-rise 1100ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.splash-mark .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  animation: splash-ch 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.splash-mark .ch:nth-child(1) { animation-delay: 100ms; }
.splash-mark .ch:nth-child(2) { animation-delay: 160ms; }
.splash-mark .ch:nth-child(3) { animation-delay: 220ms; }
.splash-mark .ch:nth-child(4) { animation-delay: 280ms; }
.splash-mark .ch:nth-child(5) { animation-delay: 340ms; }
.splash-mark .ch:nth-child(6) { animation-delay: 400ms; }
.splash-mark .ch:nth-child(7) { animation-delay: 460ms; }
.splash-mark .ch:nth-child(8) { animation-delay: 520ms; }
.splash-mark .ch:nth-child(9) { animation-delay: 580ms; }
.splash-mark .ch.dot { color: var(--amber-hot); }
@keyframes splash-ch { to { opacity: 1; transform: translateY(0); } }
@keyframes splash-rise { from { transform: translateY(20px); } to { transform: translateY(0); } }

.splash-tag {
  position: absolute; left: 0; right: 0; bottom: 60px;
  text-align: center;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--mute);
  opacity: 0; animation: splash-tag 800ms ease-out 700ms forwards;
}
@keyframes splash-tag { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .splash, .splash-mark, .splash-mark .ch, .splash-tag { animation: none; opacity: 1; transform: none; }
  .splash { display: none; }
}

/* ─── cursor spotlight (hero only) ─── */
.spotlight {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(circle 480px at var(--mx, 50%) var(--my, 50%), rgba(255,169,77,0.10), transparent 60%);
  transition: opacity 400ms ease;
  mix-blend-mode: screen;
}
@media (max-width: 880px), (prefers-reduced-motion: reduce) { .spotlight { display: none; } }

/* ─── animated stats counter ─── */
.tabular { font-variant-numeric: tabular-nums; }
.count-up { display: inline-block; }

/* ─── marquee venue ticker ─── */
.marquee {
  position: relative; overflow: hidden;
  padding: 28px 0;
  background: var(--ink-2);
  border-top: 1px solid rgba(244,239,230,0.06);
  border-bottom: 1px solid rgba(244,239,230,0.06);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: marquee 60s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--serif); font-weight: 700;
  font-size: 24px; letter-spacing: -0.02em;
  color: var(--paper);
  flex-shrink: 0;
}
.marquee-item .cat {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--amber); padding: 4px 10px;
  border: 1px solid var(--amber-line);
  border-radius: 100px;
}
.marquee-item .sep {
  font-family: var(--serif); color: var(--amber-hot);
  font-size: 32px; line-height: 0.4;
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ─── magnetic / tilt cards ─── */
.tilt {
  transform-style: preserve-3d;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.tilt-inner { transform-style: preserve-3d; }
.tilt-pop { transform: translateZ(40px); }

/* ─── article scroll progress bar ─── */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 200;
  background: transparent;
  pointer-events: none;
}
.scroll-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--amber), var(--amber-hot));
  box-shadow: 0 0 16px rgba(255,122,26,0.6);
  transition: width 60ms linear;
}

/* ─── floating particles in hero ─── */
.particles {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1;
}
.particle {
  position: absolute;
  width: 3px; height: 3px;
  background: var(--amber-glow);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 8px var(--amber-glow);
  animation: float-up var(--dur, 18s) linear var(--delay, 0s) infinite;
}
@keyframes float-up {
  0%   { opacity: 0; transform: translate(0, 100vh) scale(0.4); }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.7; }
  100% { opacity: 0; transform: translate(var(--drift, 60px), -10vh) scale(1.2); }
}
@media (prefers-reduced-motion: reduce) { .particles { display: none; } }

/* ─── pulse glow on key CTAs ─── */
.pulse-glow {
  position: relative;
}
.pulse-glow::before {
  content: ""; position: absolute; inset: -6px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--amber), var(--amber-hot));
  opacity: 0.5; filter: blur(18px); z-index: -1;
  animation: pulse 2400ms ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .pulse-glow::before { animation: none; } }

/* ─── headline char split (for hero typography) ─── */
.split-line {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.split-word {
  display: inline-block;
  transform: translateY(110%);
  animation: split-rise 1100ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.split-line:nth-child(1) .split-word { animation-delay: 600ms; }
.split-line:nth-child(2) .split-word { animation-delay: 720ms; }
.split-line:nth-child(3) .split-word { animation-delay: 840ms; }
@keyframes split-rise { to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .split-word { transform: none; animation: none; } }

/* ─── animated SVG route line (for inglewood walk) ─── */
.route-svg path {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  transition: stroke-dashoffset 2400ms cubic-bezier(0.65, 0, 0.35, 1);
}
.route-svg.in path { stroke-dashoffset: 0; }

/* ─── nav scroll-shrink ─── */
.v3-nav.scrolled .v3-nav-cta {
  transform: scale(0.94);
}

/* ─── card hover lift (more pronounced) ─── */
.lift {
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,169,77,0.2);
}

/* ─── grain overlay (cinematic film texture) ─── */
.grain::after {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  z-index: 9000;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: reduce) { .grain::after { display: none; } }