/* Guard against horizontal overflow from full-bleed sections. The hero, trust band, and testimonials break out of the layout container with `width: 100vw`, but 100vw includes the vertical scrollbar gutter — so they overshoot the visible viewport by the scrollbar width and trigger a page-wide horizontal scroll that clips centred content on the right. `overflow-x: clip` neutralises the overshoot without creating a scroll container (unlike `hidden`), so it stays compatible with Lenis and sticky. */ html { overflow-x: clip; } /* Lenis smooth scroll */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-scrolling iframe { pointer-events: none; } /* Reveal initial states — gated on html.rx-js (set by a blocking inline script at the top of , before first paint) rather than a per-element class a deferred script adds after DOMContentLoaded. The old approach painted content visible, then snapped it to opacity:0 once the deferred script ran, then GSAP faded it back in — a visible "flash" on anything already in the initial viewport (e.g. blog grid cards). Gating on the early html class means matching elements start hidden from the very first frame; GSAP's .from() tween then takes over exactly as before. Bigger travel + a blur-to-focus give the reveal real presence (not a timid fade). These mirror the GSAP "from" values in rocketx.js to avoid a flash before the tween captures the natural style. */ html.rx-js .rx-reveal, html.rx-js .rx-reveal-up { opacity: 0; transform: translateY(48px); filter: blur(8px); } html.rx-js .rx-reveal-down { opacity: 0; transform: translateY(-48px); filter: blur(8px); } html.rx-js .rx-reveal-left { opacity: 0; transform: translateX(-56px); filter: blur(6px); } html.rx-js .rx-reveal-right { opacity: 0; transform: translateX(56px); filter: blur(6px); } html.rx-js .rx-reveal-scale { opacity: 0; transform: scale(0.9); filter: blur(8px); } html.rx-js .rx-reveal-fade { opacity: 0; filter: blur(8px); } /* Stagger children — parent gets .rx-stagger, direct children animate */ html.rx-js .rx-stagger > * { opacity: 0; transform: translateY(34px); filter: blur(6px); } /* Reduced motion — undo all initial states, kill smooth scroll */ @media (prefers-reduced-motion: reduce) { .rx-reveal, .rx-reveal-up, .rx-reveal-down, .rx-reveal-left, .rx-reveal-right, .rx-reveal-scale, .rx-reveal-fade, .rx-stagger > * { opacity: 1 !important; transform: none !important; filter: none !important; } }