*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --pad: clamp(1.25rem, 3vw, 2.5rem);
  --max: 1600px;
  --content: min(100vw - 2 * var(--pad), var(--max));
  --sky: #000;
  --street: #15130e;
  --metal-top: #303030;
  --metal-bottom: #1d1d1d;
  --text: #fafafa;
  --muted: #a1a1aa;
  --neon: #ffd23f;
  --neon-hot: #fff6d5;
  --amber: #ff9a1f;

  --lit-glow:
    0 0 0.01em #fff,
    0 0 0.03em var(--neon),
    0 0 0.08em var(--neon),
    0 0 0.2em var(--amber),
    0 0 0.45em rgb(255 140 0 / 0.45);
}

html {
  height: 100%;
  overflow: auto;
}

body {
  margin: 0;
  min-height: 100%;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--pad) calc((100vw - var(--content)) / 2) calc(var(--pad) * 0.75);
  overflow: hidden;
  overflow: clip;
  background: linear-gradient(180deg, var(--sky) 0%, var(--sky) 45%, var(--street) 100%);
  color: var(--text);
  font-family: "Archivo", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p {
  margin: 0;
  text-wrap: pretty;
}

/* Top bar */

.bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}

.copy {
  display: grid;
  gap: 0.4rem;
  max-width: 34rem;
}

.note {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.sub {
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);
  color: var(--muted);
}

.cta {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.8em 1.3em;
  border: 0;
  border-radius: 8px;
  background: var(--neon);
  color: #000;
  font: 600 1rem/1 "Archivo", system-ui, sans-serif;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.cta:hover,
.cta:focus-visible {
  background: var(--neon-hot);
  box-shadow: 0 0 0 1px var(--neon), 0 0 28px rgb(255 190 40 / 0.55);
}

.cta:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 4px;
}

/* Wordmark: unlit letters along the bottom edge, one tube lit */

.wordmark {
  grid-row: 3;
  margin: 0 0 -0.035em;
  font-weight: 800;
  font-stretch: 62%;
  font-size: min(calc(var(--content) * 0.335), 75svh);
  line-height: 0.74;
  letter-spacing: -0.01em;
  white-space: nowrap;
  user-select: none;
  background: linear-gradient(180deg, var(--metal-top), var(--metal-bottom));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lit {
  position: relative;
  -webkit-text-fill-color: var(--neon-hot);
  color: var(--neon-hot);
  text-shadow: var(--lit-glow);
  animation: flicker 3s linear infinite;
}

/* Haze rising off the lit tube */
.lit::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -0.6em;
  width: 2.2em;
  height: 2.6em;
  translate: -50% 0;
  background: radial-gradient(closest-side, rgb(255 190 60 / 0.2), rgb(255 150 30 / 0.06) 55%, transparent);
  pointer-events: none;
  animation: haze 3s linear infinite;
}

@keyframes flicker {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
    opacity: 1;
    text-shadow: var(--lit-glow);
  }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
    opacity: 0.3;
    text-shadow: none;
  }
}

@keyframes haze {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
    opacity: 1;
  }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
    opacity: 0.15;
  }
}

/* Portrait screens: stack the copy above the button */

@media (max-aspect-ratio: 4/5) {
  .bar {
    flex-direction: column;
  }
}

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

  .cta {
    transition: none;
  }
}