/* Matrix landing — william-humphreys.co.uk
 * Palette and layout for the digital-rain page. Single, committed dark theme (a terminal world),
 * so no light-mode tokens by design. */

:root {
  --bg:         #000;
  --rain:       #00ff41;   /* Matrix green — the rain body + accents */
  --rain-head:  #d9ffe3;   /* bright leading glyph (set in JS, mirrored here for reference) */
  --title:      #e7ffee;   /* near-white green for the headline */
  --glow:       0 255 65;  /* rgb channels, consumed as rgb(var(--glow) / <alpha>) */
}

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

html,
body {
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}

/* Full-window canvas the rain is drawn onto. */
#rain {
  position: fixed;
  inset: 0;
  display: block;
}

/* Centred title, lifted off the rain by a soft radial vignette. */
.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 6vw;
  text-align: center;
  pointer-events: none;
  background: radial-gradient(58% 52% at 50% 50%,
    rgb(0 0 0 / 0.74) 0%,
    rgb(0 0 0 / 0.40) 46%,
    transparent 76%);
}

.title {
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: 700;
  font-size: clamp(2.1rem, 11vw, 9rem);
  line-height: 0.95;
  letter-spacing: 0.05em;
  color: var(--title);
  text-shadow:
    0 0 0.05em #baffc9,
    0 0 0.22em var(--rain),
    0 0 0.55em var(--rain),
    0 0 1.10em rgb(var(--glow) / 0.6);
  animation: flicker 5.5s steps(1) infinite;
}

.tagline {
  margin-top: 1.5rem;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: clamp(0.68rem, 2.3vw, 1.05rem);
  letter-spacing: 0.44em;
  text-indent: 0.44em; /* re-centre against the trailing letter-spacing */
  color: var(--rain);
  opacity: 0.75;
  text-shadow: 0 0 0.5em rgb(var(--glow) / 0.6);
}

/* CRT scanlines over the whole screen. */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: overlay;
  background: repeating-linear-gradient(0deg,
    transparent 0 2px,
    rgb(0 0 0 / 0.55) 2px 3px);
}

@keyframes flicker {
  0%, 17%, 19%, 54%, 56%, 100% { opacity: 1; }
  18%, 55%                     { opacity: 0.68; }
  92%, 94%                     { opacity: 0.85; }
}

/* Respect users who ask for less motion: hold the headline steady. */
@media (prefers-reduced-motion: reduce) {
  .title { animation: none; }
}