/* ========================================
   Shadowing App - Animations
   ======================================== */

/* Slide in from right (toast) */
@keyframes toastSlideIn {
    from {
        transform: translateX(100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toastSlideOut {
    to {
        transform: translateX(100px);
        opacity: 0;
    }
}

/* Shimmer (skeleton loader) */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

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

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

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

/* Fade in scale */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Slide in from left */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

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

/* Recording pulse */
@keyframes recordPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(225, 112, 85, 0.6);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(225, 112, 85, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(225, 112, 85, 0);
    }
}

/* Score count up */
@keyframes countUp {
    from { opacity: 0; transform: scale(0.5); }
    50% { transform: scale(1.1); }
    to { opacity: 1; transform: scale(1); }
}

/* Bounce in */
@keyframes bounceIn {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.15); }
    70% { transform: scale(0.95); }
    100% { transform: scale(1); opacity: 1; }
}

/* Glow pulse */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(108, 92, 231, 0.2);
    }
    50% {
        box-shadow: 0 0 40px rgba(108, 92, 231, 0.4);
    }
}

/* Progress fill animation */
@keyframes progressFill {
    from { width: 0; }
}

/* Waveform animation */
@keyframes waveform {
    0%, 100% { height: 4px; }
    50% { height: 100%; }
}

/* Confetti burst */
@keyframes confetti {
    0% {
        transform: translateY(0) rotateZ(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-200px) rotateZ(720deg);
        opacity: 0;
    }
}

/* Step unlock animation */
@keyframes stepUnlock {
    0% { transform: scale(1); }
    30% { transform: scale(1.2); }
    60% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

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

/* Animation utility classes */
.animate-fade-in {
    animation: fadeIn var(--transition-base) forwards;
}

.animate-fade-in-up {
    animation: fadeInUp var(--transition-slow) forwards;
}

.animate-slide-in-left {
    animation: slideInLeft var(--transition-slow) forwards;
}

.animate-slide-in-right {
    animation: slideInRight var(--transition-slow) forwards;
}

.animate-bounce-in {
    animation: bounceIn var(--transition-spring) forwards;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* Stagger children animations */
.stagger-children > * {
    opacity: 0;
    animation: fadeInUp var(--transition-slow) forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 80ms; }
.stagger-children > *:nth-child(3) { animation-delay: 160ms; }
.stagger-children > *:nth-child(4) { animation-delay: 240ms; }
.stagger-children > *:nth-child(5) { animation-delay: 320ms; }
.stagger-children > *:nth-child(6) { animation-delay: 400ms; }
.stagger-children > *:nth-child(7) { animation-delay: 480ms; }
.stagger-children > *:nth-child(8) { animation-delay: 560ms; }
.stagger-children > *:nth-child(9) { animation-delay: 640ms; }
.stagger-children > *:nth-child(10) { animation-delay: 720ms; }

/* View transition */
.view-enter {
    animation: fadeInUp 400ms ease forwards;
}

.view-exit {
    animation: fadeIn 200ms ease reverse forwards;
}