/* The neon "LET'S MAKE PROGRESS" sign (key art title, option A).
   Used by the game's title screen and copied as-is into the promo kit
   (promo/title-kit/, built by scripts/build-promo-kit.mjs), so keep it
   self-contained: no game variables in here.

   Markup:
     <h1 class="neon-title" aria-label="Let's Make Progress">
       <span class="neon-make" aria-hidden="true">LET'S MAKE</span>
       <span class="neon-progress" aria-hidden="true">PROGRESS</span>
     </h1>

   Size the whole sign with --neon-size (the height of "PROGRESS");
   "LET'S MAKE" and the glows scale with it. */

@font-face {
  font-family: "Monoton";
  font-style: normal;
  font-weight: 400;
  /* Block briefly rather than flash the title in a fallback font. */
  font-display: block;
  src: url("./fonts/monoton-latin-400.woff2") format("woff2");
}

.neon-title {
  --neon-size: 138px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--neon-size) * 0.015);
  font-family: "Monoton", "Courier New", monospace;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

/* Cyan tube, the one that buzzes. */
.neon-make {
  font-size: calc(var(--neon-size) * 0.42);
  letter-spacing: 0.08em;
  /* letter-spacing adds space after the last letter too; pull it back so it centres. */
  margin-right: -0.08em;
  color: #eafcff;
  text-shadow:
    0 0 calc(var(--neon-size) * 0.022) #ffffff,
    0 0 calc(var(--neon-size) * 0.072) #4fe7ff,
    0 0 calc(var(--neon-size) * 0.174) #1fc8ff,
    0 0 calc(var(--neon-size) * 0.348) #0aa3ff;
  animation: neon-buzz 5s infinite;
}

/* Pink tube, steady. */
.neon-progress {
  font-size: var(--neon-size);
  letter-spacing: 0.04em;
  margin-right: -0.04em;
  color: #fff0fb;
  text-shadow:
    0 0 calc(var(--neon-size) * 0.029) #ffffff,
    0 0 calc(var(--neon-size) * 0.087) #ff5fd9,
    0 0 calc(var(--neon-size) * 0.217) #ff2fc3,
    0 0 calc(var(--neon-size) * 0.464) #ff16b0,
    0 0 calc(var(--neon-size) * 0.797) #c8008a;
}

/* Three quick dips per 5 seconds, like a tube about to go. */
@keyframes neon-buzz {
  0%, 18%, 20.5%, 23%, 61%, 63%, 100% { opacity: 1; }
  19%, 22%, 62% { opacity: 0.35; }
}

/* A single hard stutter, e.g. when the player taps "Tap to begin". */
.neon-title.surge .neon-make,
.neon-title.surge .neon-progress {
  animation: neon-surge 0.45s steps(1, end) 1;
}
@keyframes neon-surge {
  0% { opacity: 1; }
  15% { opacity: 0.2; }
  30% { opacity: 1; }
  50% { opacity: 0.4; }
  65% { opacity: 1; }
}

/* Players who turn off motion get a steady glow. */
@media (prefers-reduced-motion: reduce) {
  .neon-make,
  .neon-title.surge .neon-make,
  .neon-title.surge .neon-progress {
    animation: none;
  }
}