/* ===== Family Game - Animations ===== */

/* Pulse animation (opacity) */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Bounce animation (translateY) */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Spin animation (rotate) */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Fade in animation */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Confirm pulse animation */
@keyframes confirmPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Count pulse animation */
@keyframes countPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

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

/* Glow animation (text shadow) */
@keyframes glow {
    0%, 100% { text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
    50% { text-shadow: 0 0 20px rgba(255, 215, 0, 0.8); }
}

/* Sparkle animation (used in yut game) */
@keyframes sparkle {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 5px currentColor, 0 0 10px currentColor;
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
        box-shadow: 0 0 15px currentColor, 0 0 25px currentColor, 0 0 35px currentColor;
    }
}

/* Neon pulse animation - generic white */
@keyframes neonPulse {
    0%, 100% {
        box-shadow:
            0 0 10px rgba(255, 255, 255, 0.8),
            0 0 20px rgba(255, 255, 255, 0.6),
            0 0 30px rgba(255, 255, 255, 0.4),
            0 0 40px rgba(255, 255, 255, 0.2),
            0 0 60px rgba(255, 255, 255, 0.1);
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        box-shadow:
            0 0 15px rgba(255, 255, 255, 1),
            0 0 30px rgba(255, 255, 255, 0.8),
            0 0 45px rgba(255, 255, 255, 0.6),
            0 0 60px rgba(255, 255, 255, 0.4),
            0 0 90px rgba(255, 255, 255, 0.2);
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Pop animation (result display) */
@keyframes resultPop {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* Swipe hint animation */
@keyframes swipeHint {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* Progress bar animation */
@keyframes progress {
    from { width: 0%; }
    to { width: 100%; }
}

/* Timer pulse animation */
@keyframes timer-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

/* Pulse text animation */
@keyframes pulse-text {
    from { opacity: 0.7; }
    to { opacity: 1; }
}

/* Neon blink animation (piece selection) */
@keyframes neonBlink {
    0%, 100% {
        box-shadow:
            0 0 5px #ff4444,
            0 0 10px #ff4444,
            0 0 20px #ff4444,
            0 0 30px #ff2222;
        border-color: #ff4444;
    }
    50% {
        box-shadow:
            0 0 10px #ff6666,
            0 0 20px #ff4444,
            0 0 35px #ff4444,
            0 0 50px #ff2222;
        border-color: #ff6666;
    }
}

/* Item pulse animation */
@keyframes item-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(78, 205, 196, 0.4); }
    50% { box-shadow: 0 2px 20px rgba(78, 205, 196, 0.8); }
}