/* =====================================================
   DETECTIVE SLOT — ANIMATIONS.CSS
   moonaclicksprnt.com
   ===================================================== */

/* ─────────────────────────────────────────────────────
   KEYFRAMES
   ───────────────────────────────────────────────────── */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes badgePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0) rotate(45deg); }
  50% { transform: translateY(6px) rotate(45deg); }
}

@keyframes ambientSweep {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

@keyframes reelSpin {
  0% { transform: translateY(0); }
  25% { transform: translateY(-8px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(4px); }
  100% { transform: translateY(0); }
}

@keyframes goldGlowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(201, 162, 74, 0.2); }
  50% { box-shadow: 0 0 40px rgba(201, 162, 74, 0.35); }
}

@keyframes dustFloat {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% { opacity: 0.6; }
  90% { opacity: 0.3; }
  100% {
    transform: translateY(-100vh) translateX(40px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes ambientLight {
  0%, 100% { opacity: 0.05; transform: scale(1); }
  50% { opacity: 0.1; transform: scale(1.1); }
}

@keyframes winBannerPulse {
  0%, 100% { background: rgba(201, 162, 74, 0.12); }
  50% { background: rgba(201, 162, 74, 0.2); }
}

@keyframes slotReel1 {
  0% { transform: translateY(0); }
  20% { transform: translateY(-50%); }
  40% { transform: translateY(-100%); }
  60% { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

@keyframes slotReel2 {
  0% { transform: translateY(0); }
  25% { transform: translateY(-30%); }
  50% { transform: translateY(-80%); }
  75% { transform: translateY(-30%); }
  100% { transform: translateY(0); }
}

@keyframes pinFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes magnifierRotate {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
}

/* ─────────────────────────────────────────────────────
   SCROLL ANIMATION CLASSES
   ───────────────────────────────────────────────────── */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-in-up.is-visible,
.fade-in-right.is-visible,
.fade-in-left.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Delay utility classes */
[data-delay="0"] { transition-delay: 0ms; }
[data-delay="100"] { transition-delay: 100ms; }
[data-delay="150"] { transition-delay: 150ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="400"] { transition-delay: 400ms; }
[data-delay="500"] { transition-delay: 500ms; }

/* ─────────────────────────────────────────────────────
   APPLIED ANIMATION RULES
   ───────────────────────────────────────────────────── */

/* Hero Headline */
.hero-section .hero-content {
  animation: fadeInUp 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
}

.hero-section .hero-visual {
  animation: fadeInRight 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s both;
}

/* Ambient Lights */
.ambient-light {
  animation: ambientLight 8s ease-in-out infinite;
}

.ambient-light--right {
  animation-delay: 4s;
}

/* Reel columns animation */
.reel-column:nth-child(1) .reel-symbol--active {
  animation: reelSpin 3s ease-in-out infinite;
}

.reel-column:nth-child(2) .reel-symbol--active {
  animation: reelSpin 3s ease-in-out infinite 0.3s;
}

.reel-column:nth-child(3) .reel-symbol--active {
  animation: reelSpin 3s ease-in-out infinite 0.6s;
}

/* Win banner pulse */
.slot-win-banner {
  animation: winBannerPulse 2s ease-in-out infinite;
}

/* Game hub glow */
.game-hub-inner {
  animation: goldGlowPulse 4s ease-in-out infinite;
}

/* Case pins float */
.case-pin--1 {
  animation: pinFloat 3s ease-in-out infinite;
}

.case-pin--2 {
  animation: pinFloat 3s ease-in-out infinite 1s;
}

.case-pin--3 {
  animation: pinFloat 3s ease-in-out infinite 2s;
}

/* Magnifier rotation */
.magnifier-ring {
  animation: magnifierRotate 6s ease-in-out infinite;
}

/* Evidence items float */
.evidence-board .evidence-item {
  animation: pinFloat 4s ease-in-out infinite;
}

.ev-2 { animation-delay: 1s !important; }
.ev-3 { animation-delay: 2s !important; }
.ev-4 { animation-delay: 0.5s !important; }
.ev-5 { animation-delay: 1.5s !important; }

/* Badge dot pulse — already in keyframes */
/* =====================================================
   END OF ANIMATIONS.CSS
   ===================================================== */