/**
 * Y-Scroll Animation Styles
 * Basic styles for vertical scrolling animation
 * 
 * Structure:
 * - Parent of .y-scroll-animation = viewport (overflow hidden, fixed height)
 * - .y-scroll-animation = animated element (gets transformed)
 * - Children = content items
 */

/* The parent element serves as the viewport - style it with height/overflow */
.y-scroll-animation,
.desktop-y-scroll-animation {
    position: relative;
    /* GPU acceleration - applied by JS but can be set here too */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Optional: Smooth rendering */
.y-scroll-animation *,
.desktop-y-scroll-animation * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Optional: Custom speed variations via classes */
.y-scroll-animation.speed-slow,
.desktop-y-scroll-animation.speed-slow {
    --scroll-speed: 0.5;
}

.y-scroll-animation.speed-normal,
.desktop-y-scroll-animation.speed-normal {
    --scroll-speed: 1;
}

.y-scroll-animation.speed-fast,
.desktop-y-scroll-animation.speed-fast {
    --scroll-speed: 2;
}

.y-scroll-animation.speed-very-fast,
.desktop-y-scroll-animation.speed-very-fast {
    --scroll-speed: 4;
}

/* Prevent layout shifts during initialization */
.y-scroll-animation.initializing,
.desktop-y-scroll-animation.initializing {
    visibility: hidden;
}

.y-scroll-animation:not(.initializing),
.desktop-y-scroll-animation:not(.initializing) {
    visibility: visible;
}