.scroll-stack-scroller { position: relative; width: 100%; height: 100%; overflow-y: auto; overflow-x: visible; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; -webkit-transform: translateZ(0); transform: translateZ(0); will-change: scroll-position; } .scroll-stack-inner { padding: 0; min-height: 100vh; } .scroll-stack-card-wrapper { position: relative; } .scroll-stack-card { transform-origin: top center; will-change: transform; backface-visibility: hidden; transform-style: flat; box-shadow: none; min-height: 100vh; width: 100%; margin: 0; padding: 0; border-radius: 0; box-sizing: border-box; -webkit-transform: translateZ(0); transform: translateZ(0); position: relative; overflow: hidden; contain: layout style paint; isolation: isolate; } .scroll-stack-end { width: 100%; height: 200px; } /* Mobile optimizations */ @media (max-width: 768px) { .scroll-stack-scroller { -webkit-overflow-scrolling: touch; scroll-snap-type: y proximity; } .scroll-stack-card { will-change: auto; transform-style: flat; box-shadow: none; scroll-snap-align: start; } .scroll-stack-end { height: 100px; } } /* Tablet optimizations */ @media (min-width: 769px) and (max-width: 1024px) { .scroll-stack-card { box-shadow: none; } .scroll-stack-end { height: 150px; } } /* Desktop enhancements */ @media (min-width: 1025px) { .scroll-stack-card { will-change: transform; box-shadow: none; } .scroll-stack-end { height: 300px; } } /* Performance optimization for reduced motion */ @media (prefers-reduced-motion: reduce) { .scroll-stack-scroller { scroll-behavior: auto; } .scroll-stack-card { will-change: auto; transform: none !important; filter: none !important; } } /* High contrast mode support */ @media (prefers-contrast: high) { .scroll-stack-card { box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.1); } }