body,html{margin:0;padding:0;background:#000;color:#ddd;font-family:system-ui,sans-serif}.hero{position:relative;height:200vh}.hero__stage{position:-webkit-sticky;position:sticky;top:0;height:100vh;overflow:hidden;background:#000}.hero__canvas,.hero__poster{position:absolute;inset:0;width:100%;height:100%;display:block}.hero__poster{object-fit:cover}.hero__canvas{visibility:hidden}.hero[data-state=ready] .hero__canvas{visibility:visible}.hero[data-state=ready] .hero__poster{visibility:hidden}@media (max-width:767px),(prefers-reduced-motion:reduce){.hero{height:100vh}.hero[data-state=ready] .hero__canvas,.hero__canvas{display:none}.hero[data-state=ready] .hero__poster{visibility:visible}}.test-section{height:100vh;display:grid;place-items:center;border-top:1px dashed #444}