/**
 * EverSolutions Animation Styles
 */

html[animations] [data-animation] {
    opacity: 0;
    transition: none;
}

html[animations] [data-animation].animation-active {
    animation: fadeTransform 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
    animation-delay: var(--animation-delay, 0ms);
}

html[animations] [data-animation].animation-complete {
    opacity: 1;
    animation: none;
}

@keyframes fadeTransform {
    from {
        opacity: 0;
        transform: translate(var(--anim-x, 0), var(--anim-y, 0)) scale(var(--anim-scale, 1));
    }
    to {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

html[animations] .animation-fade-in {
    --anim-x: 0;
    --anim-y: 0;
}

html[animations] .animation-fade-up {
    --anim-x: 0;
    --anim-y: 30px;
}

html[animations] .animation-fade-down {
    --anim-x: 0;
    --anim-y: -30px;
}

html[animations] .animation-fade-left {
    --anim-x: 30px;
    --anim-y: 0;
}

html[animations] .animation-fade-right {
    --anim-x: -30px;
    --anim-y: 0;
}

html[animations] .animation-scale-in {
    --anim-x: 0;
    --anim-y: 0;
    --anim-scale: 0.95;
}

html[animations] .animation-slide-up {
    --anim-x: 0;
    --anim-y: 50px;
}

/* Performance optimizations */
html[animations] [data-animation] {
    will-change: opacity, transform;
}

html[animations] [data-animation].animation-complete {
    will-change: auto;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    html[animations] [data-animation] {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
    }
}