/* Keep the natural text width throughout the reveal, so the caret ends at
   the last letter instead of the edge of the viewport. */
.ha-products__watermark { width: max-content; }
.ha-products__watermark > span { display: block; }
.ha-products__watermark[data-typing-state="pending"] > span { clip-path: inset(0 100% 0 0); }
.ha-products__watermark[data-typing-state="playing"] > span {
  animation: ha-heading-type 3.5s steps(40,end) both;
}
.ha-products__watermark[data-typing-state="playing"]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% - .1em);
  width: .1em;
  background: currentColor;
  animation: ha-heading-caret-position 3.5s steps(40,end) both,ha-heading-caret 1.4s step-end infinite;
}
@keyframes ha-heading-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ha-heading-caret-position { from { left: 0; } to { left: calc(100% - .1em); } }
@keyframes ha-heading-caret { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@media(prefers-reduced-motion:reduce) {
  html:not([data-motion="full"]) .ha-products__watermark[data-typing-state] > span { clip-path: none; animation: none; }
  html:not([data-motion="full"]) .ha-products__watermark[data-typing-state]::after { content: none; animation: none; }
}