/* ==========================================================================
   Spin Wheel SPA - Animations & Visual Keyframes
   ภาษาคอมเม้นท์: ภาษาไทย
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Animation ไฟกะพริบสลับสีวนรอบวงล้อ (Multi-Color Glowing Rim)
   -------------------------------------------------------------------------- */
@keyframes dynamicWheelGlow {
    0% {
        box-shadow: 0 0 30px rgba(0, 240, 255, 0.8), inset 0 0 15px rgba(0, 240, 255, 0.4);
    }
    25% {
        box-shadow: 0 0 40px rgba(0, 102, 255, 0.9), inset 0 0 20px rgba(0, 102, 255, 0.5);
    }
    50% {
        box-shadow: 0 0 35px rgba(157, 78, 221, 0.8), inset 0 0 15px rgba(157, 78, 221, 0.4);
    }
    75% {
        box-shadow: 0 0 40px rgba(0, 255, 136, 0.9), inset 0 0 20px rgba(0, 255, 136, 0.5);
    }
    100% {
        box-shadow: 0 0 30px rgba(0, 240, 255, 0.8), inset 0 0 15px rgba(0, 240, 255, 0.4);
    }
}

.wheel-glow-animated {
    animation: dynamicWheelGlow 5s infinite ease-in-out;
}

/* --------------------------------------------------------------------------
   2. Animation ปุ่มกดตรงกลางวงล้อ (🔄 Pulse)
   -------------------------------------------------------------------------- */
@keyframes pulseButton {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 3px #ff9900, 0 0 15px rgba(255, 153, 0, 0.7);
    }
    50% {
        transform: scale(1.06);
        box-shadow: 0 0 0 4px #ff9900, 0 0 25px rgba(255, 153, 0, 1);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 3px #ff9900, 0 0 15px rgba(255, 153, 0, 0.7);
    }
}

.spin-center-btn.ready {
    animation: pulseButton 1.8s infinite ease-in-out;
}

/* --------------------------------------------------------------------------
   3. Animation การเปิดกล่องของขวัญ (Gift Box Unboxing Animation)
   -------------------------------------------------------------------------- */
@keyframes giftBoxBounce {
    0% {
        transform: scale(0.3) rotate(-15deg);
        opacity: 0;
    }
    40% {
        transform: scale(1.2) rotate(10deg);
        opacity: 1;
    }
    70% {
        transform: scale(0.9) rotate(-5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes rewardRevealPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.15);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-gift-box {
    animation: giftBoxBounce 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.animate-reward-reveal {
    animation: rewardRevealPop 0.5s ease-out forwards;
}