/* ============================================================
   ANIMATIONS.CSS — All keyframe animations for Wildfoxs Club site
   ============================================================ */

/* Float — for dashboard card & phone mockup */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-18px);
  }
}

/* Pulsing live dot */
@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(0.6);
  }
}

/* Outer ring pulse glow */
@keyframes ring-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 229, 195, 0.4);
  }
  50% {
    box-shadow: 0 0 0 16px rgba(0, 229, 195, 0);
  }
}

/* Infinite horizontal ticker scroll */
@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Scroll-down bounce indicator */
@keyframes bounce-down {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(12px);
  }
}

/* Chevron arrow pulse */
@keyframes arrow-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

/* Glow pulse on cards/icons */
@keyframes glow-pulse {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(0, 229, 195, 0.1);
  }
  50% {
    box-shadow: 0 0 50px rgba(0, 229, 195, 0.45);
  }
}

/* Rotating orbit ring */
@keyframes rotate-ring {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes rotate-ring-reverse {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

/* Traveling dot along step connector */
@keyframes dot-travel {
  0% {
    left: 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

/* Button shine sweep */
@keyframes shine-sweep {
  from {
    left: -120%;
  }
  to {
    left: 150%;
  }
}

/* Slow spin for decorative elements */
@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Coin float variations */
@keyframes coin-float-1 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-14px) rotate(6deg);
  }
  66% {
    transform: translateY(7px) rotate(-4deg);
  }
}
@keyframes coin-float-2 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(12px) rotate(-5deg);
  }
  66% {
    transform: translateY(-9px) rotate(7deg);
  }
}
@keyframes coin-float-3 {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-16px) rotate(-7deg);
  }
}

/* Fade-in-up (manual — hero loads before AOS) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale in */
@keyframes scaleIn {
  from {
    transform: scale(0.85);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Gradient animate — hero bg shift */
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Underline draw */
@keyframes underline-draw {
  from {
    width: 60px;
  }
  to {
    width: 130px;
  }
}

/* Typewriter cursor blink */
@keyframes blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

/* Section label flicker-in */
@keyframes flicker-in {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

/* Hexagon spin (decorative hero bg shapes) */
@keyframes hex-spin {
  from {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.05);
  }
  to {
    transform: rotate(360deg) scale(1);
  }
}

/* Grid scan line */
@keyframes scan-line {
  0% {
    top: -10%;
  }
  100% {
    top: 110%;
  }
}

/* Bar chart grow from bottom */
@keyframes bar-grow {
  from {
    transform: scaleY(0);
    transform-origin: bottom;
  }
  to {
    transform: scaleY(1);
    transform-origin: bottom;
  }
}

/* ── Hero word-by-word entrance ── */
@keyframes hw-enter {
  0% {
    opacity: 0;
    transform: translate(var(--hw-x, 0px), var(--hw-y, 0px)) scale(0.85);
    filter: blur(6px);
  }
  60% {
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: translate(0px, 0px) scale(1);
    filter: blur(0px);
  }
}

/* ── Business Plan image animations ── */
@keyframes bp-float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  30% {
    transform: translateY(-12px) rotate(0.6deg) scale(1.01);
  }
  60% {
    transform: translateY(-6px) rotate(-0.4deg) scale(1.005);
  }
}
@keyframes bp-float-alt {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  40% {
    transform: translateY(10px) rotate(-0.5deg) scale(1.01);
  }
  70% {
    transform: translateY(-8px) rotate(0.3deg) scale(1.005);
  }
}
@keyframes bp-sweep {
  0%,
  100% {
    transform: scale(1) translateX(0);
  }
  50% {
    transform: scale(1.04) translateX(-10px);
  }
}
@keyframes bp-sweep-alt {
  0%,
  100% {
    transform: scale(1) translateX(0);
  }
  50% {
    transform: scale(1.04) translateX(10px);
  }
}
@keyframes bp-frame-glow {
  0%,
  100% {
    box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.35),
      0 0 0 1px rgba(0, 229, 195, 0.08);
  }
  50% {
    box-shadow:
      0 30px 80px rgba(0, 0, 0, 0.5),
      0 0 30px rgba(0, 229, 195, 0.18);
  }
}
@keyframes bp-content-drift {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}
@keyframes bp-border-trace {
  0% {
    border-color: rgba(0, 229, 195, 0.12);
  }
  50% {
    border-color: rgba(0, 229, 195, 0.4);
  }
  100% {
    border-color: rgba(0, 229, 195, 0.12);
  }
}
@keyframes bp-shimmer-slide {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}
@keyframes bp-pool-ken-burns {
  0% {
    transform: scale(1) translateX(0) translateY(0);
  }
  50% {
    transform: scale(1.08) translateX(-20px) translateY(-10px);
  }
  100% {
    transform: scale(1) translateX(0) translateY(0);
  }
}