/* Shared, original text motion. The existing typefaces and layout stay in charge. */
text-reveal,
text-content,
text-block,
text-line,
text-roll,
text-visual,
text-char,
text-track,
text-glyph {
  box-sizing: border-box;
  font: inherit;
  letter-spacing: inherit;
}

text-line { display: inline; }
text-reveal {
  display: inline-block;
  position: relative;
  max-width: 100%;
  vertical-align: baseline;
  isolation: isolate;
}
text-content { display: block; }
text-block {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  background: var(--text-block, #d8e45f);
  transform-origin: right center;
  pointer-events: none;
}
text-reveal[data-state="waiting"] { clip-path: inset(0 100% 0 0); }
text-reveal[data-state="done"] > text-block { display: none; }
footer { --text-block: #292c24; }

text-roll { display: inline-block; vertical-align: bottom; }
text-visual { display: block; white-space: pre; }
text-char {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.4;
}
text-track {
  display: block;
  position: relative;
  transition: transform .58s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--text-delay, 0ms);
}
text-glyph { display: block; }
text-glyph + text-glyph { position: absolute; top: 100%; left: 0; }
text-a11y {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
[data-text-roll]:focus-visible text-track { transform: translateY(-100%); }
@media (hover: hover) and (pointer: fine) {
  [data-text-roll]:hover text-track { transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  text-reveal { clip-path: none !important; }
  text-block { display: none !important; }
  text-track { transform: none !important; transition: none !important; }
}