/* Homepage hero: the scan-and-select headline animation. */
.hero.ht-on .hero-title > span { position: relative; width: fit-content; opacity: 1; transform: none; }
/* the paragraph and link follow once the headline has formed */
.js .hero.ht-on .hero-lead, .js .hero.ht-on .hero-ctas { transition-delay: 1100ms; }

.hero-title .ht-line { display: inline-block; clip-path: inset(0 100% 0 0); }
.hero-title .ht-bar { position: absolute; top: 4%; bottom: 4%; left: 0; width: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent); opacity: 0; }
.hero-title .ht-read { position: absolute; left: 10px; top: -14px; font-family: var(--font-mono); font-size: 11px; line-height: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); white-space: nowrap; }
.ht-scan.ht-run .ht-line { animation: htReveal 900ms var(--ease-layer) forwards; }
.ht-scan.ht-run .ht-bar { animation: htBar 900ms var(--ease-layer) forwards; }
.ht-scan.ht-run .hero-title > span:nth-child(2) .ht-line, .ht-scan.ht-run .hero-title > span:nth-child(2) .ht-bar { animation-delay: 1150ms; }
.ht-scan.ht-done .ht-line { clip-path: none; }
.hero-title .ht-pick { display: inline; position: relative; }
.hero-title .ht-pick::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease-layer) 250ms; }
.ht-scan.ht-done .ht-pick { color: var(--accent); transition: color 400ms var(--ease-standard); }
.ht-scan.ht-done .ht-pick::after { transform: scaleX(1); }
@keyframes htReveal { to { clip-path: inset(0 0 0 0); } }
@keyframes htBar { 0% { left: 0; opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hero-title .ht-line { clip-path: none; }
  .hero-title .ht-bar { display: none; }
  .hero-title .ht-pick, .hero-title .ht-pick::after { transition: none; }
}