@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-30px);
        -webkit-transform: translateY(-30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        -webkit-transform: translateY(0);
    }
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
        -webkit-transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        -webkit-transform: translateY(0);
    }
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(30px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

.animate-fade-in-down {
    animation: fadeInDown 0.8s ease-out forwards;
    -webkit-animation: fadeInDown 0.8s ease-out forwards;
    will-change: opacity, transform;
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out 0.3s forwards;
    -webkit-animation: fadeInUp 0.8s ease-out 0.3s forwards;
    opacity: 0;
    will-change: opacity, transform;
}

.scroll-reveal {
    opacity: 0;
    transform: translateY(50px);
    -webkit-transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    -webkit-transition: opacity 0.8s ease-out, -webkit-transform 0.8s ease-out;
    will-change: opacity, transform;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
}

/* Mobile and Tablet Optimizations */
@media (max-width: 1024px) {
    .scroll-reveal {
        opacity: 0;
        transform: translateY(30px);
        -webkit-transform: translateY(30px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        -webkit-transition: opacity 0.6s ease-out, -webkit-transform 0.6s ease-out;
    }
    
    .scroll-reveal.revealed {
        opacity: 1;
        transform: translateY(0);
        -webkit-transform: translateY(0);
    }
}

.hover\:shadow-3xl:hover {
    box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.3);
}