/** * Shared scroll / entrance motion (marketing pages). * * Opt-in via classes / attributes — see assets/scroll-motion.js. * Only applies when has .motion-ok (set by the script when * prefers-reduced-motion is not reduce). */ /* Image zoom-out: start tight, settle as the image enters view */ .scroll-zoom-img { transform: scale(1.05); transform-origin: center center; transition: transform 1.05s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .scroll-zoom-img.is-settled { transform: scale(1); } /* Title / eyebrow fade-up */ .motion-ok .scroll-reveal-title { opacity: 0; transform: translateY(16px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } .motion-ok .scroll-reveal-title--lead { transform: translateY(10px); transition-duration: 0.75s; } .motion-ok .scroll-reveal-title.is-in { opacity: 1; transform: none; } /* Eyebrow leads; paired title follows ~100ms later */ .motion-ok .scroll-reveal-title--lead + .scroll-reveal-title { transition-delay: 0.1s; } /* Hero: eyebrow → line 1 → accent (h1 isn't a reveal node, so delay children) */ .motion-ok .hero-eyebrow.scroll-reveal-title--lead + .hero-title > .scroll-reveal-title:nth-child(1) { transition-delay: 0.1s; } .motion-ok .hero-eyebrow.scroll-reveal-title--lead + .hero-title > .scroll-reveal-title:nth-child(2) { transition-delay: 0.24s; } /* Reserve Hero: eyebrow → line 1 → accent (h1 isn't a reveal node, so delay children) */ .motion-ok .section-eyebrow.scroll-reveal-title--lead + .reserve-hero-title > .scroll-reveal-title:nth-child(1) { transition-delay: 0.1s; } .motion-ok .section-eyebrow.scroll-reveal-title--lead + .reserve-hero-title > .scroll-reveal-title:nth-child(2) { transition-delay: 0.24s; } @media (prefers-reduced-motion: reduce) { .scroll-zoom-img { transform: none; transition: none; will-change: auto; } .motion-ok .scroll-reveal-title { opacity: 1; transform: none; transition: none; } }