/* Home intro: the typed field list and the welcome paragraph, left of the card */

.intro {
  position: relative;
  z-index: 1;
  margin: 0 0 clamp(28px, 5vw, 48px);
}

.intro__line {
  /* min-height holds the row open while the word is erased, so nothing jumps */
  min-height: 1.25em;
  margin: 0 0 20px;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 600;
  letter-spacing: -.02em;
}

/* The typer used to cycle through five neon colours, one per word. It is one
   colour now — the movement is already the interesting part, and a heading
   that changes hue every two seconds is the loudest thing on the page. */
.typer { display: inline-flex; align-items: baseline; color: var(--ink); }
.typer__caret {
  display: inline-block;
  width: .55ch;
  height: .88em;
  margin-left: .12ch;
  translate: 0 .06em;
  background: var(--accent);
  animation: caret 1.05s steps(2) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.intro__welcome {
  max-width: 58ch;
  margin: 0;
  color: var(--ink-dim);
  font-size: clamp(14.5px, 1.4vw, 16px);
  line-height: 1.75;
}
.intro__welcome b { color: var(--ink); font-weight: 600; }

/* Same treatment as a note's [[wikilink]], so a link in the intro reads as the
   same kind of thing as a link inside a note. */
.intro__link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  padding: 0 1px;
  transition: border-color .18s, color .18s;
}
.intro__link:hover,
.intro__link:focus-visible {
  color: var(--ink);
  border-color: var(--ink);
  border-bottom-style: solid;
}

@media (max-width: 900px) {
  .intro { text-align: center; }
  .intro__welcome { margin-inline: auto; }
  .typer { justify-content: center; }
}