@layer components {
    .fade-up {
        @apply opacity-0 translate-y-5 transition-all duration-600 ease-out;
    }

    .fade-up.is-visible {
        @apply opacity-100 translate-y-0;
    }

    .fade-left {
        @apply opacity-0 -translate-x-5 transition-all duration-600 ease-out;
    }

    .fade-left.is-visible {
        @apply opacity-100 translate-x-0;
    }

    .fade-right {
        @apply opacity-0 translate-x-5 transition-all duration-600 ease-out;
    }

    .fade-right.is-visible {
        @apply opacity-100 translate-x-0;
    }

    .scale-up {
        @apply opacity-0 scale-90 transition-all duration-600 ease-out;
    }

    .scale-up.is-visible {
        @apply opacity-100 scale-100;
    }
}

/* Animation Classes */
.animate-fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease-in-out;
}

.animate-fade-up.active {
    opacity: 1;
    transform: translateY(0);
}

.animate-fade-right {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 1s ease-in-out;
}

.animate-fade-right.active {
    opacity: 1;
    transform: translateX(0);
}

.animate-fade-left {
    opacity: 0;
    transform: translateX(20px);
    transition: all 1s ease-in-out;
}

.animate-fade-left.active {
    opacity: 1;
    transform: translateX(0);
}

.animate-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: all 1s ease-in-out;
}

.animate-scale.active {
    opacity: 1;
    transform: scale(1);
}

/* Animation Delays */
.delay-200 {
    transition-delay: 200ms;
}

.delay-400 {
    transition-delay: 400ms;
}

.delay-600 {
    transition-delay: 600ms;
}

.delay-800 {
    transition-delay: 800ms;
}

.delay-1000 {
    transition-delay: 1000ms;
}

/* Animation Durations */
.duration-500 {
    transition-duration: 500ms;
}

.duration-1000 {
    transition-duration: 1000ms;
}

.duration-1500 {
    transition-duration: 1500ms;
}

/* Animation Easing */
.ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.ease-in {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}