/* 80Quiz — Animations & Effects (Retro-Neon 80s Dark Theme) */

/* Fade in from above */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Fade in from below */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Slide in from right (for questions) */
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(30px) scale(0.97); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

/* Correct answer neon glow */
@keyframes correctGlow {
    0% { box-shadow: 0 0 0 rgba(57, 255, 20, 0); }
    50% { box-shadow: 0 0 20px rgba(57, 255, 20, 0.3), 0 0 40px rgba(57, 255, 20, 0.12); }
    100% { box-shadow: 0 0 10px rgba(57, 255, 20, 0.2), 0 0 20px rgba(57, 255, 20, 0.08); }
}

/* Wrong answer shake */
@keyframes wrongShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

/* Score float up (+10) */
@keyframes scoreFloat {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-40px) scale(1.2); }
}

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

/* Timer ring pulse (last seconds) */
@keyframes timerPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Leaderboard gold flash for new entry */
@keyframes goldFlash {
    0% { background: rgba(255, 215, 0, 0.2); box-shadow: 0 0 15px rgba(255, 215, 0, 0.15); }
    50% { background: rgba(255, 215, 0, 0.1); box-shadow: 0 0 8px rgba(255, 215, 0, 0.08); }
    100% { background: rgba(255, 215, 0, 0.05); box-shadow: none; }
}

/* Progress dot fill */
@keyframes dotFill {
    from { transform: scale(0.6); opacity: 0.5; }
    to { transform: scale(1); opacity: 1; }
}

/* Neon pulse for card borders */
@keyframes neonPulse {
    0%, 100% { border-color: rgba(0, 240, 255, 0.15); }
    50% { border-color: rgba(0, 240, 255, 0.3); }
}

/* Apply entrance animations */
.search-section {
    animation: fadeInDown 0.6s ease-out;
}

.quiz-panel {
    animation: fadeInUp 0.6s ease-out 0.15s both;
}

.leaderboard-panel {
    animation: fadeInUp 0.6s ease-out 0.3s both;
}

footer {
    animation: fadeIn 0.6s ease-out 0.4s both;
}