/* === ATLAS BACKGROUND TRANSITION === Replicates sunday.ai's gradual background fade triggered when scrolling past the first big hero video. Bidirectional. Forensic mechanism (from /tmp/sunday-bg-analysis): Sunday is NOT a scroll-bound scrub. Sunday flips a CSS custom property `--color-bg` on via inline style at a single scrollY threshold. The visual fade is produced by a CSS `transition: background-color 300ms cubic-bezier(0.4,0,0.2,1)` on every section. Color swap is instantaneous in source; only the rendered paint interpolates. Confirmed at 1440×900: flip fires at scrollY=1508 (46px past hero bottom). Reverse scroll restores white. Mobile flips at y≈1250. Same colors both viewports: #FFFFFF ↔ #FAF7EB. Atlas mirrors that exact mechanism (no GSAP, no scrub): - :root defines --ac-bg defaulting to #FFFFFF. - html.is-bg-cream flips --ac-bg to #FAF7EB (sunday's cream). - Body + every section that participates in the landing flow below the hero reads background from --ac-bg. - 300ms transition with the same cubic-bezier as sunday gives a visually identical fade. - JS (atlas-bg-transition.min.js) toggles the html class via IntersectionObserver on the .landing-below-hero-section wrapper. Bidirectional by construction. Coral-bug guard: only #FFFFFF and #FAF7EB ever enter the html/body bg chain. No coral leaks through. */ :root { --ac-bg: #FFFFFF; } html.is-bg-cream { --ac-bg: #FAF7EB; } /* Body & html follow the variable so the page bg fades smoothly when scrolling past the trigger. The cubic-bezier(0.4,0,0.2,1) and 300ms match sunday's Tailwind `transition-colors duration-300`. */ html, body { background-color: var(--ac-bg, #FFFFFF); transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1); } /* Every section wrapper that previously hard-coded `background:#fff` now follows the variable. Listed explicitly (rather than using a generic .shopify-section selector) so we don't affect sections outside the landing flow (cart, account, etc.). */ .ac-below-hero, .ac-story-card-section, .ac-centered-subhead-section, .ac-staggered-words-section, .ac-fullbleed-video-section, .ac-text-video-row-section, .ac-text-two-videos-section, .ac-wide-video-section, .ac-text-video-row__text, .ac-text-two-videos__text { background-color: var(--ac-bg, #FFFFFF); transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1); } /* Reduced-motion: instant swap, no fade. Color still flips at the trigger but no animation. Matches WCAG SC 2.3.3. */ @media (prefers-reduced-motion: reduce) { html, body, .ac-below-hero, .ac-story-card-section, .ac-centered-subhead-section, .ac-staggered-words-section, .ac-fullbleed-video-section, .ac-text-video-row-section, .ac-text-two-videos-section, .ac-wide-video-section, .ac-text-video-row__text, .ac-text-two-videos__text { transition: none; } }