/* ── Haywire Labs ─────────────────────────────────────────────────────────
   Palette
   primary dark     #161427   background
   supporting       #473E63   top vignette
   paper            #F4F2EB   headline
   spot accent      #7A5AE0   glow / "LABS" / hover
   pale lavender    #EAE4F1   sub-line / contact link
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --primary-dark: #161427;
  --supporting: #473E63;
  --paper: #F4F2EB;
  --accent: #7A5AE0;
  --pale-lavender: #EAE4F1;

  --max-width: 60rem;
}

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

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background-color: var(--primary-dark);
  /* subtle top vignette in the supporting tone, fading into the dark */
  background-image: radial-gradient(
    120% 80% at 50% -10%,
    rgba(71, 62, 99, 0.55) 0%,
    rgba(71, 62, 99, 0.18) 35%,
    rgba(22, 20, 39, 0) 65%
  );
  background-repeat: no-repeat;
  color: var(--paper);
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Layout: three vertical zones in a full-height column ──────────────── */

.page {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  padding: clamp(2rem, 6vh, 5rem) 1.5rem;
  gap: clamp(2rem, 8vh, 6rem);
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
}

/* ── Top zone: glowing wordmark ───────────────────────────────────────── */

.wordmark-zone {
  align-self: start;
  width: 100%;
  padding-top: clamp(1rem, 6vh, 4rem);
}

.wordmark {
  position: relative;
  display: inline-block;
  margin: 0;
  font-weight: 700;
  font-size: clamp(2.25rem, 9vw, 5.5rem);
  letter-spacing: 0.18em;
  /* leading edge of letter-spacing adds trailing space; nudge to re-center */
  text-indent: 0.18em;
  line-height: 1;
  /* power-on: sit dark for ~5s, then flicker to life. One-shot; the per-word
     glow loops keep running underneath, so the strike lands on a live phase. */
  animation: neon-warmup 6s steps(1, jump-end) forwards;
}

/* ambient backlight behind the text — a faint twilight ellipse, no glyph bloom.
   Matches the reference: glow lives in the background, letters stay crisp. */
.wordmark__glow {
  /* experiment: text neon is the only light source — hide the backlight ellipse.
     Remove this line to bring the ambient background bloom back. */
  display: none;

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 150%;
  height: 320%;
  background: radial-gradient(
    ellipse 80% 60% at 50% 50%,
    color-mix(in oklab, var(--accent) 24%, transparent),
    transparent 70%
  );
  z-index: 0;
  pointer-events: none;
  animation: glow-pulse 5s ease-in-out infinite;
}

.wordmark__text {
  position: relative;
  z-index: 1;
  color: var(--paper); /* bone tube, lit by an accent halo */
  /* neon: a soft bone-white rim at the glyph edge (same "hot core" trick as
     LABS, in bone) gives HAYWIRE depth/separation from its widening accent bloom.
     Rim kept at 2px+ (not 1px) so diagonal strokes don't show aliased jaggies. */
  text-shadow:
    0 0 2px rgba(244, 242, 235, 0.6),
    0 0 4px rgba(244, 242, 235, 0.3),
    0 0 6px rgba(122, 90, 224, 0.85),
    0 0 14px rgba(122, 90, 224, 0.6),
    0 0 28px rgba(122, 90, 224, 0.45),
    0 0 48px rgba(122, 90, 224, 0.3);
  animation: neon-flicker 6.1s ease-in-out infinite;
}

.wordmark__accent {
  color: var(--accent); /* stays the spot purple */
  /* same-hue fill + halo would wash out, so trace a tight near-white rim right
     at the glyph edge (the "hot core" of a colored neon tube). The rim reads as
     a crisp edge; the purple still blooms beyond it. Own synced flicker below. */
  text-shadow:
    0 0 2px rgba(234, 228, 241, 0.6),
    0 0 4px rgba(234, 228, 241, 0.3),
    0 0 7px rgba(122, 90, 224, 0.9),
    0 0 16px rgba(122, 90, 224, 0.62),
    0 0 30px rgba(122, 90, 224, 0.45),
    0 0 50px rgba(122, 90, 224, 0.3);
  animation: neon-flicker-accent 8.3s ease-in-out infinite;
}

/* breathing pulse of the backlight with a couple of quick "haywire" flickers.
   Resting opacity (~0.6) keeps the glow near the reference's faint level;
   peaks brighten it, and the stutters give it the "haywire" instability. */
@keyframes glow-pulse {
  0% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  40% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.14);
  }
  /* quick electrical stutter near the peak */
  44% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1.08);
  }
  47% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.11);
  }
  70% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(1.03);
  }
  /* second, briefer flicker on the way down */
  73% {
    opacity: 0.28;
    transform: translate(-50%, -50%) scale(1.01);
  }
  76% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.03);
  }
  100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* neon tube flicker — synced to glow-pulse: brightens at the peak, briefly
   "blacks out" at the two haywire stutters, otherwise burns steady. */
@keyframes neon-flicker {
  /* snappy/electrical: long calm burn punctuated by rapid strobe bursts. Stops
     sit ~0.5% apart (≈30ms) so peak↔dark snaps instead of swells. Timeline:
     0 calm · 8.5 blip-off · 9 on · 49 calm · 49.5–52 STROBE · 52.5 settle.
     steps(1) on every stop kills interpolation → hard on/off, no fade. */
  0%,
  9%,
  49%,
  52.5%,
  100% {
    animation-timing-function: steps(1, jump-end);
    text-shadow:
      0 0 2px rgba(244, 242, 235, 0.6),
      0 0 4px rgba(244, 242, 235, 0.3),
      0 0 6px rgba(122, 90, 224, 0.85),
      0 0 14px rgba(122, 90, 224, 0.6),
      0 0 28px rgba(122, 90, 224, 0.45),
      0 0 48px rgba(122, 90, 224, 0.3);
  }
  /* strobe-bright peaks */
  49.5%,
  50.5%,
  51.5% {
    animation-timing-function: steps(1, jump-end);
    text-shadow:
      0 0 2px rgba(244, 242, 235, 0.7),
      0 0 5px rgba(244, 242, 235, 0.4),
      0 0 8px rgba(122, 90, 224, 0.95),
      0 0 18px rgba(122, 90, 224, 0.72),
      0 0 36px rgba(122, 90, 224, 0.52),
      0 0 64px rgba(122, 90, 224, 0.36);
  }
  /* blackout dips: bloom snaps off, soft rim survives so HAYWIRE never blurs */
  8.5%,
  50%,
  51%,
  52% {
    animation-timing-function: steps(1, jump-end);
    text-shadow:
      0 0 2px rgba(244, 242, 235, 0.4),
      0 0 4px rgba(122, 90, 224, 0.28),
      0 0 9px rgba(122, 90, 224, 0.16);
  }
}

/* LABS keeps the accent fill, so its flicker keeps the tight bone-white rim lit
   (edges stay crisp) while the purple bloom swells and stutters in sync. */
@keyframes neon-flicker-accent {
  /* LABS on its own clock (8.3s vs HAYWIRE's 6.1s) and its own shape: an early
     strobe burst, long calm, then one lone late flick. Same hard-snap treatment.
     Timeline: 0 calm · 16.5–18.5 STROBE · 19 settle · 68.5 lone flick-off · 69 on. */
  0%,
  16%,
  19%,
  69%,
  100% {
    animation-timing-function: steps(1, jump-end);
    text-shadow:
      0 0 2px rgba(234, 228, 241, 0.6),
      0 0 4px rgba(234, 228, 241, 0.3),
      0 0 7px rgba(122, 90, 224, 0.9),
      0 0 16px rgba(122, 90, 224, 0.62),
      0 0 30px rgba(122, 90, 224, 0.45),
      0 0 50px rgba(122, 90, 224, 0.3);
  }
  /* strobe-bright peaks */
  16.5%,
  17.5%,
  18.5% {
    animation-timing-function: steps(1, jump-end);
    text-shadow:
      0 0 2px rgba(234, 228, 241, 0.75),
      0 0 5px rgba(234, 228, 241, 0.4),
      0 0 9px rgba(122, 90, 224, 0.98),
      0 0 20px rgba(122, 90, 224, 0.72),
      0 0 38px rgba(122, 90, 224, 0.52),
      0 0 66px rgba(122, 90, 224, 0.36);
  }
  /* blackout dips: bloom snaps off, soft rim survives so LABS never blurs */
  17%,
  18%,
  68.5% {
    animation-timing-function: steps(1, jump-end);
    text-shadow:
      0 0 2px rgba(234, 228, 241, 0.5),
      0 0 4px rgba(122, 90, 224, 0.28),
      0 0 9px rgba(122, 90, 224, 0.16);
  }
}

/* power-on intro: the sign holds as faint unlit tubes (~5s of a 6s run), then
   strikes — a couple of failed catches and stutters — before settling fully lit.
   steps() makes each stage a hard snap; `forwards` holds it on afterwards. */
@keyframes neon-warmup {
  0%,
  84% {
    opacity: 0.05;
  }
  85% { opacity: 0.9; }   /* first strike — flashes */
  86% { opacity: 0.1; }   /* doesn't hold */
  88% { opacity: 1; }     /* catches */
  89% { opacity: 0.2; }   /* flickers */
  91% { opacity: 0.95; }
  92% { opacity: 0.35; }  /* one last stutter */
  94%,
  100% {
    opacity: 1;           /* lit, steady */
  }
}

/* ── Center zone: tagline ─────────────────────────────────────────────── */

.tagline-zone {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.headline {
  margin: 0;
  color: var(--paper);
  font-weight: 500;
  font-size: clamp(1.5rem, 4.5vw, 2.75rem);
  letter-spacing: 0.01em;
}

.subline {
  margin: 0;
  color: var(--pale-lavender);
  font-weight: 400;
  font-size: clamp(0.95rem, 2.2vw, 1.2rem);
  letter-spacing: 0.03em;
  opacity: 0.85;
}

/* ── Bottom zone: contact + footer ────────────────────────────────────── */

.footer-zone {
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.contact {
  color: var(--pale-lavender);
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.contact:hover,
.contact:focus-visible {
  color: var(--accent);
  text-shadow: 0 0 16px rgba(122, 90, 224, 0.55);
}

.copyright {
  margin: 0;
  color: var(--pale-lavender);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  opacity: 0.45;
}

/* ── 404 page (reuses the page background, fonts, palette) ─────────────── */

/* one centered block instead of the three-zone column */
.page--error {
  grid-template-rows: 1fr;
  place-items: center;
}

.error-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* a quiet neon echo of the wordmark, in the accent purple */
.error-code {
  margin: 0 0 0.25rem;
  font-weight: 700;
  font-size: clamp(3.5rem, 16vw, 8rem);
  letter-spacing: 0.1em;
  color: var(--accent);
  text-shadow:
    0 0 2px rgba(234, 228, 241, 0.4),
    0 0 18px rgba(122, 90, 224, 0.5),
    0 0 44px rgba(122, 90, 224, 0.3);
}

.error-home {
  margin-top: 0.75rem;
}

/* ── Respect reduced-motion preferences ───────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .wordmark__glow {
    animation: none;
    opacity: 0.85;
  }
  /* keep the neon lit, just hold it steady (no flicker) */
  .wordmark__text,
  .wordmark__accent {
    animation: none;
  }
  /* skip the power-on intro — show the sign lit from the first paint */
  .wordmark {
    animation: none;
    opacity: 1;
  }
}