.motion-preview .ink-copy {
  aspect-ratio: 440 / 1576;
}

.motion-preview .ink-character {
  position: absolute;
  top: calc(var(--character-index) * 100% / var(--character-count));
  left: 0;
  width: 100%;
  height: calc(100% / var(--character-count));
  overflow: hidden;
  opacity: 0;
  filter: blur(4px);
  will-change: filter, opacity;
}

.motion-preview .ink-character img {
  position: absolute;
  top: calc(var(--character-index) * -100%);
  left: 0;
  width: 100%;
  max-width: none;
}

.motion-preview.is-ready .ink-character {
  animation: inkCharacterReveal 0.5s cubic-bezier(0.2, 0.72, 0.24, 1) forwards;
  animation-delay: calc(var(--copy-delay) + var(--character-index) * 0.15s);
}

@keyframes inkCharacterReveal {
  0% {
    opacity: 0;
    filter: blur(4px);
  }

  58% {
    opacity: 0.94;
    filter: blur(1px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}