/* ==========================================================================
   KEYFRAMES & ANIMATIONS
   Decoupled from style.css
   ========================================================================== */

.anim-pop-in { animation: popInFromTop 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; }

@keyframes colorPulse { 
    0% { border-color: var(--highlight-primary); } 
    50% { border-color: white; } 
    100% { border-color: var(--highlight-primary); } 
}

@keyframes popInFromTop { 
    from { opacity: 0; transform: translateY(-20px); } 
    to { opacity: 1; transform: translateY(0); } 
}

@keyframes popInFromBottom { 
    from { opacity: 0; transform: translateY(20px); } 
    to { opacity: 1; transform: translateY(0); } 
}

@keyframes correctAnswerCelebration { 
    0%, 100% { transform: scale(1); } 
    50% { transform: scale(1.08); } 
}

@keyframes confettiBurst { 
    0% { opacity: 1; transform: scale(0) rotate(0deg); } 
    100% { opacity: 0; transform: scale(1.5) rotate(180deg); } 
}

@keyframes stickerSlap { 
    0% { transform: scale(1.1) rotate(var(--sticker-tilt, 0deg)); opacity: 0.8; } 
    50% { transform: scale(0.98) rotate(calc(var(--sticker-tilt, 0deg) * -0.5)); } 
    100% { transform: scale(1) rotate(0deg); opacity: 1; } 
}

@keyframes maskingWave { 
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0.6; } 
    70% { opacity: 0.2; } 
    100% { transform: translate(-50%, -50%) scale(40); opacity: 0; } 
}

@keyframes fadeInRight { 
    to { opacity: 1; transform: translateX(0); } 
}

@keyframes rotate-tips {
    0% { opacity: 0; transform: translateY(10px); z-index: 1; pointer-events: none; }
    0.5% { opacity: 1; transform: translateY(0); z-index: 1; pointer-events: auto; }
    8.0% { opacity: 1; transform: translateY(0); z-index: 1; pointer-events: auto; }
    8.5% { opacity: 0; transform: translateY(-10px); z-index: 0; pointer-events: none; }
    100% { opacity: 0; transform: translateY(-10px); z-index: 0; pointer-events: none; }
}

@keyframes countdownAnim {
    0% { transform: scale(.6); opacity: 0; }
    20% { transform: scale(1.1); opacity: 1; color: var(--highlight-secondary); }
    80% { transform: scale(0.95); color: var(--highlight-primary); }
    100% { transform: scale(0.9); opacity: 0; }
}

@keyframes score-change-animation { 
    0% { opacity: 1; transform: translateY(0) scale(1.2); } 
    100% { opacity: 0; transform: translateY(-20px) scale(0.8); } 
}

@keyframes tier-flash-gradient { 
    from { background-position: 100% 0; opacity: 0.9; } 
    to { background-position: 0% 0; opacity: 0; } 
}

@keyframes winnerPulse { 
    from { transform: translate(-50%, -50%) scale(1.2); } 
    to { transform: translate(-50%, -50%) scale(1.3); } 
}

@keyframes playful-spin { 
    0% { transform: rotate(0deg) scale(1); } 
    50% { transform: rotate(540deg) scale(1.1); } 
    100% { transform: rotate(1080deg) scale(1); } 
}