@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .before-lettering { animation: lettering-follows .4s var(--ease-settle) backwards; }
  .lettering-pen { visibility: visible; animation: lettering-pen-lifts 2.48s .4s forwards; }
  .lettering-pen path { animation: lettering-written 2.48s linear .4s both; }
  .lettering-ink { animation: lettering-inked 2.48s .4s backwards; }
  .after-lettering { animation: lettering-follows .5s var(--ease-settle) 2.8s backwards; }
  .written-after-lettering { mask-image: linear-gradient(to right, currentColor 45.5%, transparent 54.5%); mask-size: 220% 100%; mask-repeat: no-repeat; animation: lettering-continued .5s linear 2.95s backwards; }
}
@keyframes lettering-written { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lettering-pen-lifts { to { visibility: hidden; } }
@keyframes lettering-inked { from, to { visibility: hidden; } }
@keyframes lettering-follows { from { opacity: 0; } }
@keyframes lettering-continued { from { mask-position: 100% 0; } to { mask-position: 0 0; } }