/* Aescrafy — scroll interaction layer styles. * Rule: nothing here may move an element from its Tahap-1 position at rest. * Any animation start-state is applied by JS (scroll-fx.js), never here, so that * with JS disabled the page renders exactly like Tahap 1. * * (Effect-specific rules are added here as each effect is built.) */ /* Correctness fix, not a new effect — present with or without JS. * styles.css (verbatim Tahap-1 copy) sets `html,body{overflow-x:hidden}` with * no overflow-y. Per the CSS spec, an explicit non-visible overflow-x paired * with an implicit/visible overflow-y forces the visible axis to compute as * `auto` too — turning into its own scroll container. (Explicitly * setting overflow-y:visible here doesn't escape this — spec forces visible * to auto regardless of how it got set.) The original design never surfaced * this because its own tooling already gave an explicit height + its * own internal scroll; here, on a normal document-scrolling page, it silently * broke the header's position:sticky (it stuck to 's scroll frame * instead of the viewport's). `overflow-x: clip` gives the same edge-clipping * as `hidden` without ever forming a scroll container, so it doesn't trigger * the auto-promotion. Zero visual difference at rest — only fixes scroll * behavior. */ html, body { overflow-x: clip; } /* Effect 2 — section reveal. * `js-rvl-init` is added on by a tiny blocking inline script in , * and ONLY when JS actually runs (so with JS off, this never matches — sections * stay visible via their baked .rvl-in class, identical to Tahap 1). * scroll-fx.js is responsible for removing `js-rvl-init` again if GSAP/ScrollTrigger * fail to initialize, so a section can never get stuck invisible. */ html.js-rvl-init [data-rvl].rvl-in { opacity: 0; transform: translateY(22px); }