/* ============================================================
   PLAYAMO CASINO AZ — ANIMATIONS & EFFECTS
   animations.css
   ============================================================ */

/* ============================================================
   GLOBAL KEYFRAMES
   ============================================================ */

@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,0,0.4); }
  50%       { box-shadow: 0 0 0 12px rgba(255,215,0,0); }
}

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

@keyframes glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255,215,0,0.3)); }
  50%       { filter: drop-shadow(0 0 20px rgba(255,215,0,0.8)); }
}

@keyframes bounce-in {
  0%   { transform: scale(0.3) translateY(40px); opacity: 0; }
  60%  { transform: scale(1.05) translateY(-5px); opacity: 1; }
  80%  { transform: scale(0.97) translateY(2px); }
  100% { transform: scale(1) translateY(0); }
}

@keyframes slide-in-left {
  from { transform: translateX(-60px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes slide-in-right {
  from { transform: translateX(60px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.8); }
}

@keyframes shimmer-bg {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

@keyframes card-appear {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ============================================================
   BUTTON RIPPLE EFFECT
   ============================================================ */
.btn {
  position: relative;
  overflow: hidden;
}

.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: ripple-expand 0.6s linear;
  pointer-events: none;
}

@keyframes ripple-expand {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ============================================================
   LOADER / SKELETON
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg, rgba(45,10,85,0.4) 25%, rgba(106,42,170,0.2) 50%, rgba(45,10,85,0.4) 75%);
  background-size: 400px 100%;
  animation: shimmer-bg 1.5s infinite;
  border-radius: 8px;
}

/* ============================================================
   FLOATING ELEMENTS
   ============================================================ */
.float-anim {
  animation: float 6s ease-in-out infinite;
}

.float-anim-delay {
  animation: float 6s ease-in-out infinite;
  animation-delay: -3s;
}

/* ============================================================
   CARD HOVER GLOW VARIANTS
   ============================================================ */
.game-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-md) + 2px);
  background: linear-gradient(135deg, #FFD700, #6a2aaa, #FFD700);
  background-size: 200% 200%;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: shimmer-bg 3s linear infinite;
}

.game-card:hover::before { opacity: 1; }

/* ============================================================
   STAT COUNTER ANIMATION
   ============================================================ */
.stat-number[data-count] {
  display: inline-block;
  transition: all 0.5s ease;
}

/* ============================================================
   NAVBAR ACTIVE INDICATOR
   ============================================================ */
.nav-link.active {
  animation: none;
}

/* ============================================================
   HERO ENTRANCE ANIMATIONS
   ============================================================ */
.hero-badge     { animation: slide-in-left 0.5s ease both; }
.hero-title     { animation: slide-in-left 0.6s ease 0.1s both; }
.hero-subtitle  { animation: slide-in-left 0.6s ease 0.2s both; }
.hero-bonus-box { animation: slide-in-left 0.6s ease 0.3s both; }
.hero-cta-group { animation: slide-in-left 0.6s ease 0.4s both; }
.hero-trust     { animation: slide-in-left 0.6s ease 0.5s both; }
.hero-visual    { animation: slide-in-right 0.8s ease 0.3s both; }

/* ============================================================
   NOTIFICATION / TOAST
   ============================================================ */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: rgba(45,10,85,0.95);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  color: var(--white-dim);
  font-size: 14px;
  box-shadow: var(--shadow-purple);
  backdrop-filter: blur(10px);
  z-index: 9999;
  max-width: 320px;
  animation: bounce-in 0.4s ease both;
}

.toast.hide {
  animation: slide-in-right 0.3s ease reverse both;
}

/* ============================================================
   GOLD SHIMMER TEXT
   ============================================================ */
.text-shimmer {
  background: linear-gradient(
    90deg,
    #FFD700 0%,
    #FFA500 25%,
    #ffffff 50%,
    #FFA500 75%,
    #FFD700 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-bg 3s linear infinite;
}

/* ============================================================
   SECTION REVEAL (JS-triggered)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal.from-left {
  transform: translateX(-50px);
}

.reveal.from-left.visible {
  transform: translateX(0);
}

.reveal.from-right {
  transform: translateX(50px);
}

.reveal.from-right.visible {
  transform: translateX(0);
}

/* Delay variants for staggered reveals */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ============================================================
   PARTICLE ANIMATION (used by JS)
   ============================================================ */
.particle {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
}

.particle-gold {
  background: radial-gradient(circle, #FFD700 0%, transparent 70%);
  border-radius: 50%;
}

.particle-purple {
  background: radial-gradient(circle, #b89aff 0%, transparent 70%);
  border-radius: 50%;
}

/* ============================================================
   PULSE BUTTON
   ============================================================ */
.btn-pulse {
  animation: pulse-gold 2s infinite;
}

/* ============================================================
   JACKPOT NUMBER ROLL
   ============================================================ */
@keyframes roll-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.jackpot-digit {
  display: inline-block;
  animation: roll-up 0.4s ease both;
}

/* ============================================================
   BADGE GLOW
   ============================================================ */
.bonus-badge.hot {
  animation: glow-pulse 2s ease-in-out infinite;
}

/* ============================================================
   MOBILE MENU ANIMATION
   ============================================================ */
@keyframes menu-slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes menu-slide-out {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}

.mobile-menu.open {
  animation: menu-slide-in 0.35s cubic-bezier(.4,0,.2,1) both;
}

/* ============================================================
   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;
  }
}