/* Landing page styles — motion. * Part of the landing bundle; see landing-base.css for load order and rules. * This file MUST load last: its reduced-motion block is the final override. * * Everything below is decoration. The page above is complete and readable * without a single rule from this file, which is the point: parallax is * never load-bearing for content, navigation, or legibility. * * Three tiers: * 1. No support, no JS -> layers sit at rest. Handled by omission. * 2. Scroll-driven CSS -> this file. Runs on the compositor, no * scroll handler, no main-thread work. * 3. JS fallback -> parallax.js, which disables itself when tier 2 * is available. * * Only `translate` and `opacity` animate. Neither triggers layout, and using * the independent `translate` property rather than `transform` means a layer * can drift without clobbering a `transform: scale()` already on it. */ .hero-layer, .steps-streak, .pillars-wash, .coverage-field, .cta-band__swoosh { /* Travel = depth x the global cap. Mobile halves the whole system at the * root rather than per layer, so the budget stays one number. */ --parallax-scale: 0.5; --parallax-travel: calc(var(--g-parallax-max) * var(--depth, 0.4) * var(--parallax-scale)); } .hero-layer--photo { --depth: 0.15; } .hero-layer--back { --depth: 0.4; } .hero-layer--mid { --depth: 0.7; } .hero-layer--fore { --depth: 1; } .steps-streak { --depth: 0.6; } .pillars-wash { --depth: 0.35; } .coverage-field { --depth: 0.3; } .cta-band__swoosh { --depth: 0.8; } @keyframes g-parallax { from { translate: 0 calc(var(--parallax-travel) * -1); } to { translate: 0 var(--parallax-travel); } } @keyframes g-reveal { from { opacity: 0; translate: 0 1.5rem; } to { opacity: 1; translate: 0 0; } } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .hero-layer { animation: g-parallax linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } [data-reveal] { animation: g-reveal var(--g-ease-out) both; animation-timeline: view(); animation-range: entry 10% entry 65%; } } } /* Below 768px only the hero moves, at half amplitude. Multi-layer scroll * effects on small screens are the single most common source of scroll jank, * and the payoff on a phone-sized viewport is negligible. */ @media (min-width: 768px) { .hero-layer, .steps-streak, .pillars-wash, .coverage-field, .cta-band__swoosh { --parallax-scale: 1; } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .steps-streak, .pillars-wash, .coverage-field, .cta-band__swoosh { animation: g-parallax linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } } } } /* Tier 3 only. parallax.js adds .js-parallax to once it has decided to * take over; until then reveal targets stay visible, so a JS failure can never * leave the page blank. */ .js-parallax [data-reveal] { opacity: 0; transition: opacity var(--g-duration-slow) var(--g-ease-out), translate var(--g-duration-slow) var(--g-ease-out); translate: 0 1.5rem; } .js-parallax [data-reveal].is-revealed { opacity: 1; translate: 0 0; } /* The last word on motion: whatever any tier decided, reduced-motion wins. */ @media (prefers-reduced-motion: reduce) { .hero-layer, .steps-streak, .pillars-wash, .coverage-field, .cta-band__swoosh, [data-reveal] { animation: none !important; translate: none !important; transition: none !important; } .js-parallax [data-reveal] { opacity: 1; } .btn:hover, .svc-card:hover { transform: none; } html { scroll-behavior: auto; } }