/* Scroll Animations */
.scroll-animate {
    opacity: 0;
    transform: translateY(60px);
    will-change: transform, opacity;
    transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1),
                opacity 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}

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

/* Stagger delays for child elements */
.scroll-animate.stagger > * {
    opacity: 0;
    transform: translateY(40px);
    will-change: transform, opacity;
    transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1),
                opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

.scroll-animate.stagger.visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* Refined stagger delays */
.scroll-animate.stagger > *:nth-child(1) { transition-delay: 0.05s; }
.scroll-animate.stagger > *:nth-child(2) { transition-delay: 0.1s; }
.scroll-animate.stagger > *:nth-child(3) { transition-delay: 0.15s; }
.scroll-animate.stagger > *:nth-child(4) { transition-delay: 0.2s; }

/* Lazy loading animation */
.lazy-image {
    opacity: 0;
    filter: blur(5px);
    will-change: opacity, filter;
    transition: opacity 0.4s ease-out,
                filter 0.4s ease-out;
}

.lazy-image.loaded {
    opacity: 1;
    filter: blur(0);
}

/* Add smooth scroll behavior to html */
html {
    scroll-behavior: smooth;
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}