/* ============================================================
   BatWinPlay — Animations & Keyframes v3
   ============================================================ */

/* ════════════════════════════════════════
   CORE KEYFRAMES
   ════════════════════════════════════════ */

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

@keyframes blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 7px currentColor; }
  50%       { opacity: 0.35; box-shadow: none; }
}

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

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-28px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.88) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.72); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideInLeft {
  from { transform: translateX(-110%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutLeft {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(-110%); opacity: 0; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes shimmerGold {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0.4deg); }
  50%       { transform: translateY(-12px) rotate(-0.4deg); }
}

@keyframes floatAlt {
  0%, 100% { transform: translateY(-5px) rotate(-1.5deg); }
  50%       { transform: translateY(6px) rotate(1.5deg); }
}

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

@keyframes glow {
  0%, 100% { box-shadow: 0 0 12px rgba(245,166,35,0.28); }
  50%       { box-shadow: 0 0 32px rgba(245,166,35,0.65); }
}

@keyframes goldGlow {
  0%, 100% { text-shadow: 0 0 8px rgba(245,166,35,0.38); }
  50%       { text-shadow: 0 0 26px rgba(245,166,35,0.88); }
}

@keyframes ripple {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(2.4); opacity: 0; }
}

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

@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes borderRun {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes progressBar {
  from { width: 0%; }
  to   { width: 100%; }
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

@keyframes borderScan {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 200%; }
}

@keyframes textReveal {
  from { opacity: 0; transform: translateY(20px) skewY(3deg); }
  to   { opacity: 1; transform: translateY(0) skewY(0); }
}

@keyframes slideReveal {
  from { opacity: 0; transform: translateY(18px); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: translateY(0);    clip-path: inset(0 0 0% 0); }
}

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

@keyframes iconBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  40%       { transform: translateY(-8px) scale(1.1); }
  60%       { transform: translateY(-4px) scale(1.05); }
}

/* ════════════════════════════════════════
   UTILITY ANIMATION CLASSES
   ════════════════════════════════════════ */
.anim-fade-up    { animation: fadeInUp    0.6s cubic-bezier(0.4,0,0.2,1) both; }
.anim-fade-down  { animation: fadeInDown  0.6s cubic-bezier(0.4,0,0.2,1) both; }
.anim-fade-left  { animation: fadeInLeft  0.6s cubic-bezier(0.4,0,0.2,1) both; }
.anim-fade-right { animation: fadeInRight 0.6s cubic-bezier(0.4,0,0.2,1) both; }
.anim-scale-in   { animation: scaleIn     0.5s cubic-bezier(0.4,0,0.2,1) both; }
.anim-scale-up   { animation: scaleUp     0.55s cubic-bezier(0.34,1.4,0.64,1) both; }
.anim-pop-in     { animation: popIn       0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
.anim-float      { animation: float       3.2s ease-in-out infinite; }
.anim-float-alt  { animation: floatAlt    4.4s ease-in-out infinite; }
.anim-float-slow { animation: floatSlow   6s ease-in-out infinite; }
.anim-pulse      { animation: pulse       2.2s ease-in-out infinite; }
.anim-spin       { animation: spin        1s linear infinite; }
.anim-glow       { animation: glow        2.5s ease-in-out infinite; }
.anim-gold-glow  { animation: goldGlow    2.8s ease-in-out infinite; }
.anim-count-up   { animation: countUp     0.5s ease both; }
.anim-icon-bounce{ animation: iconBounce  2s ease-in-out infinite; }

/* Delay utilities */
.delay-50  { animation-delay: 50ms; }
.delay-100 { animation-delay: 100ms; }
.delay-150 { animation-delay: 150ms; }
.delay-200 { animation-delay: 200ms; }
.delay-250 { animation-delay: 250ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }

/* Duration utilities */
.dur-200 { animation-duration: 200ms; }
.dur-300 { animation-duration: 300ms; }
.dur-400 { animation-duration: 400ms; }
.dur-600 { animation-duration: 600ms; }
.dur-800 { animation-duration: 800ms; }
.dur-1000 { animation-duration: 1000ms; }

/* ════════════════════════════════════════
   SHIMMER SKELETON
   ════════════════════════════════════════ */
.shimmer {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.1) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
.shimmer-gold {
  background: linear-gradient(90deg,
    rgba(245,166,35,0.06) 25%,
    rgba(245,166,35,0.15) 50%,
    rgba(245,166,35,0.06) 75%
  );
  background-size: 200% 100%;
  animation: shimmerGold 1.5s ease-in-out infinite;
}

/* ════════════════════════════════════════
   GRADIENT BORDER ANIMATION
   ════════════════════════════════════════ */
.gradient-border-anim {
  background: linear-gradient(90deg, #f5a623, #ffd166, #c8841a, #f5a623);
  background-size: 300% 300%;
  animation: borderRun 3s ease infinite;
}

/* ════════════════════════════════════════
   RIPPLE BUTTON EFFECT
   ════════════════════════════════════════ */
.btn-ripple { position: relative; overflow: hidden; }
.btn-ripple::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.32);
  transform: scale(0) translate(-50%,-50%);
  transform-origin: top left;
}
.btn-ripple:active::before { animation: ripple 0.55s ease-out; }

/* ════════════════════════════════════════
   FLOATING BADGES
   ════════════════════════════════════════ */
.floating-badge { animation: float 3.8s ease-in-out infinite; }
.floating-badge:nth-child(even) { animation: floatAlt 4.4s ease-in-out infinite; }

/* ════════════════════════════════════════
   TICKER / MARQUEE
   ════════════════════════════════════════ */
.ticker-wrap { overflow: hidden; white-space: nowrap; }
.ticker-content {
  display: inline-block;
  animation: ticker 24s linear infinite;
}
.ticker-content:hover { animation-play-state: paused; }

/* ════════════════════════════════════════
   SCROLL REVEAL (JS-triggered .revealed)
   ════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
              transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.reveal.revealed { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
              transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.reveal-left.revealed  { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
              transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.reveal-right.revealed { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s cubic-bezier(0.34,1.4,0.64,1),
              transform 0.6s cubic-bezier(0.34,1.4,0.64,1);
}
.reveal-scale.revealed { opacity: 1; transform: scale(1); }

/* ════════════════════════════════════════
   STAGGER SYSTEM (CSS vars)
   ════════════════════════════════════════ */
.stagger-children > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1),
              transform 0.6s cubic-bezier(0.4,0,0.2,1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.stagger-children.revealed > * { opacity: 1; transform: none; }

/* ════════════════════════════════════════
   LOADING SPINNER
   ════════════════════════════════════════ */
.spinner {
  width: 24px; height: 24px;
  border: 2.5px solid rgba(245,166,35,0.2);
  border-top-color: var(--gold, #f5a623);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  display: inline-block;
}

/* ════════════════════════════════════════
   PROGRESS BAR
   ════════════════════════════════════════ */
.progress-bar-wrap {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.07);
  border-radius: 3px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold, #f5a623), var(--gold-light, #ffd166));
  border-radius: 3px;
  animation: progressBar 2s ease forwards;
}

/* ════════════════════════════════════════
   COUNTER ANIMATION (number count-up)
   ════════════════════════════════════════ */
.counter-value {
  display: inline-block;
  animation: numberCount 0.6s cubic-bezier(0.34,1.4,0.64,1) both;
}

/* ════════════════════════════════════════
   HERO IMAGE GLOW PULSE
   ════════════════════════════════════════ */
@keyframes heroPulse {
  0%, 100% { box-shadow: 0 0 40px rgba(245,166,35,0.12), 0 40px 90px rgba(0,0,0,0.75); }
  50%       { box-shadow: 0 0 70px rgba(245,166,35,0.2), 0 40px 90px rgba(0,0,0,0.75); }
}

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