/* Animation classes */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 900ms cubic-bezier(0.2, 0.8, 0.2, 1), 
                transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

.animate-on-scroll.delay-100 {
    transition-delay: 150ms;
}

.animate-on-scroll.delay-200 {
    transition-delay: 300ms;
}

.animate-on-scroll.delay-300 {
    transition-delay: 450ms;
}

.animate-on-scroll.delay-400 {
    transition-delay: 600ms;
}

.animate-on-scroll.opacity-100 {
    opacity: 1;
    transform: translateY(0);
}

/* Card hover effects */
.card-hover {
    transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
                0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform, box-shadow;
}

.card-hover:hover {
    transform: scale(1.03) translateZ(0);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 
                0 10px 10px -5px rgba(0, 0, 0, 0.06);
}

/* Smooth scrolling for the whole page */
html {
    scroll-behavior: smooth;
}

/* Performance optimizations */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}