/* ============================================
   ANIMASI & KEYFRAMES
   ============================================ */

/* ---------- Gradient Background Shift ---------- */
@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ---------- Logo Gradient Animation ---------- */
.logo-title {
    animation: gradientShift 4s ease infinite;
}

/* ---------- Pulse Glow (Start Button) ---------- */
@keyframes pulseGlow {
    0%   { box-shadow: 0 4px 24px rgba(251,191,36,0.25), 0 0 60px rgba(251,191,36,0.12); }
    50%  { box-shadow: 0 4px 32px rgba(251,191,36,0.40), 0 0 80px rgba(251,191,36,0.20); }
    100% { box-shadow: 0 4px 24px rgba(251,191,36,0.25), 0 0 60px rgba(251,191,36,0.12); }
}
.btn-start {
    animation: pulseGlow 2.5s ease-in-out infinite;
}
.btn-start:hover {
    animation: none;
}

/* ---------- Spin Button Pulse ---------- */
@keyframes spinPulse {
    0%   { box-shadow: 0 4px 24px rgba(74,144,217,0.25); }
    50%  { box-shadow: 0 4px 32px rgba(74,144,217,0.45), 0 0 60px rgba(74,144,217,0.15); }
    100% { box-shadow: 0 4px 24px rgba(74,144,217,0.25); }
}
.btn-spin:not(:disabled) {
    animation: spinPulse 2s ease-in-out infinite;
}
.btn-spin:hover {
    animation: none;
}

/* ---------- Spinner Rotation ---------- */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.waiting-icon {
    animation: spin 1.2s linear infinite;
}

/* ---------- Fade In Up ---------- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Fade In Scale ---------- */
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

/* ---------- LED Twinkle ---------- */
@keyframes ledTwinkle {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

/* ---------- Float Animation ---------- */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* ---------- Result Tier Glow ---------- */
@keyframes tierGlow {
    0%, 100% { text-shadow: 0 0 8px currentColor; }
    50%      { text-shadow: 0 0 20px currentColor, 0 0 40px currentColor; }
}
.result-tier {
    animation: tierGlow 2s ease-in-out infinite;
}

/* ---------- Coin Float ---------- */
@keyframes coinFloat {
    0%, 100% { transform: translateY(0) rotateY(0deg); }
    25%      { transform: translateY(-6px) rotateY(90deg); }
    50%      { transform: translateY(0) rotateY(180deg); }
    75%      { transform: translateY(-6px) rotateY(270deg); }
}

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

/* ---------- Warning Blink ---------- */
@keyframes warningBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}
.idle-warning.visible {
    display: block;
    animation: warningBlink 1s ease-in-out infinite;
}

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