/* ========================================
   ANIMATIONS
   Keyframes, scroll-reveal, glow effects
   ======================================== */

/* === SCROLL REVEAL BASE === */
[data-reveal] {
  opacity: 0;
  transition: opacity 1.2s var(--ease-out),
              transform 1.2s var(--ease-out);
}

[data-reveal="up"] {
  transform: translateY(80px);
}

[data-reveal="down"] {
  transform: translateY(-80px);
}

[data-reveal="left"] {
  transform: translateX(-80px);
}

[data-reveal="right"] {
  transform: translateX(80px);
}

[data-reveal="scale"] {
  transform: scale(0.85);
}

[data-reveal="fade"] {
  transform: none;
}

/* Active state (added by JS) */
[data-reveal].revealed {
  opacity: 1;
  transform: none;
}

/* Stagger delays — slower gaps */
[data-reveal-delay="1"] { transition-delay: 0.15s; }
[data-reveal-delay="2"] { transition-delay: 0.3s; }
[data-reveal-delay="3"] { transition-delay: 0.45s; }
[data-reveal-delay="4"] { transition-delay: 0.6s; }
[data-reveal-delay="5"] { transition-delay: 0.75s; }
[data-reveal-delay="6"] { transition-delay: 0.9s; }
[data-reveal-delay="7"] { transition-delay: 1.05s; }
[data-reveal-delay="8"] { transition-delay: 1.2s; }

/* === HERO ANIMATIONS === */
@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-animate-1 { animation: heroFadeIn 1.2s var(--ease-out) 0.3s both; }
.hero-animate-2 { animation: heroFadeIn 1.2s var(--ease-out) 0.6s both; }
.hero-animate-3 { animation: heroFadeIn 1.2s var(--ease-out) 0.9s both; }
.hero-animate-4 { animation: heroFadeIn 1.2s var(--ease-out) 1.2s both; }

/* === FLOATING ELEMENTS === */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(3deg); }
}

.float { animation: float 5s ease-in-out infinite; }
.float-slow { animation: floatSlow 7s ease-in-out infinite; }
.float-delay-1 { animation-delay: 1s; }
.float-delay-2 { animation-delay: 2s; }
.float-delay-3 { animation-delay: 3s; }

/* === GLOW PULSE === */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: var(--glow-gold-sm);
  }
  50% {
    box-shadow: var(--glow-gold-strong);
  }
}

.glow-pulse {
  animation: glowPulse 4s ease-in-out infinite;
}

/* === MARQUEE (Trust Badges) === */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-track {
  display: flex;
  gap: var(--gap-lg);
  animation: marquee 40s linear infinite;
  width: max-content;
}

.marquee-track:hover {
  animation-play-state: paused;
}

.marquee-container {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

/* === COUNTER ANIMATION === */
@keyframes countPop {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

.stat-number.animate {
  animation: countPop 0.8s var(--ease-spring) both;
}

/* === HERO DECORATIVE ORB === */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.12) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(40px);
}

.hero-orb-1 {
  width: 500px;
  height: 500px;
  top: -10%;
  right: -10%;
  animation: float 10s ease-in-out infinite;
}

.hero-orb-2 {
  width: 300px;
  height: 300px;
  bottom: -5%;
  left: -5%;
  animation: floatSlow 12s ease-in-out infinite;
}

/* === PLAY BUTTON PULSE === */
@keyframes playPulse {
  0% { box-shadow: var(--glow-gold-strong), 0 0 0 0 rgba(var(--color-accent-rgb), 0.4); }
  70% { box-shadow: var(--glow-gold-strong), 0 0 0 25px rgba(var(--color-accent-rgb), 0); }
  100% { box-shadow: var(--glow-gold-strong), 0 0 0 0 rgba(var(--color-accent-rgb), 0); }
}

.video-poster .video-play-btn {
  animation: playPulse 3s ease-out infinite;
}