/* ================================
   ANIMATIONS.CSS
   All keyframe animations for BingoXRPL
   ================================ */

/* Mascot Float Animation */
@keyframes mascot-float {
  0%, 100% { 
    transform: translateY(0px); 
  }
  50% { 
    transform: translateY(-20px); 
  }
}

/* Letter Reveal Animation (Hero Title) */
@keyframes letter-reveal {
  from {
    opacity: 0;
    transform: translateY(30px) rotate(-10deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}

/* Glow Pulse (Hero Eyebrow, Feature Pills) */
@keyframes glow-pulse {
  0%, 100% { 
    text-shadow: 0 0 10px rgba(0, 184, 217, 0.5);
    box-shadow: 0 0 10px rgba(0, 184, 217, 0.3);
  }
  50% { 
    text-shadow: 0 0 20px rgba(0, 184, 217, 0.8);
    box-shadow: 0 0 20px rgba(0, 184, 217, 0.5);
  }
}

/* Particle Float (Background Particles) */
@keyframes particle-float {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translate(var(--tx), var(--ty)) scale(1.2);
    opacity: 0;
  }
}

/* Fade In Up (Scroll Animations) */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide Down (Dropdown Menus) */
@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Accordion Expand */
@keyframes accordion-expand {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 500px;
    opacity: 1;
  }
}

/* Spin (Loading States) */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Progress Fill (Timeline Line) */
@keyframes progress-fill {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

/* Chart Segment Draw */
@keyframes chart-draw {
  from {
    stroke-dasharray: 0 503;
  }
  to {
    stroke-dasharray: var(--dash-length) 503;
  }
}

/* Button Press */
@keyframes button-press {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/* Bounce (CTA Buttons) */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* Shimmer (Loading Skeleton) */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Scale In (Cards on Hover) */
@keyframes scale-in {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Confetti Fall (Win Animation - if needed later) */
@keyframes confetti-fall {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* Arrow Slide (Navigation Arrow) */
@keyframes arrow-slide {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
}

/* Gradient Shift (Backgrounds) */
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Utilities */
.animate-float {
  animation: mascot-float 3s ease-in-out infinite;
}

.animate-glow {
  animation: glow-pulse 2s ease-in-out infinite;
}

.animate-bounce {
  animation: bounce 2s ease-in-out infinite;
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards;
}

/* Stagger Delays for Lists */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }