/* Self-hosted Inter — loads from our own server, so every visitor (Apple,
   Windows, Android) sees the exact same font. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100;
  font-display: swap; src: url("fonts/inter-100.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 200;
  font-display: swap; src: url("fonts/inter-200.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 300;
  font-display: swap; src: url("fonts/inter-300.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/inter-400.woff2") format("woff2");
}

:root {
  --bg: #0a0a0a;
  --fg: #cfcfcf;
  --mono: "SF Mono", "JetBrains Mono", "Menlo", "Monaco", monospace;

  /* Neon glow — cold white, tuned down for the small, restrained caption
     so it reads as a soft halo, not a blob. */
  --neon:      #cfe8ff;
  --neon-soft: #eaf4ff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  /* the faintest vignette so the glow has a room to hang in —
     barely there, keeps the page feeling clean. */
  background:
    radial-gradient(120% 90% at 50% 48%, #101014 0%, var(--bg) 62%, #050507 100%);
}

.display {
  text-align: center;
  pointer-events: none;
  user-select: none;
  /* nudge the phrase a little above the optical centre */
  transform: translateY(-3vh);
}

/* The phrase sits at a low baseline opacity (a faint ghost that is always on
   screen) and, on each beat, brightens to a lit neon tube — bright core
   plus a soft layered halo. JS toggles the .lit class; CSS handles the fade so
   it breathes rather than strobes. */
.phrase {
  /* Self-hosted Inter first, so every device shows the same font. */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(15px, 2.8vw, 22px);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  /* nudge for the trailing letter-spacing so the line stays optically centred */
  padding-left: 0.22em;
  /* OFF state — the tube is dark: a faint ghost, always softly present.
     Driven by COLOR (not opacity), so when it lights the glow and the
     brightness arrive together — no lag. */
  color: #242427;
  text-shadow: none;
  transition:
    color       var(--fade, 90ms) ease,
    text-shadow var(--fade, 90ms) ease;
}

/* ON state — the tube lights up: cold-white core + soft layered glow,
   scaled small so the caption stays elegant. */
.phrase.lit {
  color: #fbfdff;
  text-shadow:
    0 0 2px  #ffffff,
    0 0 6px  var(--neon-soft),
    0 0 12px var(--neon),
    0 0 22px var(--neon),
    0 0 36px var(--neon);
  animation: buzz 3.7s infinite;
}

/* tiny idle flicker on the lit sign, like a real worn-out tube */
@keyframes buzz {
  0%, 100% { opacity: 1; }
  92%      { opacity: 1; }
  93%      { opacity: 0.86; }
  94%      { opacity: 1; }
  97%      { opacity: 0.92; }
  98%      { opacity: 1; }
}