/* OLNIN premium page-entry motion. The root class is added in so there is no visible content flash. */ html.hero-motion body > .hdr, html.hero-motion body > .header, html.hero-motion body > .site-header{ animation:olnin-header-in 680ms cubic-bezier(.22,.61,.36,1) both; } html.hero-motion .hero .hero__copy > .eyebrow, html.hero-motion .hero .hero__copy > .hero__place, html.hero-motion .hero .wrap > .eyebrow{ animation:olnin-rise-in 720ms cubic-bezier(.22,.61,.36,1) 90ms both; } html.hero-motion .hero .hero__copy > h1, html.hero-motion .hero .wrap > h1{ animation:olnin-rise-in 880ms cubic-bezier(.22,.61,.36,1) 180ms both; } /* Homepage signature: reveal the complete statement one word at a time. */ .hero__word-reveal{perspective:900px} .hero__word-reveal .hero__line{display:inline} html.hero-motion .hero .hero__copy > h1.hero__word-reveal{ animation:none!important; opacity:1!important; transform:none!important; translate:0 0!important; filter:none!important; } html.hero-motion .hero__word-reveal .hero__word{ display:inline-block; animation:olnin-word-in 760ms cubic-bezier(.22,.61,.36,1) var(--word-delay,180ms) both; transform-origin:50% 100%; will-change:opacity,transform,filter; } html.hero-motion .hero .hero__copy > .lede, html.hero-motion .hero .hero__copy > .hero__sub, html.hero-motion .hero .wrap > .lede{ animation:olnin-rise-in 800ms cubic-bezier(.22,.61,.36,1) 310ms both; } html.hero-motion .hero .hero__copy > .hero__actions, html.hero-motion .hero .hero__copy > .hero__cta, html.hero-motion .hero .hero__copy > .cta-row, html.hero-motion .hero .wrap > .actions{ animation:olnin-rise-in 760ms cubic-bezier(.22,.61,.36,1) 430ms both; } html.hero-motion .hero .hero__copy > .hero__scroll{ animation:olnin-rise-in 720ms cubic-bezier(.22,.61,.36,1) 570ms both; } html.hero-motion .hero .hero__art, html.hero-motion .hero .hero__media, html.hero-motion .hero .hero__visual{ animation:olnin-visual-in 1100ms cubic-bezier(.22,.61,.36,1) 190ms both; will-change:opacity,transform,clip-path; } html.hero-motion .hero .hero__rule, html.hero-motion .hero .hero__strip{ animation:olnin-rise-in 760ms cubic-bezier(.22,.61,.36,1) 720ms both; } @keyframes olnin-header-in{ from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} } @keyframes olnin-rise-in{ from{opacity:0;transform:translateY(24px);filter:blur(3px)} to{opacity:1;transform:translateY(0);filter:blur(0)} } @keyframes olnin-word-in{ from{opacity:0;transform:translateY(.72em) rotateX(-12deg);filter:blur(4px)} to{opacity:1;transform:translateY(0) rotateX(0);filter:blur(0)} } @keyframes olnin-visual-in{ from{opacity:0;transform:translateY(18px) scale(1.025);clip-path:inset(0 0 100% 0)} to{opacity:1;transform:translateY(0) scale(1);clip-path:inset(-8%)} } @media(max-width:700px){ html.hero-motion .hero .hero__copy > .eyebrow, html.hero-motion .hero .hero__copy > .hero__place, html.hero-motion .hero .wrap > .eyebrow{animation-delay:50ms} html.hero-motion .hero .hero__copy > h1, html.hero-motion .hero .wrap > h1{animation-delay:120ms} html.hero-motion .hero .hero__copy > .lede, html.hero-motion .hero .hero__copy > .hero__sub, html.hero-motion .hero .wrap > .lede{animation-delay:220ms} html.hero-motion .hero .hero__copy > .hero__actions, html.hero-motion .hero .hero__copy > .hero__cta, html.hero-motion .hero .hero__copy > .cta-row, html.hero-motion .hero .wrap > .actions{animation-delay:320ms} html.hero-motion .hero .hero__art, html.hero-motion .hero .hero__media, html.hero-motion .hero .hero__visual{animation-delay:260ms;animation-duration:900ms} } @media(prefers-reduced-motion:reduce){ html.hero-motion body > .hdr, html.hero-motion body > .header, html.hero-motion body > .site-header, html.hero-motion .hero *{ animation:none!important; opacity:1!important; transform:none!important; translate:none!important; filter:none!important; clip-path:none!important; } }