/* The cycling headline, four modes. Tokens come from x.css.
   One line at every width: the size is capped so "We obsess over pixels." (the longest phrase) fits the band. */
.hw {
  --hw-dur: 560ms;
  --hw-ease: cubic-bezier(0.22, 1, 0.36, 1);
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
  font-size: min(var(--text-hero), calc((100vw - 2 * var(--gutter)) / 11.8));
  text-align: center;
}
.hw[data-mode="focus"] { --hw-dur: 900ms; }
.hw__we, .hw__px, .hw__slot { display: inline-block; vertical-align: baseline; }
.hw__slot { position: relative; color: var(--gold); }
/* The outgoing word sits over the slot while it leaves; only its vertical edge is clipped in the roll modes. */
.hw__word { display: inline-block; }
.hw__ghost { position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; }
.hw[data-mode="roll"] .hw__slot, .hw[data-mode="fixed"] .hw__slot { clip-path: inset(-0.08em -50vw -0.12em -50vw); }
.hw[data-mode="type"] .hw__word.is-typing::after { content: ""; display: inline-block; width: 0.08em; height: 0.82em; margin-left: 0.04em; background: var(--gold); vertical-align: -0.04em; }
.hw--fixed .hw__slot { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .hw * { transition: none !important; }
}