/* ============================================
   Atom Rush - Keyframe Animations
   All game animations in one place
   ============================================ */

/* ============================================
   Title & Menu Animations
   ============================================ */

/* Title glow breathing */
@keyframes titleGlow {
    0% {
        text-shadow: 
            0 0 10px var(--accent-primary),
            0 0 20px var(--accent-primary),
            0 0 40px var(--accent-primary);
        filter: brightness(1);
    }
    100% {
        text-shadow: 
            0 0 20px var(--accent-primary),
            0 0 40px var(--accent-primary),
            0 0 60px var(--accent-primary),
            0 0 80px var(--accent-primary);
        filter: brightness(1.2);
    }
}

/* Menu item hover slide */
@keyframes slideIn {
    0% {
        transform: translateX(-20px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Single fade for menu block (avoids staggered reflows and flicker) */
.menu-options {
    animation: menuFadeIn 0.3s ease-out forwards;
}

@keyframes menuFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================
   Gameplay Animations
   ============================================ */

/* Tile spawn fade in */
@keyframes spawnIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.spawn-in {
    animation: spawnIn 0.15s ease-out;
}

/* Tile lock/place effect */
@keyframes lockFlash {
    0% {
        filter: brightness(2);
        transform: scale(1.1);
    }
    100% {
        filter: brightness(1);
        transform: scale(1);
    }
}

.lock-flash {
    animation: lockFlash 0.2s ease-out;
}

/* Wrong placement shake */
@keyframes wrongShake {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    20% { transform: translateX(-8px) rotate(-2deg); }
    40% { transform: translateX(8px) rotate(2deg); }
    60% { transform: translateX(-6px) rotate(-1deg); }
    80% { transform: translateX(6px) rotate(1deg); }
}

.wrong-shake {
    animation: wrongShake 0.4s ease-in-out;
}

/* Tile disappear on wrong */
@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

.fade-out {
    animation: fadeOut 0.2s ease-in forwards;
}

/* ============================================
   HUD Animations
   ============================================ */

/* Timer pulse on penalty */
@keyframes timerPenalty {
    0%, 100% { color: var(--accent-primary); }
    25%, 75% { color: var(--accent-error); }
}

.timer-penalty {
    animation: timerPenalty 0.5s ease-in-out;
}

/* Error counter bump */
@keyframes errorBump {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); color: #fff; }
    100% { transform: scale(1); }
}

.error-bump {
    animation: errorBump 0.3s ease-out;
}

/* Progress update pulse */
@keyframes progressPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); color: var(--accent-primary); }
    100% { transform: scale(1); }
}

.progress-pulse {
    animation: progressPulse 0.3s ease-out;
}

/* Hold slot swap */
@keyframes holdSwap {
    0% {
        transform: rotateY(0deg);
        opacity: 1;
    }
    50% {
        transform: rotateY(90deg);
        opacity: 0.5;
    }
    100% {
        transform: rotateY(0deg);
        opacity: 1;
    }
}

.hold-swap {
    animation: holdSwap 0.3s ease-in-out;
}

/* Next queue shift */
@keyframes queueShift {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.queue-shift {
    animation: queueShift 0.2s ease-out;
}

/* ============================================
   Assist System Animations
   ============================================ */

/* Column highlight sweep */
@keyframes columnHighlight {
    0% {
        opacity: 0;
        transform: scaleY(0);
    }
    20% {
        opacity: 0.6;
        transform: scaleY(1);
    }
    100% {
        opacity: 0;
        transform: scaleY(1);
    }
}

.column-highlight {
    animation: columnHighlight 0.7s ease-out forwards;
}

/* Row highlight sweep */
@keyframes rowHighlight {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }
    20% {
        opacity: 0.6;
        transform: scaleX(1);
    }
    100% {
        opacity: 0;
        transform: scaleX(1);
    }
}

.row-highlight {
    animation: rowHighlight 0.7s ease-out forwards;
}

/* Target cell pulse (Tier 2) */
@keyframes targetPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--accent-primary);
        background-color: transparent;
    }
    50% {
        box-shadow: 0 0 30px 15px var(--accent-primary);
        background-color: rgba(0, 255, 170, 0.3);
    }
}

.target-pulse {
    animation: targetPulse 0.5s ease-in-out;
}

/* ============================================
   Hint Banner Animations
   ============================================ */

/* Hint appear */
@keyframes hintAppear {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05);
    }
    30% {
        transform: translate(-50%, -50%) scale(1);
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.hint-appear {
    animation: hintAppear 1.5s ease-out forwards;
}

/* Direction arrow bounce */
@keyframes arrowBounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

.arrow-bounce-right {
    animation: arrowBounce 0.3s ease-in-out infinite;
}

.arrow-bounce-left {
    animation: arrowBounce 0.3s ease-in-out infinite reverse;
}

@keyframes arrowBounceV {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

.arrow-bounce-down {
    animation: arrowBounceV 0.3s ease-in-out infinite;
}

.arrow-bounce-up {
    animation: arrowBounceV 0.3s ease-in-out infinite reverse;
}

/* ============================================
   Results & Summary Animations
   ============================================ */

/* Results card appear */
@keyframes resultsAppear {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.results-appear {
    animation: resultsAppear 0.4s ease-out;
}

/* Stat counter animation */
@keyframes countUp {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.result-item:nth-child(1) { animation: countUp 0.3s ease-out 0.1s both; }
.result-item:nth-child(2) { animation: countUp 0.3s ease-out 0.2s both; }
.result-item:nth-child(3) { animation: countUp 0.3s ease-out 0.3s both; }
.result-item:nth-child(4) { animation: countUp 0.3s ease-out 0.4s both; }
.result-item:nth-child(5) { animation: countUp 0.3s ease-out 0.5s both; }

/* New record celebration */
@keyframes rainbow {
    0% { color: #ff0000; text-shadow: 0 0 10px #ff0000; }
    14% { color: #ff7f00; text-shadow: 0 0 10px #ff7f00; }
    28% { color: #ffff00; text-shadow: 0 0 10px #ffff00; }
    42% { color: #00ff00; text-shadow: 0 0 10px #00ff00; }
    57% { color: #0000ff; text-shadow: 0 0 10px #0000ff; }
    71% { color: #4b0082; text-shadow: 0 0 10px #4b0082; }
    85% { color: #9400d3; text-shadow: 0 0 10px #9400d3; }
    100% { color: #ff0000; text-shadow: 0 0 10px #ff0000; }
}

/* Stage complete celebration */
@keyframes celebrate {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.05) rotate(-2deg);
    }
    75% {
        transform: scale(1.05) rotate(2deg);
    }
}

.celebrate {
    animation: celebrate 0.5s ease-in-out infinite;
}

/* ============================================
   Transition Animations
   ============================================ */

/* Screen transition */
@keyframes screenTransition {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0;
        transform: scale(0.95);
    }
    51% {
        opacity: 0;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.screen-transition {
    animation: screenTransition 0.4s ease-in-out;
}

/* Stage transition wipe */
@keyframes stageWipe {
    0% {
        clip-path: inset(0 100% 0 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}

.stage-wipe {
    animation: stageWipe 0.5s ease-out forwards;
}

/* ============================================
   Particle Effects (Canvas-assisted)
   ============================================ */

/* Pixel explosion */
@keyframes pixelExplode {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

.pixel-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    pointer-events: none;
    animation: pixelExplode 0.6s ease-out forwards;
}

/* Sparkle effect */
@keyframes sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(180deg);
    }
}

.sparkle {
    animation: sparkle 0.6s ease-in-out;
}

/* ============================================
   Loading & Waiting
   ============================================ */

/* Loading dots */
@keyframes loadingDots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

.loading::after {
    content: '.';
    animation: loadingDots 1.5s steps(1) infinite;
}

/* Countdown pulse */
@keyframes countdownPulse {
    0% {
        transform: scale(2);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.countdown-pulse {
    animation: countdownPulse 1s ease-out;
}

/* Blink cursor */
@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.blink {
    animation: blink 1s step-end infinite;
}

/* Breathing glow */
@keyframes breathe {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

.breathe {
    animation: breathe 2s ease-in-out infinite;
}