/* Scroll motion: a short rise, once, as things come into view. Headings slide up out of a mask.
   Only active once motion.js has run and the visitor allows motion, so the page is complete
   without it. Buttons never move. State classes are prefixed (sp-) so nothing else can match them. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

html.sp-motion [data-rise] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 700ms cubic-bezier(.22, 1, .36, 1), transform 900ms cubic-bezier(.22, 1, .36, 1); transition-delay: var(--sp-delay, 0ms); }
html.sp-motion [data-rise].sp-shown { opacity: 1; transform: none; }
html.sp-motion .eh-stage[data-rise] { transform: translate3d(0, 36px, 0) scale(.985); }
html.sp-motion .eh-stage[data-rise].sp-shown { transform: none; }

.sp-mask { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.sp-mask > .sp-line { display: block; }
/* the wrappers are spans, and the lifted CSS greys any span inside a heading: keep the heading's own colour */
.eh-sec h2 > .sp-mask, .eh-sec h2 .sp-line, .eh-top-hero h1 > .sp-mask, .eh-top-hero h1 .sp-line, .eh-hero h1 > .sp-mask, .app-h2 > .sp-mask, .app-h2 .sp-line { color: inherit; }
html.sp-motion .sp-mask > .sp-line { transform: translate3d(0, 105%, 0); transition: transform 1000ms cubic-bezier(.22, 1, .36, 1); transition-delay: var(--sp-delay, 0ms); }
html.sp-motion .sp-shown > .sp-mask > .sp-line, html.sp-motion .sp-mask.sp-shown > .sp-line { transform: none; }

/* the hero comes in on load: headline, then copy, then the strip */
html.sp-motion .eh-hero > h1, html.sp-motion .eh-hero > .eh-foot-row, html.sp-motion .eh-ticker { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 800ms cubic-bezier(.22, 1, .36, 1), transform 1000ms cubic-bezier(.22, 1, .36, 1); }
html.sp-motion.sp-ready .eh-hero > h1 { opacity: 1; transform: none; transition-delay: 80ms; }
html.sp-motion.sp-ready .eh-hero > .eh-foot-row { opacity: 1; transform: none; transition-delay: 260ms; }
html.sp-motion.sp-ready .eh-ticker { opacity: 1; transform: none; transition-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
  html.sp-motion [data-rise], html.sp-motion .sp-mask > .sp-line, html.sp-motion .eh-hero > *, html.sp-motion .eh-ticker { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* ?still: the finished state with no transitions, for screenshots and checks */
html.sp-still *, html.sp-still *::before, html.sp-still *::after { transition: none !important; }