.hm-line {
  display: block; overflow: hidden;
  padding-block: 0.12em 0.24em; margin-block: -0.12em -0.24em; 
}
.hm-line__in { display: block; transform: translateY(120%); animation: hm-line-in var(--dur-base) var(--ease-out) both; }
.hm-line:nth-of-type(2) > .hm-line__in { animation-delay: 100ms; }
@keyframes hm-line-in { to { transform: translateY(0); } }


.hm-word { display: block; }
.hm-word__box { position: relative; display: inline-block; }
.hm-word__mask {
  display: flex; align-items: center; justify-content: center;
  height: 1.3em; margin-block: -0.11em; overflow: hidden; padding-inline: 0.16em; border-radius: 0.14em;
  background: var(--color-accent); color: var(--color-ink);
}
.hm-word__col { display: block; transition: transform var(--dur-base) var(--ease-out); }
.hm-word[data-step="1"] .hm-word__col { transform: translateY(-50%); }
.hm-word__item { display: flex; align-items: center; justify-content: center; height: 1.3em; }



.hm-mark--draw > svg {
  stroke-dasharray: 1000;
  animation: hm-mark-draw var(--dur-marker) var(--ease-out) both;
  animation-delay: 0s;
}
@keyframes hm-mark-draw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }


@media (prefers-reduced-motion: reduce) {
  .hm-line__in { animation: none; transform: none; }
  .hm-word__col { transition: none; }
  .hm-mark--draw > svg { animation: none; }
}