@layer motion {
  .split-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding: 0.14em 0.03em 0.18em;
    margin: -0.14em -0.03em -0.18em;
  }

  .split-word__inner {
    display: inline-block;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    .has-motion.is-ready [data-reveal="fade"] {
      opacity: 0;
      transform: translateY(1.25rem);
      transition: opacity 1s ease, transform 1.2s var(--ease-out-expo);
      transition-delay: var(--reveal-delay, 0ms);
    }

    .has-motion.is-ready [data-reveal="fade"].is-revealed {
      opacity: 1;
      transform: none;
    }

    .has-motion.is-ready [data-reveal="fade"]:focus-within {
      opacity: 1;
      transform: none;
      transition: none;
    }

    .has-motion.is-ready [data-reveal="rule"] {
      transform: scaleX(0);
      transition: transform 1.4s var(--ease-out-expo) 0.1s;
    }

    .has-motion.is-ready [data-reveal="rule"].is-revealed {
      transform: none;
    }

    .has-motion.is-ready [data-reveal="mask"] {
      clip-path: inset(100% 0 0 0);
      transition: clip-path 1.4s var(--ease-in-out);
    }

    .has-motion.is-ready [data-reveal="mask"] img {
      scale: 1.14;
      transition: scale 2s var(--ease-out-expo), transform 1.1s var(--ease-in-out);
    }

    .has-motion.is-ready [data-reveal="mask"].is-revealed {
      clip-path: inset(0 0 0 0);
    }

    .has-motion.is-ready [data-reveal="mask"].is-revealed img {
      scale: 1;
    }

    .has-motion.is-ready .arch__frame[data-reveal="mask"] {
      clip-path: inset(100% 0 0 0 round 999px 999px 0 0);
    }

    .has-motion.is-ready .arch__frame[data-reveal="mask"].is-revealed {
      clip-path: inset(0 0 0 0 round 999px 999px 0 0);
    }

    .has-motion.is-ready [data-reveal="draw"] {
      stroke-dashoffset: 1;
      transition: stroke-dashoffset var(--duration-draw) var(--ease-in-out) 0.3s;
    }

    .has-motion.is-ready [data-reveal="draw"].is-revealed {
      stroke-dashoffset: 0;
    }

    .has-motion.is-ready [data-reveal="pop"] {
      opacity: 0;
      transform: scale(0.4);
      transition: opacity 0.45s ease, transform 0.9s var(--ease-out-back);
      transition-delay: var(--reveal-delay, 0ms);
    }

    .has-motion.is-ready [data-reveal="pop"].is-revealed {
      opacity: 1;
      transform: none;
    }

    .has-motion.is-ready [data-reveal="lines"] .split-word__inner {
      transform: translateY(112%);
      transition: transform 1.2s var(--ease-out-expo);
      transition-delay: calc(var(--line-index, 0) * 110ms + var(--reveal-delay, 0ms));
    }

    .has-motion.is-ready [data-reveal="lines"].is-revealed .split-word__inner {
      transform: none;
    }

    .has-motion.is-ready [data-reveal="sign"] .signature {
      clip-path: inset(0 100% 0 0);
      transition: clip-path 2.2s var(--ease-in-out) 0.3s;
    }

    .has-motion.is-ready [data-reveal="sign"].is-revealed .signature {
      clip-path: inset(0 0 0 0);
    }

    .has-motion.is-ready [data-reveal="lines"]:not(.is-split) {
      opacity: 0;
    }

    .has-motion.is-ready [data-reveal].is-resetting,
    .has-motion.is-ready [data-reveal].is-resetting * {
      transition: none;
    }
  }

  @keyframes rise-in {
    from {
      opacity: 0;
      transform: translateY(1rem);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes line-rise {
    from {
      transform: translateY(108%);
    }

    to {
      transform: none;
    }
  }

  @keyframes stroke-draw {
    from {
      stroke-dashoffset: 1;
    }

    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes rule-grow {
    from {
      transform: scaleX(0);
    }

    to {
      transform: none;
    }
  }

  @keyframes arch-open {
    from {
      clip-path: inset(100% 0 0 0 round 999px 999px 0 0);
    }

    to {
      clip-path: inset(0 0 0 0 round 999px 999px 0 0);
    }
  }

  @keyframes arch-outline-in {
    from {
      clip-path: inset(100% 0 0 0);
      opacity: 0;
    }

    to {
      clip-path: inset(0 0 0 0);
      opacity: 1;
    }
  }

  @keyframes image-settle {
    from {
      scale: 1.16;
    }

    to {
      scale: 1;
    }
  }
}