:root {

  --m-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.m-rise:not(.is-in) { opacity: 0; transform: translate3d(0, 26px, 0); }
.m-rise.is-in {
  transition:
    opacity 760ms var(--ease-out) var(--m-delay, 0ms),
    transform 1000ms var(--m-ease) var(--m-delay, 0ms),
    filter 900ms var(--ease-out) var(--m-delay, 0ms);
}

.statement.m-rise:not(.is-in) { filter: blur(6px); transform: translate3d(0, 18px, 0); }

.m-rise:not(.is-in):focus-within { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .show-stage { view-timeline: --show-stage block; }
    .show-frame {
      animation: show-enter linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }

    .show-stage::before {
      animation: show-light linear both;
      animation-timeline: --show-stage;
      animation-range: entry 40% cover 50%;
    }

    @media (min-width: 980px) {
      .show-stage {
        animation: show-drift linear both;
        animation-timeline: --show-stage;
        animation-range: cover 0% cover 100%;
      }
    }
  }

  .show-frame.show-io { transition: rotate 1200ms var(--m-ease), translate 1200ms var(--m-ease), scale 1200ms var(--m-ease), opacity 900ms ease; }
  .show-frame.show-io:not(.is-in) { rotate: x 10deg; translate: 0 32px; scale: 0.95; opacity: 0.5; }
}
@keyframes show-enter {
  from { rotate: x 10deg; translate: 0 32px; scale: 0.95; opacity: 0.5; }
  to { rotate: x 0deg; translate: 0 0; scale: 1; opacity: 1; }
}
@keyframes show-light {
  from { opacity: 0; scale: 0.8; }
  to { opacity: 1; scale: 1; }
}
@keyframes show-drift {
  from { translate: 0 16px; }
  to { translate: 0 -16px; }
}

@media (prefers-reduced-motion: no-preference) {

  @supports (animation-timeline: view()) {
    .hero { view-timeline: --hero block; }
    .hero-copy {
      animation: hero-leave linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 55%;
    }
  }

  @supports (animation-timeline: scroll()) {
    .topbar::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
      background: var(--accent); opacity: 0.75;
      transform-origin: 0 50%; transform: scaleX(0);
      animation: page-progress linear both;
      animation-timeline: scroll(root block);
      pointer-events: none;
    }
  }
}
@keyframes hero-leave { to { opacity: 0.1; translate: 0 -32px; } }
@keyframes page-progress { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .m-rise:not(.is-in), .statement.m-rise:not(.is-in), .m-rise.is-in { opacity: 1; transform: none; filter: none; transition: none; }
}
@media print {
  .m-rise { opacity: 1 !important; transform: none !important; filter: none !important; }
}