/* ==========================================================================
   CARRIBBEAN SLOT — ANIMATIONS.CSS
   All keyframes and animation utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   KEYFRAMES
   -------------------------------------------------------------------------- */

/* Wave Float */
@keyframes waveFloat {
  0%, 100% { transform: translateY(0) scaleX(1); }
  33% { transform: translateY(-12px) scaleX(1.02); }
  66% { transform: translateY(6px) scaleX(0.99); }
}

/* Ambient Pulse (slow ocean breathing) */
@keyframes ambientPulse {
  0%, 100% { opacity: 0.6; transform: scale(1) translate(-50%, -50%); }
  50% { opacity: 1; transform: scale(1.08) translate(-46%, -46%); }
}

/* Border Glow */
@keyframes borderGlow {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Reel Spin */
@keyframes reelSpin {
  0% { transform: translateY(0); }
  15% { transform: translateY(-33%); }
  30% { transform: translateY(-66%); }
  45% { transform: translateY(-33%); }
  60% { transform: translateY(0); }
  100% { transform: translateY(0); }
}

/* Water Shimmer */
@keyframes waterShimmer {
  0%, 100% { opacity: 0.6; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.05); }
}

/* Particle Float */
@keyframes particleFloat {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0);
  }
  15% { opacity: 0.6; }
  85% { opacity: 0.4; }
  100% {
    opacity: 0;
    transform: translateY(calc(-1 * var(--travel, 200px))) translateX(var(--drift, 30px));
  }
}

/* Fade In Up */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(32px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In Right */
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade In (generic) */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Header Shimmer */
@keyframes headerShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Connector Wave Drift */
@keyframes connectorDrift {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

/* Scale In */
@keyframes scaleIn {
  0% { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}

/* Ocean Drift (for background layers) */
@keyframes oceanDrift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(20px); }
}

/* --------------------------------------------------------------------------
   SCROLL-TRIGGERED ANIMATION CLASSES
   -------------------------------------------------------------------------- */

/* Initial state (before visible) */
.fade-in-up {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: var(--delay, 0s);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: var(--delay, 0s);
}

/* Visible state (added by JS) */
.fade-in-up.visible,
.fade-in-right.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* --------------------------------------------------------------------------
   STEP CONNECTOR ANIMATION
   -------------------------------------------------------------------------- */
.connector-wave {
  animation: connectorDrift 3s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   HEADER GLOW SHIMMER
   -------------------------------------------------------------------------- */
.header-glow {
  background-size: 200% auto;
  animation: headerShimmer 4s linear infinite;
}

/* --------------------------------------------------------------------------
   PERFORMANCE OPTIMIZATION
   -------------------------------------------------------------------------- */
.ambient-ocean,
.game-world__aura,
.island-scene__glow,
.hero__wave,
.water-shimmer {
  will-change: transform, opacity;
}

.game-frame {
  will-change: transform;
}

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

  .fade-in-up,
  .fade-in-right {
    opacity: 1;
    transform: none;
    transition: none;
  }
}