/* Coach-login font and TextType cursor. The keyword keeps its fixed longest-word
 * layout; the caret follows the typed text without moving the surrounding copy. */
@font-face {
  font-family: "Alimama ShuHeiTi Entry";
  src: url("./fonts/AlimamaShuHeiTi-Entry.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

h1.entry-headline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  white-space: nowrap;
  font-family: "Alimama ShuHeiTi Entry", "PingFang SC", -apple-system, BlinkMacSystemFont, sans-serif;
  /* Fit all nine characters and the caret between the page gutters. Short
   * screens use natural scrolling instead of shrinking otherwise fitting text. */
  font-size: clamp(24px, calc((100vw - 56px) / 9.6), 72px);
  line-height: 1.04;
  font-weight: 900;
  font-synthesis: none;
  letter-spacing: 0;
  color: #25252c;
  text-align: center;
  margin-top: 0;
}

.entry-headline > .entry-headline-line {
  display: inline-flex;
  flex: none;
  align-items: center;
  color: inherit;
  /* Include the caret overhang in the centered group, including blink-off frames. */
  padding-inline-end: var(--headline-cursor-space, .3em);
}

.entry-headline-keyword {
  --headline-characters: 4;
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: flex-start;
  flex: none;
  width: calc(var(--headline-characters) * 1em);
  height: 1.12em;
  padding: 0;
  overflow: visible;
  color: #0054fd;
  font-size: 1em;
  line-height: 1.12;
  white-space: nowrap;
}

.entry-headline-word {
  display: inline-block;
  position: relative;
  flex: none;
  min-height: 1.12em;
  line-height: 1.12;
  white-space: pre;
}

.entry-headline-text {
  display: inline-block;
  white-space: pre;
}

.entry-headline-cursor {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: .08em;
  color: #0054fd;
  font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  line-height: 1.12;
  pointer-events: none;
  /* Original: GSAP power2.inOut, .5s each direction. This cubic-bezier is
     its lightweight CSS approximation; the full blink cycle stays one second. */
  animation: entry-type-cursor .5s cubic-bezier(.65,0,.35,1) infinite alternate;
  animation-play-state: paused;
}
.entry-headline-keyword[data-headline-state="running"] .entry-headline-cursor { animation-play-state: running; }
.entry-headline-keyword[data-headline-state="static"] .entry-headline-cursor,
.entry-headline-keyword[data-headline-state="disposed"] .entry-headline-cursor,
.entry-headline-keyword[data-headline-state="loading-font"] .entry-headline-cursor { visibility: hidden; }
@keyframes entry-type-cursor { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .entry-headline-cursor { animation: none; visibility: hidden; }
}
