/* ============================================================
   VAVADA KASYNO — Animations Stylesheet
   Keyframes, transitions, will-change, reduced motion
   ============================================================ */

/* ============================================================
   Keyframes
   ============================================================ */

/* CTA button gradient sweep */
@keyframes shimmerGold {
  0% { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}

/* Hero image gentle levitation */
@keyframes floatUpDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Logo drop-shadow breathing */
@keyframes pulseGlow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(217, 119, 6, 0)); }
  50% { filter: drop-shadow(0 0 12px rgba(217, 119, 6, 0.4)); }
}

/* Hero floating particles upward drift */
@keyframes particleDrift {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(-100vh) translateX(30px);
    opacity: 0;
  }
}

/* Section heading underline draw-in */
@keyframes drawUnderline {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Rubber-band scale for badges */
@keyframes countBadgePop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.15); }
  80% { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}

/* General scroll-reveal entrance */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Decorative background element slow spin */
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Footer top border gold sweep */
@keyframes borderShimmer {
  0% { background-position: -200% 50%; }
  100% { background-position: 200% 50%; }
}

/* Payment logos infinite horizontal scroll */
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Image wipe reveal */
@keyframes clipReveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0% 0 0); }
}

/* Badge pulse */
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.3); }
  50% { box-shadow: 0 0 0 8px rgba(217, 119, 6, 0); }
}

/* Pulse ring for CTA */
@keyframes pulseRing {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* ============================================================
   Animation Classes
   ============================================================ */

/* Scroll-reveal base state */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Shimmer buttons */
.btn-primary,
.btn-card {
  animation: shimmerGold 3s ease-in-out infinite;
}

/* Hero image float */
.hero__image-wrapper {
  animation: floatUpDown 4s ease-in-out infinite;
}

/* Logo pulse */
.header__logo {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* Hero badge pulse */
.hero__badge {
  animation: badgePulse 2.5s ease-in-out infinite;
}

/* Footer border shimmer */
.footer::before {
  animation: borderShimmer 4s linear infinite;
}

/* Image reveal */
.image-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s var(--ease-out);
}
.image-reveal.revealed {
  clip-path: inset(0 0% 0 0);
}

/* Stat number pop */
.stat__number {
  transition: transform 0.4s var(--ease-bounce);
}

/* Particle styles */
.particle:nth-child(1)  { left: 5%;  bottom: 0; animation: particleDrift 8s linear infinite; animation-delay: 0s; }
.particle:nth-child(2)  { left: 15%; bottom: 0; animation: particleDrift 10s linear infinite; animation-delay: 1s; }
.particle:nth-child(3)  { left: 25%; bottom: 0; animation: particleDrift 7s linear infinite; animation-delay: 0.5s; }
.particle:nth-child(4)  { left: 35%; bottom: 0; animation: particleDrift 9s linear infinite; animation-delay: 2s; }
.particle:nth-child(5)  { left: 45%; bottom: 0; animation: particleDrift 11s linear infinite; animation-delay: 0.3s; }
.particle:nth-child(6)  { left: 55%; bottom: 0; animation: particleDrift 8.5s linear infinite; animation-delay: 1.5s; }
.particle:nth-child(7)  { left: 65%; bottom: 0; animation: particleDrift 9.5s linear infinite; animation-delay: 0.7s; }
.particle:nth-child(8)  { left: 75%; bottom: 0; animation: particleDrift 7.5s linear infinite; animation-delay: 2.5s; }
.particle:nth-child(9)  { left: 85%; bottom: 0; animation: particleDrift 10.5s linear infinite; animation-delay: 1.2s; }
.particle:nth-child(10) { left: 92%; bottom: 0; animation: particleDrift 8s linear infinite; animation-delay: 3s; }
.particle:nth-child(11) { left: 10%; bottom: 0; animation: particleDrift 9s linear infinite; animation-delay: 3.5s; }
.particle:nth-child(12) { left: 50%; bottom: 0; animation: particleDrift 12s linear infinite; animation-delay: 4s; }

/* Card 3D tilt  */
.feature-card {
  transition: all var(--transition-base), transform 0.15s ease-out;
  transform-style: preserve-3d;
}

/* Game card image zoom */
.game-card__image {
  will-change: transform;
}

/* ============================================================
   will-change declarations (selective)
   ============================================================ */
.hero__image-wrapper {
  will-change: transform;
}

.animate-on-scroll {
  will-change: opacity, transform;
}

.btn-primary,
.btn-card {
  will-change: background-position;
}

.cursor-dot {
  will-change: transform;
}

/* ============================================================
   Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .animate-on-scroll {
    opacity: 1;
    transform: none;
  }

  .hero__image-wrapper {
    animation: none;
  }

  .header__logo {
    animation: none;
  }

  .hero__badge {
    animation: none;
  }

  .btn-primary,
  .btn-card {
    animation: none;
    background-position: 0 50%;
  }

  .footer::before {
    animation: none;
  }

  .particle {
    display: none;
  }

  .cursor-dot {
    display: none;
  }

  .image-reveal {
    clip-path: none;
  }

  html {
    scroll-behavior: auto;
  }
}