.home-title {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* A quiet stack of links, parked halfway between the bottom of the outer ring
   and the bottom of the page. */
.home-links {
  position: absolute;
  left: 50%;
  top: calc(75vh + var(--ring-outer-size) / 4);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Dim until you point at one, then it lights up the way the stars do. */
.home-link {
  font-size: var(--font-size-label);
  color: var(--color-accent-300);
  text-decoration: none;
  letter-spacing: 0.18em;
  opacity: 0.55;
  text-shadow: none;
  transition: opacity 300ms ease, text-shadow 300ms ease;
}

.home-link:hover,
.home-link:focus-visible {
  opacity: 1;
  text-shadow: 0 0 18px color-mix(in srgb, var(--color-accent-300) 55%, transparent);
}

.home-link:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--color-accent-300) 60%, transparent);
  outline-offset: 6px;
}

/* The rings hold the design's sizes until the viewport is narrower than they
   are, then shrink with it rather than getting cropped. They live on the
   container because the github link is positioned off the outer ring too. */
.container {
  --ring-inner-size: min(340px, 68vw);
  --ring-outer-size: min(460px, 92vw);
}

/* The night sky behind the wordmark: two breathing rings and a fixed field of
   stars. Star positions are baked into the markup as custom properties — the
   design generated them at random, this page ships one draw of that random. */
.sky {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  animation: pulsate 8s ease-in-out infinite;
}

.ring-inner {
  width: var(--ring-inner-size);
  height: var(--ring-inner-size);
  margin: calc(var(--ring-inner-size) / -2) 0 0 calc(var(--ring-inner-size) / -2);
  border: 1px solid color-mix(in srgb, var(--color-accent-300) 40%, transparent);
}

.ring-outer {
  width: var(--ring-outer-size);
  height: var(--ring-outer-size);
  margin: calc(var(--ring-outer-size) / -2) 0 0 calc(var(--ring-outer-size) / -2);
  border: 1px solid color-mix(in srgb, var(--color-accent-300) 22%, transparent);
  animation-delay: 1s;
}

.star {
  position: absolute;
  top: var(--top);
  left: var(--left);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background-color: var(--color-text);
  opacity: var(--opacity);
  animation: twinkle var(--duration) ease-in-out var(--delay) infinite;
}

@keyframes pulsate {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes twinkle {
  0%, 100% { opacity: var(--opacity); }
  50% { opacity: calc(var(--opacity) * 0.25); }
}

/* Nothing here conveys meaning, so anyone who asked for less motion gets a
   still sky. */
@media (prefers-reduced-motion: reduce) {
  .ring,
  .star {
    animation: none;
  }
}