/**
 * Mutewind Animations CSS
 * Lightweight CSS animations for WordPress
 */

/* ===================================
   Base Animation States
   =================================== */

.animate-in-left,
.animate-in-right,
.animate-in-up,
.animate-in-down,
.fadeIn,
.scaleIn,
.rotateIn,
.zoom-in,
.zoom-in-left,
.zoom-in-right,
.zoom-in-up,
.zoom-in-down,
.slide-in-left,
.slide-in-right,
.slide-in-up,
.slide-in-down {
    opacity: 0;
    transform: translateY(0);
}

/* ===================================
   Keyframe Definitions
   =================================== */

/* Directional Animations */
@keyframes fadeInLeftCustom {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

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

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

/* Basic Effect Animations */
@keyframes fadeInCustom {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

@keyframes rotateInCustom {
    from {
        opacity: 0;
        transform: rotate(-10deg);
    }
    to {
        opacity: 1;
        transform: rotate(0);
    }
}

/* Bounce In Animation */
@keyframes bounceInCustom {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Slide and Fade */
@keyframes slideInUpCustom {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Zoom In Animations */
@keyframes zoomInCustom {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomInLeftCustom {
    from {
        opacity: 0;
        transform: scale(0.8) translateX(-40px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}

@keyframes zoomInRightCustom {
    from {
        opacity: 0;
        transform: scale(0.8) translateX(40px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}

@keyframes zoomInUpCustom {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(40px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes zoomInDownCustom {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-40px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Slide In Animations */
@keyframes slideInLeftCustom {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

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

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

/* ===================================
   Animation Classes (when in view)
   =================================== */

.in-view.animate-in-left {
    animation: fadeInLeftCustom 1s ease-out forwards;
}

.in-view.animate-in-right {
    animation: fadeInRightCustom 1s ease-out forwards;
}

.in-view.animate-in-up {
    animation: fadeInUpCustom 1s ease-out forwards;
}

.in-view.animate-in-down {
    animation: fadeInDownCustom 1s ease-out forwards;
}

.in-view.fadeIn {
    animation: fadeInCustom 1s ease-out forwards;
}

.in-view.scaleIn {
    animation: scaleInCustom 0.8s ease-out forwards;
}

.in-view.rotateIn {
    animation: rotateInCustom 1s ease-out forwards;
}

/* Zoom In Classes */
.in-view.zoom-in {
    animation: zoomInCustom 1s ease-out forwards;
}

.in-view.zoom-in-left {
    animation: zoomInLeftCustom 1s ease-out forwards;
}

.in-view.zoom-in-right {
    animation: zoomInRightCustom 1s ease-out forwards;
}

.in-view.zoom-in-up {
    animation: zoomInUpCustom 1s ease-out forwards;
}

.in-view.zoom-in-down {
    animation: zoomInDownCustom 1s ease-out forwards;
}

/* Slide In Classes */
.in-view.slide-in-left {
    animation: slideInLeftCustom 1s ease-out forwards;
}

.in-view.slide-in-right {
    animation: slideInRightCustom 1s ease-out forwards;
}

.in-view.slide-in-up {
    animation: slideInUpCustom 1s ease-out forwards;
}

.in-view.slide-in-down {
    animation: slideInDownCustom 1s ease-out forwards;
}

/* ===================================
   Animation Duration Modifiers
   =================================== */

.animation-fast {
    animation-duration: 0.5s !important;
}

.animation-slow {
    animation-duration: 1.5s !important;
}

.animation-slower {
    animation-duration: 2s !important;
}

/* ===================================
   Animation Delay Classes
   =================================== */

.animation-delay-100 { animation-delay: 0.1s; }
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-300 { animation-delay: 0.3s; }
.animation-delay-400 { animation-delay: 0.4s; }
.animation-delay-500 { animation-delay: 0.5s; }
.animation-delay-600 { animation-delay: 0.6s; }
.animation-delay-700 { animation-delay: 0.7s; }
.animation-delay-800 { animation-delay: 0.8s; }
.animation-delay-900 { animation-delay: 0.9s; }
.animation-delay-1000 { animation-delay: 1s; }
.animation-delay-1500 { animation-delay: 1.5s; }
.animation-delay-2000 { animation-delay: 2s; }

/* ===================================
   Animation Easing Modifiers
   =================================== */

.animation-ease-in {
    animation-timing-function: ease-in !important;
}

.animation-ease-out {
    animation-timing-function: ease-out !important;
}

.animation-ease-in-out {
    animation-timing-function: ease-in-out !important;
}

.animation-linear {
    animation-timing-function: linear !important;
}

.animation-bounce {
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

/* ===================================
   GSAP Helper Classes
   =================================== */

/* Parallax elements should be positioned */
.parallaxFast,
.parallaxMid,
.parallaxSlow {
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Scale up elements */
.scaleUp {
    will-change: transform, opacity;
}

/* ===================================
   Utility Classes
   =================================== */

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Hidden state for elements before animation */
.animation-hidden {
    opacity: 0;
    visibility: hidden;
}

/* Ensure animations work on mobile */
@media (max-width: 768px) {
    /* Reduce animation distance on mobile for better UX */
    @keyframes fadeInLeftCustom {
        from {
            opacity: 0;
            transform: translateX(-20px);
        }
    }
    
    @keyframes fadeInRightCustom {
        from {
            opacity: 0;
            transform: translateX(20px);
        }
    }
    
    @keyframes fadeInUpCustom {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
    }
    
    @keyframes fadeInDownCustom {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
    }
    
    /* Zoom In mobile versions */
    @keyframes zoomInCustom {
        from {
            opacity: 0;
            transform: scale(0.9);
        }
    }
    
    @keyframes zoomInLeftCustom {
        from {
            opacity: 0;
            transform: scale(0.9) translateX(-20px);
        }
    }
    
    @keyframes zoomInRightCustom {
        from {
            opacity: 0;
            transform: scale(0.9) translateX(20px);
        }
    }
    
    @keyframes zoomInUpCustom {
        from {
            opacity: 0;
            transform: scale(0.9) translateY(20px);
        }
    }
    
    @keyframes zoomInDownCustom {
        from {
            opacity: 0;
            transform: scale(0.9) translateY(-20px);
        }
    }
    
    /* Slide In mobile versions - reduced distance */
    @keyframes slideInLeftCustom {
        from {
            opacity: 0;
            transform: translateX(-50%);
        }
    }
    
    @keyframes slideInRightCustom {
        from {
            opacity: 0;
            transform: translateX(50%);
        }
    }
    
    @keyframes slideInUpCustom {
        from {
            opacity: 0;
            transform: translateY(50%);
        }
    }
    
    @keyframes slideInDownCustom {
        from {
            opacity: 0;
            transform: translateY(-50%);
        }
    }
}