html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: clip;
}

:root {
  --relay-ease: cubic-bezier(.22, 1, .36, 1);
}

.overview__video-source {
  object-fit: contain;
  background: #1e1f20;
}

@media (prefers-reduced-motion: no-preference) {
  .motion-ready .header__bar {
    animation: relay-drop-in .9s var(--relay-ease) both;
  }

  .motion-ready .hero__title-prefix,
  .motion-ready .hero__title-name,
  .motion-ready .hero__title-tagline,
  .motion-ready .hero__actions {
    animation: relay-hero-rise .95s var(--relay-ease) both;
  }

  .motion-ready .hero__title-name {
    animation-delay: .08s;
  }

  .motion-ready .hero__title-tagline {
    animation-delay: .16s;
  }

  .motion-ready .hero__actions {
    animation-delay: .28s;
  }

  .motion-ready .hero__bg-shape {
    will-change: transform;
    transition: transform .35s linear;
  }

  .motion-ready .hero__bg-shape--1 {
    transform: translate3d(var(--relay-parallax-a, 0), var(--relay-parallax-b, 0), 0);
  }

  .motion-ready .hero__bg-shape--2 {
    transform: rotate(180deg) translate3d(var(--relay-parallax-c, 0), var(--relay-parallax-d, 0), 0);
  }

  .motion-ready .relay-reveal {
    opacity: 0;
    transform: translate3d(0, 46px, 0) scale(.975);
    transition:
      opacity .95s var(--relay-ease),
      transform .95s var(--relay-ease),
      border-color .25s ease,
      background-color .25s ease,
      box-shadow .25s ease;
    transition-delay: var(--relay-delay, 0ms);
    will-change: transform, opacity;
  }

  .motion-ready .relay-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  .motion-ready .relay-reveal-child {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition:
      opacity .72s var(--relay-ease),
      transform .72s var(--relay-ease);
    transition-delay: calc(var(--relay-delay, 0ms) + var(--relay-child-delay, 120ms));
    will-change: transform, opacity;
  }

  .motion-ready .relay-reveal.is-visible .relay-reveal-child {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .motion-ready .overview__card-decoration.relay-reveal-child,
  .motion-ready .use-cases__protocol-decoration.relay-reveal-child {
    transform: translate3d(0, 20px, 0) scale(.94) rotate(-3deg);
  }

  .motion-ready .relay-reveal.is-visible .overview__card-decoration.relay-reveal-child,
  .motion-ready .relay-reveal.is-visible .use-cases__protocol-decoration.relay-reveal-child {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }

  .motion-ready .overview__card,
  .motion-ready .use-cases__card,
  .motion-ready .use-cases__protocol,
  .motion-ready .overview__video {
    transition:
      transform .35s var(--relay-ease),
      box-shadow .35s var(--relay-ease),
      border-color .35s ease,
      background-color .25s ease;
  }

  .motion-ready .overview__card:hover,
  .motion-ready .use-cases__card:hover {
    transform: translate3d(0, -6px, 0);
    box-shadow: 0 18px 42px #00000040;
  }

  .motion-ready .overview__video:hover {
    box-shadow: 0 26px 80px #1677ff14;
    transform: translate3d(0, -3px, 0);
  }

  .motion-ready .button,
  .motion-ready .header__twitter,
  .motion-ready .overview__video-play,
  .motion-ready .demo-modal__send,
  .motion-ready .demo-modal__reset,
  .motion-ready .demo-modal__close {
    transition:
      transform .24s var(--relay-ease),
      background-color .2s ease,
      border-color .2s ease,
      opacity .2s ease,
      color .2s ease;
  }

  .motion-ready .button:hover,
  .motion-ready .header__twitter:hover,
  .motion-ready .overview__video-play:hover {
    transform: translate3d(0, -2px, 0);
  }

  .motion-ready .button:active,
  .motion-ready .header__twitter:active,
  .motion-ready .overview__video-play:active {
    transform: translate3d(0, 0, 0) scale(.98);
  }

  .motion-ready .overview__card-decoration,
  .motion-ready .use-cases__protocol-decoration {
    transition: transform .45s var(--relay-ease);
  }

  .motion-ready .overview__card:hover .overview__card-decoration,
  .motion-ready .use-cases__protocol:hover .use-cases__protocol-decoration {
    transform: scale(1.035) rotate(.001deg);
  }

  .motion-ready .use-cases__icon-wrapper {
    transition: transform .28s var(--relay-ease), box-shadow .28s ease;
  }

  .motion-ready .use-cases__card:hover .use-cases__icon-wrapper {
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 8px 24px #1677ff45;
  }
}

@keyframes relay-drop-in {
  from {
    opacity: 0;
    transform: translate3d(0, -22px, 0) scale(.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes relay-hero-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}