/* Additive motion: every content element is readable until setup succeeds. */
.opening {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.scroll-progress {
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

.motion-ready .scroll-progress {
  transform: scaleX(var(--scroll-progress, 0));
}

.motion-ready.motion-opening .opening:not(.is-complete) {
  opacity: 1;
  visibility: visible;
  animation: motion-opening-exit 860ms cubic-bezier(.76, 0, .2, 1) both;
}

.opening.is-complete {
  display: none;
}

.motion-ready.motion-opening .opening img {
  animation: motion-opening-bird 660ms cubic-bezier(.2, .75, .2, 1) both;
}

.motion-ready.motion-opening .opening-word {
  animation: motion-opening-word 660ms cubic-bezier(.2, .75, .2, 1) 40ms both;
}

.motion-ready.motion-opening .opening-caption {
  animation: motion-opening-word 610ms ease 110ms both;
}

.motion-ready.motion-opening .opening-line {
  transform-origin: 0 50%;
  animation: motion-opening-line 620ms cubic-bezier(.65, 0, .3, 1) both;
}

.motion-ready:not(.motion-hero-complete) .hero-line {
  overflow: clip;
}

.motion-ready .hero-line > span {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 108%, 0) rotate(.7deg);
  transform-origin: 0 100%;
  transition: transform 1000ms cubic-bezier(.2, .75, .2, 1), opacity 680ms ease;
  transition-delay: calc(var(--hero-line-index, 0) * 105ms + 55ms);
}

.motion-ready .hero-kicker,
.motion-ready .hero-description,
.motion-ready .hero-actions {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 750ms ease, transform 900ms cubic-bezier(.2, .75, .2, 1);
}

.motion-ready .hero-kicker { transition-delay: 0ms; }
.motion-ready .hero-description { transition-delay: 340ms; }
.motion-ready .hero-actions { transition-delay: 450ms; }

.motion-ready .hero-visual {
  opacity: .3;
  clip-path: inset(6% 0 6% 0);
  transition: clip-path 1300ms cubic-bezier(.2, .75, .2, 1), opacity 1050ms ease;
}

.motion-ready .hero-inset {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 900ms ease 450ms, translate 1100ms cubic-bezier(.2, .75, .2, 1) 400ms;
}

.motion-ready.motion-hero-entered .hero-line > span,
.motion-ready.motion-hero-entered .hero-kicker,
.motion-ready.motion-hero-entered .hero-description,
.motion-ready.motion-hero-entered .hero-actions {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.motion-ready.motion-hero-entered .hero-visual {
  opacity: 1;
  clip-path: inset(0);
}

.motion-ready.motion-hero-entered .hero-inset {
  opacity: 1;
  translate: 0 0;
}

.motion-ready [data-motion-reveal="up"] {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity 750ms ease, transform 900ms cubic-bezier(.2, .75, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.motion-ready [data-motion-reveal="up"].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.motion-ready [data-motion-reveal="image"] > img {
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1150ms cubic-bezier(.2, .75, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.motion-ready [data-motion-reveal="image"].is-visible > img {
  clip-path: inset(0);
}

.motion-ready [data-motion-reveal="image"] > figcaption,
.motion-ready .message-visual[data-motion-reveal="image"]::after {
  opacity: 0;
  transition: opacity 650ms ease 400ms;
}

.motion-ready [data-motion-reveal="image"].is-visible > figcaption,
.motion-ready .message-visual[data-motion-reveal="image"].is-visible::after {
  opacity: 1;
}

.motion-ready .motion-heading {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1100ms cubic-bezier(.2, .75, .2, 1) 60ms;
}

.motion-ready [data-motion-reveal].is-visible .motion-heading {
  clip-path: inset(-.12em);
}

/* Keep the verified final text in the accessibility tree throughout a count-up. */
.motion-counter-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.data-value strong > .motion-counter-value {
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .motion-ready .hero-visual > img {
    transform: translate3d(0, var(--hero-y, 0px), 0) scale(1.065);
    transform-origin: 50% 50%;
    will-change: transform;
  }

  .motion-ready.motion-hero-entered .hero-inset {
    translate: 0 var(--inset-y, 0px);
  }
}

@media (max-width: 760px) {
  .motion-ready [data-motion-reveal="up"] {
    transform: translate3d(0, 20px, 0);
  }

  .motion-ready [data-motion-reveal="up"].is-visible {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes motion-opening-exit {
  0%, 48% { opacity: 1; clip-path: inset(0); visibility: visible; }
  99% { opacity: 1; clip-path: inset(0 0 100% 0); visibility: visible; }
  100% { opacity: 0; clip-path: inset(0 0 100% 0); visibility: hidden; }
}

@keyframes motion-opening-bird {
  from { opacity: 0; transform: translate3d(-9px, 12px, 0) rotate(-5deg); }
  70%, to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
}

@keyframes motion-opening-word {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes motion-opening-line {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .opening, .scroll-progress { display: none !important; }

  .motion-ready .hero-line > span,
  .motion-ready .hero-kicker,
  .motion-ready .hero-description,
  .motion-ready .hero-actions,
  .motion-ready .hero-visual,
  .motion-ready .hero-visual > img,
  .motion-ready .hero-inset,
  .motion-ready [data-motion-reveal],
  .motion-ready [data-motion-reveal="image"] > img,
  .motion-ready [data-motion-reveal="image"] > figcaption,
  .motion-ready .message-visual[data-motion-reveal="image"]::after,
  .motion-ready .motion-heading {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    clip-path: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}