/* Frame Scroll Deck — base styles for section-to-section transitions. Transforms/opacity are driven by frame-scroll-deck.js; this file owns the optional full-screen + scroll-snap layout and the reduced-motion reset. */ /* Snap container is opted-in per page (the runtime / theme adds .frame-deck-on to when at least one full-screen slide exists). Proximity (not mandatory) so tall/interactive slides never trap the scroll. */ html.frame-deck-on { scroll-snap-type: y proximity; } /* Scale-based transitions (dissolve / zoom-in) keep scale >= 1 so a full-screen slide never shrinks below the viewport and shows an edge gap. The >1 overflow is absorbed here — overflow-x:clip stops any horizontal scrollbar without creating a scroll container (so position:fixed header + sticky map controls are unaffected, unlike overflow:hidden). */ html.frame-deck-on { overflow-x: clip; } /* A slide that is also full-screen: fill the viewport + snap + center content. */ [data-frame-deck-slide][data-frame-deck-fullscreen] { min-height: 100svh; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; } /* The transform target gets compositor hints from the JS; nothing needed here, but keep slides from leaking their transition transform outside their box. */ [data-frame-deck-slide] { position: relative; } /* ---- Stage mode: true one-at-a-time crossfade deck ---- */ /* Every stage slide is laid out full-viewport with its content centered. */ [data-frame-deck-stage-slide] { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; } /* Once the engine activates, slides are co-located (fixed, stacked in place) and a .frame-deck-proxy spacer (in normal flow) carries the scroll length. */ html.frame-deck-staged { overflow-x: clip; } .frame-deck-fixed { position: fixed !important; inset: 0 !important; height: 100svh !important; margin: 0 !important; contain: layout paint; } .frame-deck-proxy { width: 100%; pointer-events: none; flex: none; } /* The proxy cells are just scroll-length spacers now. NO scroll-snap — every snap variant either fought the wheel or trapped it. Instead the crossfade is sharp (frame-scroll-deck.js) so any rest position shows one dominant section. */ .frame-deck-snap { width: 100%; pointer-events: none; } /* A stage slide holding the interactive map must let it fill, not center it. */ .frame-deck-fixed.frame-scene, .frame-deck-fixed.frame-w { justify-content: stretch; } .frame-deck-fixed .mtb-map-shell, .frame-deck-fixed .maplibregl-map, .frame-deck-fixed .mtb-map-canvas { height: 100% !important; min-height: 100svh !important; } @media (prefers-reduced-motion: reduce) { html.frame-deck-on { scroll-snap-type: none; } [data-frame-deck-slide], [data-frame-deck-slide] > * { transform: none !important; filter: none !important; opacity: 1 !important; } /* Stage slides STAY co-located (fixed) under reduced motion — the engine hard-cuts between them. Forcing position:relative here is what collapsed the deck into a stacked, bleeding mess. */ }