/* File: /public/css/core/animations.css */
/* Wryon's Games - Shared Animation Keyframes */
/* v1.0.0 - Extracted from wryon-app.js, converted to CSS variables */
/*
 * KEY NOTES:
 * - Centralized @keyframes definitions
 * - Value change animations (flash effects)
 * - Button pulse animations
 * - Reusable across all pages
 * - All colors use CSS variables for white-label theming
 */

/* =================================================================
   VALUE CHANGE ANIMATIONS
   Flash effects when stats update
   ================================================================= */

/* Green value flash - for spins, wins */
@keyframes valueFlashGreen {
    0% { 
        transform: scale(1); 
        text-shadow: var(--glow-primary); 
    }
    25% { 
        transform: scale(1.3); 
        text-shadow: var(--glow-primary-intense), 
                     0 0 50px rgba(var(--brand-primary-rgb), 0.8); 
    }
    50% { 
        transform: scale(1.1); 
        text-shadow: 0 0 40px rgba(var(--brand-primary-rgb), 0.6); 
    }
    100% { 
        transform: scale(1); 
        text-shadow: var(--glow-primary); 
    }
}

/* Gold value flash - for jackpot, premium */
@keyframes valueFlashGold {
    0% { 
        transform: scale(1); 
        text-shadow: var(--glow-secondary); 
    }
    25% { 
        transform: scale(1.3); 
        text-shadow: var(--glow-secondary-intense), 
                     0 0 50px rgba(var(--brand-secondary-rgb), 0.8); 
    }
    50% { 
        transform: scale(1.1); 
        text-shadow: 0 0 40px rgba(var(--brand-secondary-rgb), 0.6); 
    }
    100% { 
        transform: scale(1); 
        text-shadow: var(--glow-secondary); 
    }
}

/* Card container flash */
@keyframes cardFlash {
    0% { 
        box-shadow: var(--shadow-lg); 
    }
    25% { 
        box-shadow: 0 0 40px rgba(var(--brand-primary-rgb), 0.8), 
                    0 0 60px rgba(var(--brand-primary-rgb), 0.5); 
    }
    50% { 
        box-shadow: 0 0 30px rgba(var(--brand-primary-rgb), 0.6); 
    }
    100% { 
        box-shadow: var(--shadow-lg); 
    }
}

/* Animation classes */
.value-flash-green {
    animation: valueFlashGreen 0.6s ease-out;
}

.value-flash-gold {
    animation: valueFlashGold 0.6s ease-out;
}

.card-flash {
    animation: cardFlash 0.6s ease-out;
}

/* =================================================================
   CONTINUOUS PULSE ANIMATIONS
   Subtle ongoing animations
   ================================================================= */

/* Green value pulse */
@keyframes valuePulseGreen {
    0%, 100% { 
        text-shadow: var(--glow-primary); 
    }
    50% { 
        text-shadow: var(--glow-primary-strong); 
    }
}

/* Gold value pulse */
@keyframes valuePulseGold {
    0%, 100% { 
        text-shadow: var(--glow-secondary); 
    }
    50% { 
        text-shadow: var(--glow-secondary-strong); 
    }
}

/* Generic subtle pulse */
@keyframes subtlePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* =================================================================
   BUY SPINS BUTTON ANIMATIONS
   Attention-grabbing button effects
   ================================================================= */

@keyframes buySpinsPulse {
    0%, 100% {
        box-shadow: 0 0 5px rgba(var(--brand-primary-rgb), 0.5), 
                    0 0 10px rgba(var(--brand-primary-rgb), 0.3);
        border-color: var(--border-strong);
    }
    50% {
        box-shadow: 0 0 15px rgba(var(--brand-primary-rgb), 0.8), 
                    0 0 25px rgba(var(--brand-primary-rgb), 0.5), 
                    0 0 35px rgba(var(--brand-primary-rgb), 0.3);
        border-color: var(--brand-primary);
    }
}

@keyframes buySpinsColorShift {
    0%, 100% {
        background: var(--gradient-button-subtle);
    }
    25% {
        background: var(--gradient-button-gold);
    }
    50% {
        background: linear-gradient(135deg, 
            rgba(var(--brand-primary-rgb), 0.2), 
            rgba(0, 150, 0, 0.35));
    }
    75% {
        background: linear-gradient(135deg, 
            rgba(0, 200, 100, 0.15), 
            rgba(0, 80, 50, 0.3));
    }
}

/* Animated buy button class */
.buy-spins-btn-animated {
    animation: buySpinsPulse 2s ease-in-out infinite, 
               buySpinsColorShift 4s ease-in-out infinite;
    border: 2px solid var(--border-strong) !important;
    font-weight: bold !important;
}

.buy-spins-btn-animated:hover {
    animation: none;
    background: var(--brand-primary) !important;
    color: var(--text-on-primary) !important;
    border-color: var(--brand-primary) !important;
    box-shadow: var(--glow-primary-strong) !important;
}

/* =================================================================
   APPEARANCE ANIMATIONS
   Elements appearing/disappearing
   ================================================================= */

/* Fade in */
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Fade out */
@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Scale in (bounce) */
@keyframes scaleIn {
    0% { 
        transform: scale(0.8); 
        opacity: 0; 
    }
    100% { 
        transform: scale(1); 
        opacity: 1; 
    }
}

/* Scale in with bounce */
@keyframes scaleInBounce {
    0% { 
        transform: scale(0.5); 
        opacity: 0; 
    }
    70% { 
        transform: scale(1.1); 
    }
    100% { 
        transform: scale(1); 
        opacity: 1; 
    }
}

/* Slide up */
@keyframes slideUp {
    0% { 
        transform: translateY(20px); 
        opacity: 0; 
    }
    100% { 
        transform: translateY(0); 
        opacity: 1; 
    }
}

/* Slide down */
@keyframes slideDown {
    0% { 
        transform: translateY(-20px); 
        opacity: 0; 
    }
    100% { 
        transform: translateY(0); 
        opacity: 1; 
    }
}

/* Slide in from right */
@keyframes slideInRight {
    0% { 
        transform: translateX(100%); 
    }
    100% { 
        transform: translateX(0); 
    }
}

/* Slide out to right */
@keyframes slideOutRight {
    0% { 
        transform: translateX(0); 
    }
    100% { 
        transform: translateX(100%); 
    }
}

/* =================================================================
   ROTATION ANIMATIONS
   Spinning/rotating elements
   ================================================================= */

/* Continuous spin */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Wobble effect */
@keyframes wobble {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    75% { transform: rotate(-5deg); }
}

/* Shake effect */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

/* =================================================================
   GLOW ANIMATIONS
   Glowing/pulsing borders and shadows
   ================================================================= */

/* Primary color glow pulse */
@keyframes glowPulsePrimary {
    0%, 100% {
        box-shadow: var(--glow-primary);
    }
    50% {
        box-shadow: var(--glow-primary-strong);
    }
}

/* Secondary color glow pulse */
@keyframes glowPulseSecondary {
    0%, 100% {
        box-shadow: var(--glow-secondary);
    }
    50% {
        box-shadow: var(--glow-secondary-strong);
    }
}

/* Border glow */
@keyframes borderGlow {
    0%, 100% {
        border-color: var(--border-default);
    }
    50% {
        border-color: var(--brand-primary);
    }
}

/* =================================================================
   LOADING ANIMATIONS
   Spinners and loading indicators
   ================================================================= */

/* Dots loading */
@keyframes dotsLoading {
    0%, 80%, 100% { 
        transform: scale(0); 
        opacity: 0.5;
    }
    40% { 
        transform: scale(1); 
        opacity: 1;
    }
}

/* Typing indicator */
@keyframes typingBounce {
    0%, 60%, 100% { 
        transform: translateY(0); 
    }
    30% { 
        transform: translateY(-5px); 
    }
}

/* =================================================================
   UTILITY CLASSES
   Quick animation applications
   ================================================================= */

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.animate-fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

.animate-scale-in {
    animation: scaleIn 0.3s ease-out;
}

.animate-slide-up {
    animation: slideUp 0.3s ease-out;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

.animate-pulse {
    animation: subtlePulse 2s ease-in-out infinite;
}

.animate-glow {
    animation: glowPulsePrimary 2s ease-in-out infinite;
}

.animate-glow-gold {
    animation: glowPulseSecondary 2s ease-in-out infinite;
}

/* =================================================================
   REDUCED MOTION
   Respect user preferences
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .animate-spin {
        animation: none;
    }
}