/* Keyframe Animations */

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

/* Helper Animation Classes */
.animate-fade-up {
    opacity: 0;
    animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-down {
    opacity: 0;
    animation: fadeInDown 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-left {
    opacity: 0;
    animation: fadeInLeft 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-right {
    opacity: 0;
    animation: fadeInRight 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Delay Classes */
.delay-1 {
    animation-delay: 0.1s;
}

.delay-2 {
    animation-delay: 0.2s;
}

.delay-3 {
    animation-delay: 0.3s;
}

.delay-4 {
    animation-delay: 0.4s;
}

.delay-5 {
    animation-delay: 0.5s;
}

/* Card Hover Animation */
.card-hover-tilt {
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.card-hover-tilt:hover {
    transform: perspective(1000px) rotateX(2deg) rotateY(2deg) scale3d(1.02, 1.02, 1.02);
}