/* Scroll Sequence Animations */
.scroll-sequence-section {
    position: relative;
    /* Height will be set inline or via utility classes, e.g., h-[300vh] */
    view-timeline-name: --section-timeline;
}

.sticky-content {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    width: 100%;
    /* Ensure it stays above other content if needed, but z-0 is default */
}

/* Fallback for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .scroll-sequence-section {
        height: auto !important;
        min-height: 100vh;
    }
    .sticky-content {
        position: relative;
        height: auto;
        overflow: visible;
    }
    .anim-image, .anim-headline, .anim-text {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Animation Classes */
/* 
   Logic:
   Image: 0% -> 25% (Scale 0.8->1, Opacity 0->1)
   Headline: 25% -> 50% (Opacity 0->1)
   Text: 50% -> 75% (Opacity 0->1)
*/

.anim-image {
    will-change: transform, opacity;
    backface-visibility: hidden;
    /* 
       Progress 0.0 to 0.25:
       Opacity = progress * 4
       Scale = 0.8 + (progress * 4 * 0.2)
    */
    opacity: clamp(0, var(--progress) * 4, 1);
    transform: scale(clamp(0.8, 0.8 + (var(--progress) * 4 * 0.2), 1));
}

.anim-headline {
    will-change: opacity;
    backface-visibility: hidden;
    /*
       Progress 0.25 to 0.50:
       (progress - 0.25) * 4
    */
    opacity: clamp(0, (var(--progress) - 0.25) * 4, 1);
}

.anim-text {
    will-change: opacity;
    backface-visibility: hidden;
    /*
       Progress 0.50 to 0.75:
       (progress - 0.50) * 4
    */
    opacity: clamp(0, (var(--progress) - 0.50) * 4, 1);
}

/* Velocity-based Blur Effect */
img:not(.no-blur):not([src*="logo"]):not([src*="icon"]) {
    /* Use a short transition to smooth out the updates from JS, 
       but keep it fast enough to feel responsive */
    transition: filter 0.1s linear; 
    will-change: filter;
    /* Apply the blur variable set by JS */
    filter: blur(var(--scroll-blur, 0px));
    /* Optimize rendering */
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Ensure no blur on reduced motion */
@media (prefers-reduced-motion: reduce) {
    img:not(.no-blur):not([src*="logo"]):not([src*="icon"]) {
        filter: none !important;
        transition: none !important;
    }
}