/* A headline's cycling ending (js/title-cycle.js), as home.css sets the homepage's: the static
   words, the typed copy and the two other phrases (reserved as invisible generated text) share
   one grid cell, so the cell is as wide as the longest phrase and one line tall whatever is
   typed in it. Only the accent words take the accent; a page's own rule for spans in its
   headline is undone on the parts around them. */

.hero-title .title-cycle { display: inline-grid; white-space: nowrap; }
.hero-title .title-cycle > *,
.hero-title .title-cycle::before,
.hero-title .title-cycle::after { grid-area: 1 / 1; justify-self: start; }
.hero-title .title-cycle::before { content: attr(data-reserve-a); visibility: hidden; }
.hero-title .title-cycle::after { content: attr(data-reserve-b); visibility: hidden; }

.hero-title .title-cycle,
.hero-title .title-cycle-static,
.hero-title .title-cycle-typed,
.hero-title .title-cycle-lead,
.hero-title .title-cycle-tail {
  background: none;
  -webkit-text-fill-color: currentColor;
}

.hero-title .title-cycle-typed { opacity: 0; }
.hero-title .title-cycle.is-cycling .title-cycle-static { opacity: 0; }
.hero-title .title-cycle.is-cycling .title-cycle-typed { opacity: 1; }