/* Mobile-first, full-viewport section scroll-snapping. Inert until assets/scroll-snap.js adds html.snap-on (only after a `(max-width:1023px) and (pointer:coarse)` gate) and tags each collected section with .snap-sect (the first with .snap-hero). Snap is `proximity`, never `mandatory`, so variable-height and long-form content is never trapped. The fixed 68px .ath-bar is offset with scroll-padding-top + scroll-margin-top (the codebase had neither). CSP-clean. */ html.snap-on { scroll-snap-type: y proximity; scroll-padding-top: 68px; overscroll-behavior-y: contain; } /* Every collected section is a snap point, flush under the fixed header. */ html.snap-on .snap-sect { scroll-snap-align: start; scroll-snap-stop: normal; /* never `always` — a long section must let momentum pass */ scroll-margin-top: 68px; } /* The hero fills the first screen minus the header. min-height (never fixed height) lets a tall hero grow and over-scroll instead of clipping. dvh tracks the mobile URL-bar like the drawer. */ html.snap-on .snap-hero { min-height: calc(100dvh - 68px); } /* Section-entry micro-animation. JS only toggles .snap-enter; all motion is declarative here. The pre-reveal state is gated on .snap-sect, which only exists once JS has run + gated, so a no-JS / desktop / reduced-motion visitor never sees hidden content. */ html.snap-on .snap-sect { opacity: 0.001; transform: translateY(26px); transition: opacity 0.6s cubic-bezier(0.16, 0.84, 0.44, 1), transform 0.6s cubic-bezier(0.16, 0.84, 0.44, 1); will-change: opacity, transform; } html.snap-on .snap-sect.snap-enter { opacity: 1 !important; transform: none !important; } /* Sticky section-dot indicator. Built by the controller and appended to (outside #dc-root) so React reconcile can never drop it. Shown only on narrow touch viewports. */ .snap-dots { position: fixed; right: 12px; top: 50%; transform: translateY(-50%); z-index: 48; display: none; flex-direction: column; gap: 11px; padding: 9px 7px; border-radius: 30px; background: rgba(5, 8, 13, 0.42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(62, 224, 240, 0.16); } .snap-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer; border: 1px solid rgba(195, 205, 224, 0.5); background: transparent; transition: transform 0.25s, background 0.25s, border-color 0.25s; } .snap-dots button[aria-current="true"] { background: #3EE0F0; border-color: #3EE0F0; transform: scale(1.45); box-shadow: 0 0 10px rgba(62, 224, 240, 0.6); } @media (max-width: 1023px) and (pointer: coarse) { html.snap-on .snap-dots { display: flex; } } /* Desktop / mouse kill-switch: even if snap-on is somehow present, neutralise everything. */ @media (min-width: 1024px), (pointer: fine) { html.snap-on { scroll-snap-type: none; } html.snap-on .snap-sect { opacity: 1; transform: none; transition: none; } .snap-dots { display: none !important; } } /* Reduced motion: snap-points stay structurally, but nothing is forced or animated. */ @media (prefers-reduced-motion: reduce) { html.snap-on { scroll-snap-type: none; scroll-behavior: auto; } html.snap-on .snap-sect { opacity: 1; transform: none; transition: none; } }