.welcome-system-accent {
  display: none !important;
}

#welcome-system-canvas {
  /* Keep the animated system subtle, but visible on true-black displays. A zero-blur
     shadow reinforces the existing pixels without adding another animation or DB/UI work. */
  filter: drop-shadow(0 0 0 rgba(255, 255, 255, .65));
}

.welcome-reading-headline .welcome-read-heading {
  display: block;
  color: var(--welcome-paper);
  font-weight: 700;
  opacity: .34;
  transform: scale(.985);
  transform-origin: center;
  transition:
    opacity 520ms cubic-bezier(.22, .61, .36, 1),
    transform 620ms cubic-bezier(.22, .61, .36, 1),
    color 520ms ease;
  will-change: opacity, transform;
}

.welcome-reading-headline .welcome-read-heading-secondary {
  color: var(--welcome-frost);
  font-weight: 400;
}

.welcome-reading-lead {
  display: grid;
  gap: 3px;
}

.welcome-read-lead {
  display: block;
  opacity: .26;
  transform: translateY(5px) scale(.992);
  transform-origin: center;
  transition:
    opacity 480ms cubic-bezier(.22, .61, .36, 1),
    transform 560ms cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}

.welcome-read-heading.is-read {
  opacity: .72;
  transform: scale(1);
}

.welcome-read-lead.is-read {
  opacity: .62;
  transform: translateY(0) scale(1);
}

.welcome-read-heading.is-reading {
  opacity: 1;
  transform: scale(1.022);
}

.welcome-read-lead.is-reading {
  opacity: 1;
  transform: translateY(0) scale(1.012);
}

.welcome-reading-complete .welcome-read-step {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .welcome-read-step,
  .welcome-reading-complete .welcome-read-step {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}