/* ===================================
   Animations & Keyframes
   =================================== */

/* Slide-in animation from left */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: perspective(1200px) translateX(-150px);
    }
    to {
        opacity: 1;
        transform: perspective(1200px) translateX(0);
    }
}

/* Rotating border gradient */
@keyframes rotateBorder {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

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

/* Counter counting animation (handled via JS) */
@keyframes countUp {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

/* Slide-in animations with delays */
.animate-slide-in {
    opacity: 0;
    transform: perspective(1200px) translateX(-150px);
}

.animate-slide-in.animated {
    animation: slideInLeft 0.8s ease-out forwards;
}

.animate-slide-in[data-delay="0"].animated {
    animation-delay: 0ms;
}

.animate-slide-in[data-delay="100"].animated {
    animation-delay: 100ms;
}

.animate-slide-in[data-delay="200"].animated {
    animation-delay: 200ms;
}

.animate-slide-in[data-delay="300"].animated {
    animation-delay: 300ms;
}

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

    .animate-slide-in {
        opacity: 1;
        transform: none;
    }

    .btn__border {
        animation: none;
    }
}