/* Title Reveal
   Character-by-character title entrance with blur clearing.
   Usage: pair this file with title-reveal.js and add data-title-lines. */

[data-title-lines] {
  overflow: visible;
}

.tr-line {
  display: block;
  overflow: visible;
  padding-block: .16em .08em;
  margin-block: -.16em -.08em;
}

.tr-line-inner {
  display: block;
  transform-origin: left bottom;
}

.tr-char {
  display: inline-block;
  min-width: .02em;
  padding-inline: .03em;
  margin-inline: -.03em;
  opacity: 0;
  transform: translateY(var(--tr-start-y, -72%)) rotate(var(--tr-char-rotate, 0deg));
  filter: blur(var(--tr-char-blur, 8px));
  animation: tr-char-drop var(--tr-duration, 2000ms) var(--tr-ease, cubic-bezier(.2, .85, .18, 1)) forwards;
  animation-delay: var(--tr-char-delay, 120ms);
  will-change: transform, filter, opacity;
}

@keyframes tr-char-drop {
  0% {
    opacity: 0;
    transform: translateY(var(--tr-start-y, -72%)) rotate(var(--tr-char-rotate, 0deg));
    filter: blur(var(--tr-char-blur, 8px));
  }

  34% {
    opacity: 1;
    filter: blur(calc(var(--tr-char-blur, 8px) * .18));
  }

  52% {
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tr-char {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
  }
}