/* BAD INFLUENCE PREMIUM HERO MOTION PARITY V1 START */ /* ========================================================================== PURPOSE -------------------------------------------------------------------------- Temporary entrance states only. After the entrance completes, JS removes hero-motion-enabled from . The original page CSS takes back complete control. That means: - hover states remain untouched - geometry remains untouched - existing interaction transitions remain untouched ========================================================================== */ /* ========================================================================== HOME / HERO ========================================================================== */ html.hero-motion-enabled .premium-hero .premium-hero__media { opacity: 0; transition: opacity 1050ms 40ms cubic-bezier(.2,.75,.2,1); } html.hero-motion-enabled .premium-hero .premium-hero__eyebrow { opacity: 0; transform: translateY(1rem); transition: opacity 600ms 100ms ease, transform 700ms 100ms cubic-bezier(.2,.75,.2,1); } html.hero-motion-enabled .premium-hero h1 span { opacity: 0; transform: translateY(0.42em); transition: opacity 700ms ease, transform 850ms cubic-bezier(.16,.8,.2,1); } html.hero-motion-enabled .premium-hero h1 span:nth-child(1) { transition-delay: 150ms; } html.hero-motion-enabled .premium-hero h1 span:nth-child(2) { transition-delay: 230ms; } html.hero-motion-enabled .premium-hero h1 span:nth-child(3) { transition-delay: 310ms; } html.hero-motion-enabled .premium-hero .premium-hero__lead { opacity: 0; transform: translateY(1.25rem); transition: opacity 650ms 390ms ease, transform 750ms 390ms cubic-bezier(.2,.75,.2,1); } html.hero-motion-enabled .premium-hero .premium-hero__punchline { opacity: 0; transform: translateX(-1.4rem); transition: opacity 650ms 470ms ease, transform 750ms 470ms cubic-bezier(.2,.75,.2,1); } html.hero-motion-enabled .premium-hero .premium-hero__actions { opacity: 0; transform: translateY(1.2rem); transition: opacity 650ms 540ms ease, transform 750ms 540ms cubic-bezier(.2,.75,.2,1); } html.hero-motion-enabled .premium-hero .premium-hero__note { opacity: 0; transform: translateY(1rem); transition: opacity 600ms 610ms ease, transform 700ms 610ms cubic-bezier(.2,.75,.2,1); } html.hero-motion-enabled .premium-hero .premium-hero__scroll { opacity: 0; transform: translateY(0.8rem); transition: opacity 600ms 690ms ease, transform 700ms 690ms cubic-bezier(.2,.75,.2,1); } /* HOME / VISIBLE */ html.hero-motion-enabled .premium-hero.is-hero-visible .premium-hero__media, html.hero-motion-enabled .premium-hero.is-hero-visible .premium-hero__eyebrow, html.hero-motion-enabled .premium-hero.is-hero-visible h1 span, html.hero-motion-enabled .premium-hero.is-hero-visible .premium-hero__lead, html.hero-motion-enabled .premium-hero.is-hero-visible .premium-hero__punchline, html.hero-motion-enabled .premium-hero.is-hero-visible .premium-hero__actions, html.hero-motion-enabled .premium-hero.is-hero-visible .premium-hero__note, html.hero-motion-enabled .premium-hero.is-hero-visible .premium-hero__scroll { opacity: 1; transform: none; } /* ========================================================================== COLLECTION / HERO ========================================================================== */ html.hero-motion-enabled .shop-hero .shop-hero__meta { opacity: 0; transform: translateY(-0.8rem); transition: opacity 600ms 70ms ease, transform 700ms 70ms cubic-bezier(.2,.75,.2,1); } html.hero-motion-enabled .shop-hero .shop-hero__eyebrow { opacity: 0; transform: translateY(1rem); transition: opacity 600ms 140ms ease, transform 700ms 140ms cubic-bezier(.2,.75,.2,1); } html.hero-motion-enabled .shop-hero h1 span { opacity: 0; transform: translateY(0.42em); transition: opacity 700ms ease, transform 850ms cubic-bezier(.16,.8,.2,1); } html.hero-motion-enabled .shop-hero h1 span:nth-child(1) { transition-delay: 210ms; } html.hero-motion-enabled .shop-hero h1 span:nth-child(2) { transition-delay: 300ms; } html.hero-motion-enabled .shop-hero .shop-hero__scribble { opacity: 0; transform: translateX(-1.4rem); transition: opacity 650ms 380ms ease, transform 750ms 380ms cubic-bezier(.2,.75,.2,1); } html.hero-motion-enabled .shop-hero .shop-hero__lead { opacity: 0; transform: translateY(1.15rem); transition: opacity 650ms 440ms ease, transform 750ms 440ms cubic-bezier(.2,.75,.2,1); } html.hero-motion-enabled .shop-hero .shop-hero__actions { opacity: 0; transform: translateY(1rem); transition: opacity 650ms 520ms ease, transform 750ms 520ms cubic-bezier(.2,.75,.2,1); } html.hero-motion-enabled .shop-hero .shop-hero__scroll-note { opacity: 0; transform: translateY(0.8rem); transition: opacity 600ms 600ms ease, transform 700ms 600ms cubic-bezier(.2,.75,.2,1); } html.hero-motion-enabled .shop-hero .shop-hero__ghost { opacity: 0; transform: translateX(2.5rem); transition: opacity 900ms 250ms ease, transform 1050ms 250ms cubic-bezier(.2,.75,.2,1); } /* COLLECTION / VISIBLE */ html.hero-motion-enabled .shop-hero.is-hero-visible .shop-hero__meta, html.hero-motion-enabled .shop-hero.is-hero-visible .shop-hero__eyebrow, html.hero-motion-enabled .shop-hero.is-hero-visible h1 span, html.hero-motion-enabled .shop-hero.is-hero-visible .shop-hero__scribble, html.hero-motion-enabled .shop-hero.is-hero-visible .shop-hero__lead, html.hero-motion-enabled .shop-hero.is-hero-visible .shop-hero__actions, html.hero-motion-enabled .shop-hero.is-hero-visible .shop-hero__scroll-note, html.hero-motion-enabled .shop-hero.is-hero-visible .shop-hero__ghost { opacity: 1; transform: none; } /* ========================================================================== SERVICES / HERO ========================================================================== */ html.hero-motion-enabled .services-hero .services-hero__meta { opacity: 0; transform: translateY(-0.8rem); transition: opacity 600ms 70ms ease, transform 700ms 70ms cubic-bezier(.2,.75,.2,1); } html.hero-motion-enabled .services-hero .services-hero__eyebrow { opacity: 0; transform: translateY(1rem); transition: opacity 600ms 140ms ease, transform 700ms 140ms cubic-bezier(.2,.75,.2,1); } html.hero-motion-enabled .services-hero h1 > span { opacity: 0; transform: translateY(0.42em); transition: opacity 700ms 210ms ease, transform 850ms 210ms cubic-bezier(.16,.8,.2,1); } html.hero-motion-enabled .services-hero h1 > em { opacity: 0; transform: translateX(-1.4rem); transition: opacity 700ms 310ms ease, transform 850ms 310ms cubic-bezier(.16,.8,.2,1); } html.hero-motion-enabled .services-hero .services-hero__lead { opacity: 0; transform: translateY(1.15rem); transition: opacity 650ms 400ms ease, transform 750ms 400ms cubic-bezier(.2,.75,.2,1); } html.hero-motion-enabled .services-hero .services-hero__actions { opacity: 0; transform: translateY(1rem); transition: opacity 650ms 480ms ease, transform 750ms 480ms cubic-bezier(.2,.75,.2,1); } html.hero-motion-enabled .services-hero .services-hero__support { opacity: 0; transform: translateY(1rem); transition: opacity 650ms 550ms ease, transform 750ms 550ms cubic-bezier(.2,.75,.2,1); } html.hero-motion-enabled .services-hero .services-hero__scroll { opacity: 0; transform: translateY(0.8rem); transition: opacity 600ms 630ms ease, transform 700ms 630ms cubic-bezier(.2,.75,.2,1); } html.hero-motion-enabled .services-hero .services-hero__ghost { opacity: 0; transform: translateX(2.5rem); transition: opacity 900ms 250ms ease, transform 1050ms 250ms cubic-bezier(.2,.75,.2,1); } /* SERVICES / VISIBLE */ html.hero-motion-enabled .services-hero.is-hero-visible .services-hero__meta, html.hero-motion-enabled .services-hero.is-hero-visible .services-hero__eyebrow, html.hero-motion-enabled .services-hero.is-hero-visible h1 > span, html.hero-motion-enabled .services-hero.is-hero-visible h1 > em, html.hero-motion-enabled .services-hero.is-hero-visible .services-hero__lead, html.hero-motion-enabled .services-hero.is-hero-visible .services-hero__actions, html.hero-motion-enabled .services-hero.is-hero-visible .services-hero__support, html.hero-motion-enabled .services-hero.is-hero-visible .services-hero__scroll, html.hero-motion-enabled .services-hero.is-hero-visible .services-hero__ghost { opacity: 1; transform: none; } /* ========================================================================== REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { html.hero-motion-enabled .premium-hero *, html.hero-motion-enabled .shop-hero *, html.hero-motion-enabled .services-hero * { transition: none !important; } html.hero-motion-enabled .premium-hero .premium-hero__media, html.hero-motion-enabled .premium-hero .premium-hero__eyebrow, html.hero-motion-enabled .premium-hero h1 span, html.hero-motion-enabled .premium-hero .premium-hero__lead, html.hero-motion-enabled .premium-hero .premium-hero__punchline, html.hero-motion-enabled .premium-hero .premium-hero__actions, html.hero-motion-enabled .premium-hero .premium-hero__note, html.hero-motion-enabled .premium-hero .premium-hero__scroll, html.hero-motion-enabled .shop-hero .shop-hero__meta, html.hero-motion-enabled .shop-hero .shop-hero__eyebrow, html.hero-motion-enabled .shop-hero h1 span, html.hero-motion-enabled .shop-hero .shop-hero__scribble, html.hero-motion-enabled .shop-hero .shop-hero__lead, html.hero-motion-enabled .shop-hero .shop-hero__actions, html.hero-motion-enabled .shop-hero .shop-hero__scroll-note, html.hero-motion-enabled .shop-hero .shop-hero__ghost, html.hero-motion-enabled .services-hero .services-hero__meta, html.hero-motion-enabled .services-hero .services-hero__eyebrow, html.hero-motion-enabled .services-hero h1 > span, html.hero-motion-enabled .services-hero h1 > em, html.hero-motion-enabled .services-hero .services-hero__lead, html.hero-motion-enabled .services-hero .services-hero__actions, html.hero-motion-enabled .services-hero .services-hero__support, html.hero-motion-enabled .services-hero .services-hero__scroll, html.hero-motion-enabled .services-hero .services-hero__ghost { opacity: 1 !important; transform: none !important; } } /* BAD INFLUENCE PREMIUM HERO MOTION PARITY V1 END */