/* ============================================================
   animations.css — scroll reveal, micro-interactions, 3D, hero
   All motion is GPU-friendly (transform/opacity) and disabled
   under prefers-reduced-motion.
   ============================================================ */

/* Scroll reveal (JS toggles .in) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }

/* Staggered children */
.stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1){ transition-delay:.05s } .stagger.in > *:nth-child(2){ transition-delay:.12s }
.stagger.in > *:nth-child(3){ transition-delay:.19s } .stagger.in > *:nth-child(4){ transition-delay:.26s }
.stagger.in > *:nth-child(5){ transition-delay:.33s } .stagger.in > *:nth-child(6){ transition-delay:.40s }

/* Floating (3D hero elements) */
@keyframes floaty { 0%,100%{ transform: translateY(0) rotate(0) } 50%{ transform: translateY(-16px) rotate(1.5deg) } }
@keyframes floaty-slow { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-24px) } }
@keyframes spin-coin { 0%{ transform: rotateY(0) } 100%{ transform: rotateY(360deg) } }
@keyframes ring-pulse { 0%,100%{ opacity:.5; transform: scale(1) } 50%{ opacity:.9; transform: scale(1.04) } }
@keyframes shimmer { 0%{ background-position: -200% 0 } 100%{ background-position: 200% 0 } }
@keyframes drift { 0%{ transform: translate(0,0) } 100%{ transform: translate(40px,-30px) } }

.float { animation: floaty 7s ease-in-out infinite; }
.float-slow { animation: floaty-slow 9s ease-in-out infinite; }
.float-delay { animation-delay: -3s; }

/* Hero backdrop */
.hero {
  position: relative; overflow: hidden;
  background: var(--grad-hero);
  padding-block: clamp(90px, 12vw, 150px) clamp(60px, 8vw, 100px);
}
.hero__glow {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; pointer-events: none;
}
.hero__glow--gold { width: 420px; height: 420px; background: radial-gradient(circle, rgba(227,196,119,.6), transparent 70%); top: -80px; right: -60px; animation: drift 14s ease-in-out infinite alternate; }
.hero__glow--blue { width: 500px; height: 500px; background: radial-gradient(circle, rgba(79,142,240,.4), transparent 70%); bottom: -160px; left: -120px; animation: drift 18s ease-in-out infinite alternate-reverse; }

/* Particle dots */
.particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.particles span { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: rgba(207,162,74,.6); box-shadow: 0 0 12px rgba(207,162,74,.5); animation: floaty 8s ease-in-out infinite; }

/* Glowing CTA pulse */
.pulse-cta { position: relative; }
.pulse-cta::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(207,162,74,.5); animation: cta-ring 2.6s infinite;
}
@keyframes cta-ring { 0%{ box-shadow: 0 0 0 0 rgba(207,162,74,.5) } 70%{ box-shadow: 0 0 0 18px rgba(207,162,74,0) } 100%{ box-shadow: 0 0 0 0 rgba(207,162,74,0) } }

/* Shimmer skeleton (loading) */
.skeleton {
  background: linear-gradient(90deg, rgba(200,214,238,.25) 25%, rgba(200,214,238,.5) 37%, rgba(200,214,238,.25) 63%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px;
}

/* Number counter baseline */
.count { font-variant-numeric: tabular-nums; }

/* Language fade (JS adds .lang-fade on switch) */
.lang-fade { animation: langFade .5s ease; }
@keyframes langFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Ken Burns for hero slides */
@keyframes kenburns { from { transform: scale(1) translate(0,0); } to { transform: scale(1.12) translate(-1.5%, -1.5%); } }

/* Page enter */
.page-enter { animation: pageEnter .6s ease both; }
@keyframes pageEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- Reduced motion: turn it all off ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
  .float, .float-slow, .hero__glow, .particles span { animation: none !important; }
}