/* =============================================================================
   THE VAULT — animations.css
   Scroll reveals, ambient motion, keyframes. All wrapped so that
   prefers-reduced-motion users get a calm, fully-usable site.
============================================================================= */

/* Base reveal state — JS adds .in when the element enters the viewport. */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="mask"]  { clip-path: inset(0 100% 0 0); opacity: 1; transform: none; transition: clip-path 1s var(--ease); }
[data-reveal="mask"].in { clip-path: inset(0 0 0 0); }

/* Stagger children */
[data-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
[data-stagger].in > * { opacity: 1; transform: none; }
[data-stagger].in > *:nth-child(1) { transition-delay: 0.05s; }
[data-stagger].in > *:nth-child(2) { transition-delay: 0.14s; }
[data-stagger].in > *:nth-child(3) { transition-delay: 0.23s; }
[data-stagger].in > *:nth-child(4) { transition-delay: 0.32s; }
[data-stagger].in > *:nth-child(5) { transition-delay: 0.41s; }
[data-stagger].in > *:nth-child(6) { transition-delay: 0.50s; }
[data-stagger].in > *:nth-child(7) { transition-delay: 0.59s; }
[data-stagger].in > *:nth-child(8) { transition-delay: 0.68s; }

/* Hero entrance */
.hero__logo, .hero h1, .hero__sub, .hero__cta, .hero__scroll { opacity: 0; }
.hero.ready .hero__logo { animation: hero-logo 1.2s var(--ease) 0.1s forwards; }
.hero.ready h1 { animation: fade-up 1s var(--ease) 0.4s forwards; }
.hero.ready .hero__sub { animation: fade-up 1s var(--ease) 0.7s forwards; }
.hero.ready .hero__cta { animation: fade-up 1s var(--ease) 0.9s forwards; }
.hero.ready .hero__scroll { animation: fade 1.2s ease 1.4s forwards; }

@keyframes hero-logo { from { opacity: 0; transform: translateY(20px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Loader dial spin + logo + word + bar */
.loader__dial .dial__ring--ticks { animation: spin 6s linear infinite; }
.loader__dial .dial__hub { animation: spin-rev 9s linear infinite; }
#loader .loader__logo { animation: fade 0.9s ease 0.3s forwards; }
#loader .loader__bar span { animation: load-bar 1.6s var(--ease) 0.2s forwards; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-rev { to { transform: rotate(-360deg); } }
@keyframes load-bar { to { transform: scaleX(1); } }

/* Section dial flourish slow rotation */
.dial--ambient .dial__ring--ticks { animation: spin 40s linear infinite; }

/* Scroll prompt bob */
.hero__scroll .line { animation: bob 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes bob { 0%,100% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(0.5); opacity: 0.4; } }

/* Ticker marquee */
.ticker__track { animation: marquee 32s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Soft spotlight drift on dark heroes */
.spotlight { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(40% 50% at 30% 20%, rgba(201,169,106,0.10), transparent 60%);
  animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate(-4%, -2%); } to { transform: translate(6%, 4%); } }

/* Parallax layers (JS sets --py) */
[data-parallax] { will-change: transform; transform: translate3d(0, var(--py, 0), 0); }

/* Button/card micro already in styles.css. Confirmation seal draw. */
.confirm__seal .dial__ring--ticks { animation: spin 20s linear infinite; }
.confirm.pop { animation: pop 0.6s var(--ease); }
@keyframes pop { 0% { transform: scale(0.8); opacity: 0; } 60% { transform: scale(1.03); } 100% { transform: scale(1); opacity: 1; } }

.ticket.reveal-in { animation: ticket-in 0.7s var(--ease); }
@keyframes ticket-in { from { opacity: 0; transform: translateY(30px) rotateX(8deg); } to { opacity: 1; transform: none; } }

/* Count-up handled in JS; nothing needed here. */

/* =========================== REDUCED MOTION ============================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero__logo, .hero h1, .hero__sub, .hero__cta, .hero__scroll { opacity: 1 !important; animation: none !important; }
  .ticker__track { animation: none !important; }
  .spotlight, .loader__dial .dial__ring--ticks, .dial--ambient .dial__ring--ticks { animation: none !important; }
  [data-parallax] { transform: none !important; }
}