/* ============================================================================
 * animations.css — Keyframes & scroll-reveal utilities
 * ==========================================================================*/

/* ---- Scroll reveal (toggled by animations.js via IntersectionObserver) --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="scale"] { transform: scale(0.92); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Staggered children delays */
[data-reveal][data-delay="1"] { transition-delay: 0.08s; }
[data-reveal][data-delay="2"] { transition-delay: 0.16s; }
[data-reveal][data-delay="3"] { transition-delay: 0.24s; }
[data-reveal][data-delay="4"] { transition-delay: 0.32s; }
[data-reveal][data-delay="5"] { transition-delay: 0.40s; }
[data-reveal][data-delay="6"] { transition-delay: 0.48s; }

/* ---- Named keyframes ---------------------------------------------------- */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(1.5deg); }
}
@keyframes spinRing {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 1; }
}
@keyframes scrollWheel {
  0%   { opacity: 0; transform: translate(-50%, 0); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 12px); }
}
@keyframes pulseWA {
  0%, 100% { box-shadow: 0 12px 34px rgba(37,211,102,0.42), 0 0 0 0 rgba(37,211,102,0.5); }
  50%      { box-shadow: 0 12px 34px rgba(37,211,102,0.42), 0 0 0 14px rgba(37,211,102,0); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
@keyframes shimmer {
  to { background-position: 200% center; }
}

/* ---- Applied animations ------------------------------------------------- */
.hero-portrait { animation: floatSlow 7s ease-in-out infinite; }
.portrait-ring { animation: spinRing 40s linear infinite; }
.cosmic-glow { animation: floatY 12s ease-in-out infinite; }

/* Hero entrance sequence */
.hero .anim-in { opacity: 0; animation: fadeInUp 0.9s var(--ease) forwards; }
.hero .anim-in.d1 { animation-delay: 0.1s; }
.hero .anim-in.d2 { animation-delay: 0.25s; }
.hero .anim-in.d3 { animation-delay: 0.4s; }
.hero .anim-in.d4 { animation-delay: 0.55s; }
.hero .anim-in.d5 { animation-delay: 0.7s; }

/* Shimmering gold headline accent */
.shimmer-text {
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400) 20%, var(--white) 50%, var(--gold-400) 80%, var(--gold-600));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 6s linear infinite;
}

/* Parallax layer helper */
.parallax { will-change: transform; }

/* ---- 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] { opacity: 1 !important; transform: none !important; }
  .hero .anim-in { opacity: 1 !important; }
}