/* Animation System CSS Library - Exported Version */

:root {
    --animation-duration: 600ms;
    --animation-easing: ease-out;
    --animation-speed-multiplier: 1;
    --animation-stagger-delay: 100ms;
    --animations-enabled: 1;
}

/* Base Animation Styles */
.animation-ready {
    opacity: 0;
    transform: translateY(20px);
}

.animation-triggered {
    opacity: 1;
    transform: translateY(0);
    transition: all calc(var(--animation-duration) / var(--animation-speed-multiplier)) var(--animation-easing);
}

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

@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); }
}

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

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

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

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

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

@keyframes scaleInX {
    from { opacity: 0; transform: scaleX(0); }
    to { opacity: 1; transform: scaleX(1); }
}

@keyframes scaleInY {
    from { opacity: 0; transform: scaleY(0); }
    to { opacity: 1; transform: scaleY(1); }
}

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

@keyframes flipIn {
    from { opacity: 0; transform: perspective(400px) rotateY(-90deg); }
    40% { transform: perspective(400px) rotateY(-10deg); }
    70% { transform: perspective(400px) rotateY(10deg); }
    100% { opacity: 1; transform: perspective(400px) rotateY(0deg); }
}

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

/* Animation utility classes */
.animate-fadeIn { animation: fadeIn calc(var(--animation-duration) / var(--animation-speed-multiplier)) var(--animation-easing) forwards; }
.animate-fadeInUp { animation: fadeInUp calc(var(--animation-duration) / var(--animation-speed-multiplier)) var(--animation-easing) forwards; }
.animate-fadeInDown { animation: fadeInDown calc(var(--animation-duration) / var(--animation-speed-multiplier)) var(--animation-easing) forwards; }
.animate-fadeInLeft { animation: fadeInLeft calc(var(--animation-duration) / var(--animation-speed-multiplier)) var(--animation-easing) forwards; }
.animate-fadeInRight { animation: fadeInRight calc(var(--animation-duration) / var(--animation-speed-multiplier)) var(--animation-easing) forwards; }
.animate-slideInLeft { animation: slideInLeft calc(var(--animation-duration) / var(--animation-speed-multiplier)) var(--animation-easing) forwards; }
.animate-slideInRight { animation: slideInRight calc(var(--animation-duration) / var(--animation-speed-multiplier)) var(--animation-easing) forwards; }
.animate-slideInUp { animation: slideInUp calc(var(--animation-duration) / var(--animation-speed-multiplier)) var(--animation-easing) forwards; }
.animate-slideInDown { animation: slideInDown calc(var(--animation-duration) / var(--animation-speed-multiplier)) var(--animation-easing) forwards; }
.animate-scaleIn { animation: scaleIn calc(var(--animation-duration) / var(--animation-speed-multiplier)) var(--animation-easing) forwards; }
.animate-scaleInX { animation: scaleInX calc(var(--animation-duration) / var(--animation-speed-multiplier)) var(--animation-easing) forwards; }
.animate-scaleInY { animation: scaleInY calc(var(--animation-duration) / var(--animation-speed-multiplier)) var(--animation-easing) forwards; }
.animate-bounceIn { animation: bounceIn calc(var(--animation-duration) / var(--animation-speed-multiplier)) var(--animation-easing) forwards; }
.animate-flipIn { animation: flipIn calc(var(--animation-duration) / var(--animation-speed-multiplier)) var(--animation-easing) forwards; }
.animate-rotateIn { animation: rotateIn calc(var(--animation-duration) / var(--animation-speed-multiplier)) var(--animation-easing) forwards; }

/* Responsive behavior */
@media (max-width: 480px) {
    :root {
        --animation-duration: 400ms;
        --animation-stagger-delay: 50ms;
    }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .animate-fadeIn, .animate-fadeInUp, .animate-fadeInDown, .animate-fadeInLeft, .animate-fadeInRight,
    .animate-slideInLeft, .animate-slideInRight, .animate-slideInUp, .animate-slideInDown,
    .animate-scaleIn, .animate-scaleInX, .animate-scaleInY, .animate-bounceIn, .animate-flipIn, .animate-rotateIn {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Performance optimizations */
.animate-fadeIn, .animate-fadeInUp, .animate-fadeInDown, .animate-fadeInLeft, .animate-fadeInRight,
.animate-slideInLeft, .animate-slideInRight, .animate-slideInUp, .animate-slideInDown,
.animate-scaleIn, .animate-scaleInX, .animate-scaleInY, .animate-bounceIn, .animate-flipIn, .animate-rotateIn,
.animation-ready, .animation-triggered {
    will-change: transform, opacity;
    backface-visibility: hidden;
    perspective: 1000px;
}

.animation-complete {
    will-change: auto;
}