/**
 * Animation Styles
 * CSS animations and keyframes
 */

/* ==========================================================================
   Waves Enter Animation
   ========================================================================== */
@keyframes waves-enter {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    66.67% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ==========================================================================
   Working Walk Animation
   ========================================================================== */
@keyframes working-walk {
    0% {
        transform: translateX(0) scaleX(1);
    }
    25% {
        transform: translateX(calc(100vw - 100%)) scaleX(1);
    }
    50% {
        transform: translateX(calc(100vw - 100%)) scaleX(-1);
    }
    75% {
        transform: translateX(0) scaleX(-1);
    }
    100% {
        transform: translateX(0) scaleX(1);
    }
}

/* ==========================================================================
   Worried Walk Animation (Edge to Edge)
   ========================================================================== */
@keyframes worried-walk {
    0% {
        transform: translateX(0) scaleX(1);
    }
    25% {
        transform: translateX(calc(100vw - 100%)) scaleX(1);
    }
    50% {
        transform: translateX(calc(100vw - 100%)) scaleX(-1);
    }
    75% {
        transform: translateX(0) scaleX(-1);
    }
    100% {
        transform: translateX(0) scaleX(1);
    }
}

/* ==========================================================================
   Jukebox Pulse Animation
   ========================================================================== */
@keyframes jukebox-pulse {
    0%, 100% {
        transform: scale(0.95, 0.9);
    }
    50% {
        transform: scale(1, 1);
    }
}

/* ==========================================================================
   You're Back Scale Animation
   ========================================================================== */
@keyframes youreback-scaleY {
    0%, 100% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1.10, 1.05);
    }
}

/* ==========================================================================
   Dancing Sway Animation
   ========================================================================== */
@keyframes dancing-sway {
    0%, 100% {
        transform: translate(-20%, 20px) scaleX(1) scaleY(1);
    }
    25% {
        transform: translate(-20%, 20px) scaleX(-1) scaleY(0.95);
    }
    50% {
        transform: translate(20%, 20px) scaleX(-1) scaleY(1);
    }
    75% {
        transform: translate(20%, 20px) scaleX(1) scaleY(0.95);
    }
}

/* ==========================================================================
   Dancing Walk Animation (Edge to Edge with Dance)
   ========================================================================== */
@keyframes dancing-walk {
    0% {
        transform: translateX(0) scaleX(1) scaleY(1);
    }
    25% {
        transform: translateX(calc(100dvw - 100%)) scaleX(1) scaleY(0.95);
    }
    50% {
        transform: translateX(calc(100dvw - 100%)) scaleX(-1) scaleY(1);
    }
    75% {
        transform: translateX(0) scaleX(-1) scaleY(0.95);
    }
    100% {
        transform: translateX(0) scaleX(1) scaleY(1);
    }
}

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

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

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

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

/* ==========================================================================
   Pulse Animations
   ========================================================================== */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.02);
    }
}

@keyframes pulse-green {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

@keyframes pulse-blue {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* ==========================================================================
   Bounce Animation
   ========================================================================== */
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translateY(0);
    }
    40%, 43% {
        transform: translateY(-30px);
    }
    70% {
        transform: translateY(-15px);
    }
    90% {
        transform: translateY(-4px);
    }
}

/* ==========================================================================
   Utility Animation Classes
   ========================================================================== */
.animate-fadeIn {
    animation: fadeIn 0.3s ease-out forwards;
}

.animate-fadeOut {
    animation: fadeOut 0.3s ease-out forwards;
}

.animate-fadeInUp {
    animation: fadeInUp 0.4s ease-out forwards;
}

.animate-fadeInDown {
    animation: fadeInDown 0.4s ease-out forwards;
}

.animate-pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

.animate-bounce {
    animation: bounce 1s ease infinite;
}

/* ==========================================================================
   Transition Utilities
   ========================================================================== */
.transition-fast {
    transition: all 150ms ease;
}

.transition-normal {
    transition: all 300ms ease;
}

.transition-slow {
    transition: all 500ms ease;
}