/* A blinking block cursor that ends a headline, as on basecamp.com/ai */
.cursor {
  --cursor-height: 0.95em;

  animation: blink 1s step-end infinite;
  background-color: currentColor;
  display: inline-block;
  height: var(--cursor-height);
  letter-spacing: normal;
  margin-top: calc(var(--cursor-height) * -1);
  overflow: hidden;
  text-indent: 100%;
  vertical-align: -0.0875em;
  white-space: nowrap;
  width: 0.6em;
}

/* The intro's headline paints a gradient into its letters, so the cursor
   takes the colour the gradient ends on */
.intro header h1 .cursor {
  background-color: var(--color-salmon);
}

@media(prefers-color-scheme: dark) {
  .intro header h1 .cursor {
    background-color: rgb(222, 137, 131);
  }
}

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

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