/* ══════════════════════════════════════════════════════════════
   animations.css — AniGamble HQ  ·  Upgraded Animation Engine
   ══════════════════════════════════════════════════════════════ */

/* ── Easing Library ──────────────────────────────────────────── */
:root {
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce:      cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:   cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-back:     cubic-bezier(0.36, 0, 0.66, -0.56);
  --ease-out-back:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
  --ease-decel:       cubic-bezier(0, 0, 0.2, 1);
}

/* ── Core Keyframes ──────────────────────────────────────────── */
@keyframes glassFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes glassFadeDown {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.98);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes glassFadeLeft {
  from {
    opacity: 0;
    transform: translateX(-18px) scale(0.97);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes glassFadeRight {
  from {
    opacity: 0;
    transform: translateX(18px) scale(0.97);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.88);
    filter: blur(2px);
  }
  60% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.7);    }
  55%  { opacity: 1; transform: scale(1.08);   }
  75%  { transform: scale(0.96);               }
  100% { opacity: 1; transform: scale(1);      }
}

@keyframes bounceIn {
  0%   { opacity: 0; transform: translateY(28px);  }
  55%  { opacity: 1; transform: translateY(-8px);  }
  75%  { transform: translateY(4px);               }
  90%  { transform: translateY(-3px);              }
  100% { transform: translateY(0);                 }
}

@keyframes spinIn {
  from {
    opacity: 0;
    transform: rotate(-15deg) scale(0.85);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

@keyframes morphIn {
  from {
    opacity: 0;
    transform: scaleX(0.6) scaleY(0.85);
    transform-origin: bottom center;
  }
  to {
    opacity: 1;
    transform: scaleX(1) scaleY(1);
  }
}

/* ── Pulse & Glow ────────────────────────────────────────────── */
@keyframes pulseGlow {
  0%, 100% { opacity: 0.35; transform: scale(1);    }
  50%       { opacity: 0.85; transform: scale(1.04); }
}

@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0px rgba(124,93,250,0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(124,93,250,0);   }
  100% { box-shadow: 0 0 0 0px rgba(124,93,250,0);    }
}

@keyframes goldPulse {
  0%, 100% { opacity: 0.5; text-shadow: 0 0 8px rgba(212,175,55,0.4); }
  50%       { opacity: 1;   text-shadow: 0 0 20px rgba(212,175,55,0.9); }
}

/* ── Loop / Ambient ──────────────────────────────────────────── */
@keyframes floatBob {
  0%, 100% { transform: translateY(0px);  }
  50%       { transform: translateY(-6px); }
}

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

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

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

@keyframes tickBounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0);   }
  40%                      { transform: translateY(-6px); }
  60%                      { transform: translateY(-3px); }
}

/* ── Type-in (text reveal) ───────────────────────────────────── */
@keyframes typeIn {
  from { max-width: 0; opacity: 0; }
  to   { max-width: 100%; opacity: 1; }
}

/* ── Result / State Animations ───────────────────────────────── */
@keyframes winFlash {
  0%   { background: transparent;            }
  25%  { background: rgba(34,197,94,0.18);   }
  50%  { background: transparent;            }
  75%  { background: rgba(34,197,94,0.12);   }
  100% { background: transparent;            }
}

@keyframes loseShake {
  0%, 100% { transform: translateX(0);   }
  15%       { transform: translateX(-8px); }
  35%       { transform: translateX(8px);  }
  50%       { transform: translateX(-5px); }
  70%       { transform: translateX(5px);  }
  85%       { transform: translateX(-2px); }
}

@keyframes dangerPulse {
  0%, 100% { border-color: var(--danger);           }
  50%       { border-color: rgba(239,68,68,0.25);   }
}

/* ── Game-specific ───────────────────────────────────────────── */
@keyframes coinSpin {
  0%   { transform: rotateY(0deg);   }
  100% { transform: rotateY(720deg); }
}

@keyframes dieFace {
  0%   { transform: rotateX(0deg)   rotateY(0deg);   }
  25%  { transform: rotateX(90deg)  rotateY(45deg);  }
  50%  { transform: rotateX(180deg) rotateY(90deg);  }
  75%  { transform: rotateX(270deg) rotateY(135deg); }
  100% { transform: rotateX(360deg) rotateY(180deg); }
}

@keyframes crashRise {
  from { transform: scaleX(0);   transform-origin: left center; }
  to   { transform: scaleX(1);   transform-origin: left center; }
}

@keyframes numberRoll {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes ppBadgePop {
  0%   { transform: scale(1);    }
  40%  { transform: scale(1.35); }
  65%  { transform: scale(0.9);  }
  100% { transform: scale(1);    }
}

/* ── Utility Entry Classes ───────────────────────────────────── */
.fade-in {
  animation: glassFadeUp 0.45s var(--ease-out-expo) both;
}
.fade-in-down {
  animation: glassFadeDown 0.4s var(--ease-out-expo) both;
}
.slide-in {
  animation: glassFadeLeft 0.38s var(--ease-out-expo) both;
}
.slide-in-right {
  animation: glassFadeRight 0.38s var(--ease-out-expo) both;
}
.pop-in {
  animation: popIn 0.5s var(--ease-spring) both;
}
.bounce-in {
  animation: bounceIn 0.55s var(--ease-out-expo) both;
}
.spin-in {
  animation: spinIn 0.4s var(--ease-spring) both;
}
.morph-in {
  animation: morphIn 0.35s var(--ease-out-quart) both;
}

/* ── Loop Utility Classes ────────────────────────────────────── */
.float { animation: floatBob  3s  ease-in-out infinite; }
.pulse { animation: pulseGlow 2s  ease-in-out infinite; }
.spin  { animation: rotateLoop 1s linear      infinite; }
.shimmer-text {
  background: linear-gradient(90deg, currentColor 20%, rgba(255,255,255,0.7) 50%, currentColor 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2s linear infinite;
}

/* ── Manual Stagger Utilities ────────────────────────────────── */
.stagger-1  { animation-delay: 0.04s !important; }
.stagger-2  { animation-delay: 0.09s !important; }
.stagger-3  { animation-delay: 0.14s !important; }
.stagger-4  { animation-delay: 0.20s !important; }
.stagger-5  { animation-delay: 0.27s !important; }
.stagger-6  { animation-delay: 0.35s !important; }
.stagger-7  { animation-delay: 0.44s !important; }
.stagger-8  { animation-delay: 0.54s !important; }

/* ── Auto Stagger — Tables, Grids, Lists ─────────────────────── */
tbody tr,
.stat-card,
.guild-card,
.staff-card,
.inv-item,
.game-tab,
.pp-lb-row {
  animation: glassFadeUp 0.48s var(--ease-out-expo) both;
  will-change: transform, opacity;
}

/* Eased stagger curve — accelerates through first 5, settles after */
*:nth-child(1)  { animation-delay: 0.03s; }
*:nth-child(2)  { animation-delay: 0.06s; }
*:nth-child(3)  { animation-delay: 0.10s; }
*:nth-child(4)  { animation-delay: 0.14s; }
*:nth-child(5)  { animation-delay: 0.19s; }
*:nth-child(6)  { animation-delay: 0.24s; }
*:nth-child(7)  { animation-delay: 0.30s; }
*:nth-child(8)  { animation-delay: 0.36s; }
*:nth-child(9)  { animation-delay: 0.43s; }
*:nth-child(10) { animation-delay: 0.50s; }
*:nth-child(11) { animation-delay: 0.54s; }
*:nth-child(12) { animation-delay: 0.58s; }
*:nth-child(13) { animation-delay: 0.62s; }
*:nth-child(14) { animation-delay: 0.65s; }
*:nth-child(15) { animation-delay: 0.68s; }
*:nth-child(16) { animation-delay: 0.71s; }
*:nth-child(17) { animation-delay: 0.73s; }
*:nth-child(18) { animation-delay: 0.75s; }
*:nth-child(19) { animation-delay: 0.77s; }
*:nth-child(20) { animation-delay: 0.79s; }

/* ── Modals ──────────────────────────────────────────────────── */
.modal-overlay {
  opacity: 0;
  transition: opacity 0.25s var(--ease-decel);
}
.modal-overlay.open {
  opacity: 1;
}
.modal-overlay.open .modal,
.modal-overlay.open .cashout-modal {
  animation: scaleIn 0.35s var(--ease-spring) both;
  will-change: transform, opacity;
}
.modal-overlay:not(.open) .modal,
.modal-overlay:not(.open) .cashout-modal {
  animation: none;
  transform: scale(0.88);
  opacity: 0;
  transition: transform 0.2s var(--ease-in-back), opacity 0.2s ease;
}

/* ── Toast / Result Banners ──────────────────────────────────── */
.result-banner.show {
  animation: bounceIn 0.45s var(--ease-spring) both;
}
.result-banner.win  { animation: winFlash  0.6s ease forwards; }
.result-banner.lose { animation: loseShake 0.5s ease forwards; }

/* ── PP Flash Badge ──────────────────────────────────────────── */
.pp-flash.show {
  animation: popIn 0.4s var(--ease-spring) both;
}
.hud-pp-badge {
  transition: transform 0.2s var(--ease-spring), color 0.2s ease;
}
.hud-pp-badge.bump {
  animation: ppBadgePop 0.4s var(--ease-spring) both;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.play-btn,
.cashout-btn,
.hud-btn,
.preset-btn,
.cf-choice-btn,
.dd-choice-btn {
  transition:
    transform   0.15s var(--ease-spring),
    box-shadow  0.15s ease,
    opacity     0.15s ease,
    background  0.15s ease;
  will-change: transform;
}
.play-btn:hover,
.hud-btn:hover     { transform: translateY(-2px); }
.play-btn:active,
.hud-btn:active    { transform: scale(0.96); }
.preset-btn:active { transform: scale(0.93); }

/* ── Cards ───────────────────────────────────────────────────── */
.game-card {
  animation: glassFadeUp 0.5s var(--ease-out-expo) both;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* ── HUD entrance ────────────────────────────────────────────── */
.hud {
  animation: glassFadeDown 0.45s var(--ease-out-expo) 0.05s both;
}

/* ── Game-panel transitions ──────────────────────────────────── */
.game-panel.active {
  animation: morphIn 0.35s var(--ease-out-quart) both;
}

/* ── Coin Flip ───────────────────────────────────────────────── */
.cf-spinning {
  animation: coinSpin 0.9s var(--ease-in-out-circ) both;
  will-change: transform;
}

/* ── Dice ────────────────────────────────────────────────────── */
.dd-rolling {
  animation: dieFace 0.25s linear infinite;
  will-change: transform;
}
.dd-win  { animation: tickBounce 0.6s ease both; }
.dd-lose { animation: loseShake  0.5s ease both; }

/* ── Crash bar ───────────────────────────────────────────────── */
.crash-fill {
  transition: width 0.15s linear;
  will-change: width;
}

/* ── Crash multiplier number ─────────────────────────────────── */
.crash-multiplier {
  will-change: contents;
}
.crash-multiplier.tick {
  animation: numberRoll 0.1s var(--ease-decel) both;
}

/* ── Shimmer loading skeleton ────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-2) 25%,
    var(--bg-3) 50%,
    var(--bg-2) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
}

/* ── Danger / warning inputs ─────────────────────────────────── */
input.danger,
input:invalid:not(:placeholder-shown) {
  animation: dangerPulse 1.2s ease infinite;
}

/* ── Reduced Motion Guardrail ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
  .shimmer-text {
    -webkit-text-fill-color: currentColor;
    background: none;
  }
}