/* ============================================
   SPEKIT SPRINT — Animations
   ============================================ */

/* ── Speki Breathing ── */
@keyframes spekiBreath {
    0%, 100% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.03) translateY(-2px); }
}

@keyframes spekiFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-6px) rotate(1deg); }
    75% { transform: translateY(4px) rotate(-1deg); }
}

/* ── Falling Items ── */
@keyframes itemFall {
    from { transform: translateY(-100px) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    to { transform: translateY(100vh) rotate(20deg); opacity: 0.5; }
}

@keyframes itemGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(236, 0, 140, 0.3); }
    50% { box-shadow: 0 0 25px rgba(236, 0, 140, 0.6); }
}

@keyframes badItemGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(231, 76, 60, 0.3); }
    50% { box-shadow: 0 0 25px rgba(231, 76, 60, 0.6); }
}

/* ── Score Pop ── */
@keyframes scorePop {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    50% { transform: translateY(-40px) scale(1.3); opacity: 0.8; }
    100% { transform: translateY(-80px) scale(0.8); opacity: 0; }
}

@keyframes scorePopNegative {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    30% { transform: translateY(-10px) scale(1.4); opacity: 1; }
    100% { transform: translateY(-60px) scale(0.6); opacity: 0; }
}

/* ── Combo Banner ── */
@keyframes comboSlam {
    0% { transform: scale(0) rotate(-10deg); opacity: 0; }
    50% { transform: scale(1.2) rotate(2deg); opacity: 1; }
    70% { transform: scale(0.95) rotate(-1deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes comboFade {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.1) translateY(-20px); }
}

/* ── Screen Transitions ── */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

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

@keyframes slideInLeft {
    from { transform: translateX(-80px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
    from { transform: translateX(80px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes scaleIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes scaleInBounce {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.1); opacity: 1; }
    80% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* ── Stage Transition Flash ── */
@keyframes stageFlash {
    0% { opacity: 0; backdrop-filter: blur(0px); }
    20% { opacity: 1; backdrop-filter: blur(8px); }
    80% { opacity: 1; backdrop-filter: blur(8px); }
    100% { opacity: 0; backdrop-filter: blur(0px); }
}

@keyframes stageTextSlam {
    0% { transform: scale(3) rotate(-5deg); opacity: 0; }
    40% { transform: scale(1) rotate(1deg); opacity: 1; }
    60% { transform: scale(1.05) rotate(-0.5deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ── Background Particles ── */
@keyframes particleDrift {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    20% { opacity: 0.6; }
    80% { opacity: 0.6; }
    100% { transform: translateY(-100vh) translateX(50px); opacity: 0; }
}

@keyframes particlePulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.5); }
}

/* ── Power-Up ── */
@keyframes powerUpActivate {
    0% { transform: scale(1); filter: brightness(1); }
    25% { transform: scale(1.15); filter: brightness(1.5) hue-rotate(10deg); }
    50% { transform: scale(1.05); filter: brightness(1.3); }
    75% { transform: scale(1.1); filter: brightness(1.4) hue-rotate(-5deg); }
    100% { transform: scale(1); filter: brightness(1); }
}

@keyframes powerUpGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.3), inset 0 0 15px rgba(255, 215, 0, 0.1); }
    50% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.7), inset 0 0 25px rgba(255, 215, 0, 0.2); }
}

@keyframes rainbowBorder {
    0% { border-color: #EC008C; }
    25% { border-color: #FFD700; }
    50% { border-color: #50C878; }
    75% { border-color: #4DA6FF; }
    100% { border-color: #EC008C; }
}

/* ── Shake (hit bad item) ── */
@keyframes screenShake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-8px); }
    20% { transform: translateX(8px); }
    30% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    50% { transform: translateX(-4px); }
    60% { transform: translateX(4px); }
    70% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}

/* ── Leaderboard Entry ── */
@keyframes leaderboardRowIn {
    from { transform: translateX(-30px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes leaderboardHighlight {
    0%, 100% { background: rgba(236, 0, 140, 0.1); }
    50% { background: rgba(236, 0, 140, 0.25); }
}

/* ── Logo Spin ── */
@keyframes logoSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── Pulse Ring ── */
@keyframes pulseRing {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}

/* ── Count Down ── */
@keyframes countdownPop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes countdownFade {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}

/* ── Utility Classes ── */
.animate-fade-in { animation: fadeIn 0.5s var(--ease-out) forwards; }
.animate-fade-out { animation: fadeOut 0.5s var(--ease-out) forwards; }
.animate-slide-up { animation: slideUp 0.6s var(--ease-spring) forwards; }
.animate-slide-down { animation: slideDown 0.6s var(--ease-spring) forwards; }
.animate-scale-in { animation: scaleIn 0.4s var(--ease-spring) forwards; }
.animate-scale-bounce { animation: scaleInBounce 0.6s var(--ease-out) forwards; }

.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }
.animate-delay-5 { animation-delay: 0.5s; }