/* ============================================================= MOTION — intelligent, rationed motion for a calm, premium feel. Loaded only on pages that opt in with `class="… motion"` on , plus js/motion.js. Two moves: 1. Calm scroll-reveal — sections settle in (fade + 14px rise). 2. Living gradient — the brand gradient breathes slowly. Philosophy: felt, not noticed. transform/opacity only (GPU). Fully disabled under prefers-reduced-motion. Without JS, nothing hides. ============================================================= */ /* 1 — SCROLL-REVEAL. js/motion.js adds [data-reveal] only to sections that are BELOW the fold at load (never the hero, never already-seen content), so there is no flash and no-JS shows everything. */ [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; will-change: opacity, transform; } [data-reveal].is-visible { opacity: 1; transform: none; } /* 2 — LIVING GRADIENT. The blue→pink brand gradient drifts slowly so it reads as light rather than a static fill. Rationed to the surfaces that already carry the gradient: headline accent spans, structural numerals, the dark-band headline. Primary buttons shift the gradient on hover. */ @keyframes ww-grad-drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } .motion .accent-gradient, .motion .section-num__digit, .motion .coach-cta-dark__head, .motion .kit-group__eyebrow { background-size: 220% 220%; animation: ww-grad-drift 14s ease-in-out infinite alternate; } .motion .btn-primary { background-size: 200% 100%; transition: background-position 0.6s ease, transform var(--transition-fast), box-shadow var(--transition-fast); } .motion .btn-primary:hover { background-position: 100% 0; } /* Hero primary CTA — gentle pulse ring draws the eye after 2s page-settle. */ @keyframes ww-btn-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(120, 80, 220, 0.35); } 55% { box-shadow: 0 0 0 12px rgba(120, 80, 220, 0); } } .motion #felt-moment-trigger { animation: ww-btn-pulse 3s ease-out 2s infinite; } /* Reduced motion — turn all of it off, instantly. Non-negotiable for 55+. */ @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } .motion .accent-gradient, .motion .section-num__digit, .motion .coach-cta-dark__head, .motion .kit-group__eyebrow, .motion #felt-moment-trigger { animation: none !important; } }