/*
 * Animations CSS
 * Reusable animation keyframes used across the application
 * Version: 1.0
 */

/* ===== 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(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

/* ===== Scale Animations ===== */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

@keyframes scaleOut {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(0);
    }
}

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

/* ===== Slide Animations ===== */
@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===== Float Animations ===== */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes floatGentle {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-6px);
    }
}

@keyframes floatHorizontal {
    0%, 100% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(10px);
    }
}

/* ===== Rotate Animations ===== */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateReverse {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

/* ===== Shake Animations ===== */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

@keyframes shakeVertical {
    0%, 100% {
        transform: translateY(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateY(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateY(5px);
    }
}

/* ===== Shimmer Animation ===== */
@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

@keyframes shimmerGlow {
    0%, 100% {
        box-shadow: 0 0 10px color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
    }
    50% {
        box-shadow: 0 0 20px color-mix(in srgb, var(--mud-palette-primary) 60%, transparent);
    }
}

/* ===== Bounce Animations ===== */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* ===== Glow Animation ===== */
@keyframes glow {
    0%, 100% {
        filter: drop-shadow(0 0 5px color-mix(in srgb, var(--mud-palette-primary) 50%, transparent));
    }
    50% {
        filter: drop-shadow(0 0 15px color-mix(in srgb, var(--mud-palette-primary) 80%, transparent));
    }
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 10px color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
    }
    50% {
        box-shadow: 0 0 25px color-mix(in srgb, var(--mud-palette-primary) 80%, transparent);
    }
}

/* ===== Flip Animations ===== */
@keyframes flipInX {
    from {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    to {
        transform: perspective(400px) rotateX(0);
        opacity: 1;
    }
}

@keyframes flipInY {
    from {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    to {
        transform: perspective(400px) rotateY(0);
        opacity: 1;
    }
}

/* ===== Loading Animations ===== */
@keyframes loadingDots {
    0%, 80%, 100% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
}

@keyframes progressIndeterminate {
    0% {
        left: -35%;
        right: 100%;
    }
    60%, 100% {
        left: 100%;
        right: -90%;
    }
}

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

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

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

.animate-float {
    animation: float 3s ease-in-out infinite;
}

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

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

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

.animate-rotate {
    animation: rotate 2s linear infinite;
}

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

/* ===== Delay Utilities ===== */
.animate-delay-100 {
    animation-delay: 0.1s;
}

.animate-delay-200 {
    animation-delay: 0.2s;
}

.animate-delay-300 {
    animation-delay: 0.3s;
}

.animate-delay-500 {
    animation-delay: 0.5s;
}

.animate-delay-1000 {
    animation-delay: 1s;
}

/* ===== Duration Utilities ===== */
.animate-fast {
    animation-duration: 0.2s;
}

.animate-normal {
    animation-duration: 0.3s;
}

.animate-slow {
    animation-duration: 0.5s;
}

.animate-slower {
    animation-duration: 1s;
}