/* Coming soon page.
   Builds on styles.css for the palette, theme tokens and the name button.
   The text on this page is set in JetBrains Mono. The name keeps Geist Pixel. */

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-text: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}

/* The bar and the status line share one width: the width of the final message. */

.loader {
  z-index: 2;
  align-self: center;
  justify-self: center;
  display: grid;
  gap: clamp(1rem, 2vw, 1.4rem);
  width: max-content;
  max-width: calc(100vw - 2.5rem);
  animation: fade-in 0.9s ease-out 0.2s both;
}

/* Progress bar, held at 69%: a solid frame with the fill inset inside it */

.bar {
  padding: 3px;
  border: 2px solid var(--fg);
  transition: border-color var(--theme-fade);
}

.bar-fill {
  display: block;
  width: 69%;
  height: 0.8rem;
  background: var(--accent);
  transform-origin: left center;
  animation: bar-fill 1.7s var(--ease) 0.3s both;
}

@keyframes bar-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Status line. The hidden sizer reserves the width of the longest string so the text
   stays anchored to the left edge while it is written and erased. */

.status {
  display: grid;
  color: var(--fg-soft);
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  line-height: 1.4;
  letter-spacing: 0;
  white-space: pre;
  transition: color var(--theme-fade);
}

.status > * {
  grid-area: 1 / 1;
}

.sizer {
  visibility: hidden;
}

.status-line {
  justify-self: start;
}

/* Terminal prompt: a bold ">" at the start of the line, and a thick block caret after the text */

.prompt {
  display: inline-block;
  width: 0.42em;
  height: 0.7em;
  margin-right: 0.4em;
  vertical-align: 0;
  letter-spacing: 0;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: square;
}

.caret {
  display: inline-block;
  width: 0.6em;
  height: 1em;
  margin-left: 0.08em;
  vertical-align: -0.14em;
  background: var(--accent);
  animation: caret-blink 750ms step-end infinite;   /* 3 of these fit inside HOLD_MS (2500) in main_cs.js */
}

.status:is([data-phase="intro"], [data-phase="erasing"], [data-phase="typing"]) .caret {
  animation: none;
}

/* Once a line has been typed, its dots blink one after another */

.status[data-phase="rest"] .dot {
  animation: blink 1.2s step-end infinite;
  animation-delay: calc(var(--i) * 0.2s);
}

@keyframes blink {
  50% { opacity: 0.08; }
}

@keyframes caret-blink {
  50% { opacity: 0; }
}