@keyframes mistDrift { from { transform: translate3d(-3%, 0, 0) scale(.96); } to { transform: translate3d(5%, -3%, 0) scale(1.05); } }
@keyframes patternDrift { from { background-position: 0 0; } to { background-position: 90px -45px; } }
@keyframes beamSweep { from { transform: translateX(-4%) rotate(-11deg); opacity: .1; } to { transform: translateX(7%) rotate(-8deg); opacity: .24; } }
@keyframes haloPulse { from { transform: scale(.94); opacity: .58; } to { transform: scale(1.04); opacity: .9; } }
@keyframes scrollDot { 0% { opacity: 0; transform: translate(-50%, 0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 13px); } }
@keyframes vinylSpin { to { transform: rotate(360deg); } }
@keyframes lightboxIn { from { opacity: 0; transform: scale(.975); } to { opacity: 1; transform: scale(1); } }

.hero.is-in-view .pattern-a { animation: patternDrift 26s linear infinite alternate; }
.hero.is-in-view .hero-beam { animation: beamSweep 13s var(--ease-in-out) infinite alternate; }
.hero.is-in-view .hero-mist { animation: mistDrift 16s var(--ease-in-out) infinite alternate; }
.hero.is-in-view .mist-two { animation-delay: -8s; }
.hero.is-in-view .mascot-halo { animation: haloPulse 5.5s var(--ease-in-out) infinite alternate; }
.hero.is-in-view .scroll-cue i::after { animation: scrollDot 1.7s ease-in-out infinite; }
.album-visual.is-playing .vinyl { animation: vinylSpin 9s linear infinite; }

/* Content is visible by default; JS only enhances it. */
.js.motion-ready .reveal { opacity: 0; transform: translateY(var(--reveal-distance)); clip-path: inset(0 0 10% 0); transition: opacity var(--duration-slow) var(--ease-smooth), transform var(--duration-slow) var(--ease-smooth), clip-path var(--duration-slow) var(--ease-smooth); }
.js.motion-ready .reveal.is-visible { opacity: 1; transform: translateY(0); clip-path: inset(0); }
.js.motion-ready .reveal[data-reveal="left"] { transform: translateX(calc(var(--reveal-distance) * -1)); }
.js.motion-ready .reveal[data-reveal="right"] { transform: translateX(var(--reveal-distance)); }
.js.motion-ready .reveal[data-reveal="left"].is-visible, .js.motion-ready .reveal[data-reveal="right"].is-visible { transform: translateX(0); }

/* Lightweight opening sequence. */
.js [data-hero-sequence] { opacity: 0; }
.js .hero-scene { opacity: 0; }
.js .hero-sun, .js .hero-mist, .js .hero-pattern { opacity: 0; }
.js.page-ready .hero-scene { opacity: 1; transition: opacity var(--duration-cinematic) var(--ease-soft); }
.js.page-ready .hero-sun, .js.page-ready .hero-mist, .js.page-ready .hero-pattern { opacity: inherit; transition: opacity var(--duration-cinematic) var(--ease-soft) 180ms; }
.js.page-ready [data-hero-sequence="mascot"] { opacity: 1; animation: heroMascotIn var(--duration-cinematic) var(--ease-smooth) 180ms both; }
.js.page-ready [data-hero-sequence="copy"] { opacity: 1; animation: heroCopyIn var(--duration-cinematic) var(--ease-smooth) 360ms both; }
@keyframes heroMascotIn { from { opacity: 0; transform: translate3d(28px, 30px, 0) scale(.97); clip-path: inset(0 0 12% 0); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); clip-path: inset(0); } }
@keyframes heroCopyIn { from { opacity: 0; transform: translate3d(-22px, 18px, 0); } to { opacity: 1; transform: translate3d(0,0,0); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js.motion-ready .reveal, .js [data-hero-sequence], .js .hero-scene, .js .hero-sun, .js .hero-mist, .js .hero-pattern { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-parallax-layer] { transform: none !important; }
}