:root {
  color-scheme: dark;
  --ink: #05060a;
  --text: #f0f2ff;
  --cyan: #5cf3ff;
  --magenta: #ff4df0;
  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", "Source Code Pro",
    Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

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

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

body {
  font-family: var(--mono);
  background: var(--ink);
  color: var(--text);
  overflow: hidden;
}

.fx-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* CRT scanlines — thin grey stripes + near-hidden "miloparsons" watermark */
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='44' viewBox='0 0 260 44'%3E%3Cg font-family='ui-monospace,SFMono-Regular,Menlo,Consolas,monospace' font-size='11' letter-spacing='3' fill='%23c8d2e1' fill-opacity='0.035'%3E%3Ctext x='0' y='15'%3Emiloparsons%3C/text%3E%3Ctext x='130' y='37'%3Emiloparsons%3C/text%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(
      to bottom,
      rgba(180, 190, 210, 0.02) 0 1px,
      transparent 1px 3px
    );
  background-repeat: repeat, repeat;
  mix-blend-mode: soft-light;
  opacity: 0.25;
}

/* Slight vignette for focus */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 35%,
    rgba(0, 0, 0, 0.65) 100%
  );
}

.stage {
  position: relative;
  z-index: 3;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.domain {
  margin: 0;
  font-size: clamp(1.05rem, 3.2vw + 0.55rem, 2.1rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 0.25ch;
}

/* Core glitch text: chromatic split via two stacked pseudo-elements */
.domain__glitch {
  position: relative;
  display: inline-block;
  color: var(--text);
  text-shadow:
    0 0 12px rgba(240, 242, 255, 0.35),
    0 0 1px rgba(92, 243, 255, 0.6),
    0 0 1px rgba(255, 77, 240, 0.6);
}

.domain__glitch::before,
.domain__glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent;
  mix-blend-mode: screen;
}

.domain__glitch::before {
  color: var(--cyan);
  transform: translate(-1px, 0);
  clip-path: inset(0 0 0 0);
  animation: glitch-slice-a 4.1s steps(1) infinite;
}

.domain__glitch::after {
  color: var(--magenta);
  transform: translate(1px, 0);
  clip-path: inset(0 0 0 0);
  animation: glitch-slice-b 4.1s steps(1) infinite;
}

/* Each keyframe is a short burst near the end of the cycle */
@keyframes glitch-slice-a {
  0%,
  92% {
    transform: translate(-1px, 0);
    clip-path: inset(0 0 0 0);
  }
  92.5% {
    transform: translate(-3px, 0);
    clip-path: inset(8% 0 78% 0);
  }
  93.5% {
    transform: translate(4px, -1px);
    clip-path: inset(42% 0 38% 0);
  }
  94.5% {
    transform: translate(-5px, 1px);
    clip-path: inset(65% 0 12% 0);
  }
  95.5% {
    transform: translate(2px, 0);
    clip-path: inset(20% 0 55% 0);
  }
  96.5% {
    transform: translate(-2px, 0);
    clip-path: inset(80% 0 5% 0);
  }
  97.5% {
    transform: translate(3px, 0);
    clip-path: inset(10% 0 70% 0);
  }
  98.5%,
  100% {
    transform: translate(-1px, 0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes glitch-slice-b {
  0%,
  92% {
    transform: translate(1px, 0);
    clip-path: inset(0 0 0 0);
  }
  92.5% {
    transform: translate(3px, 1px);
    clip-path: inset(60% 0 18% 0);
  }
  93.5% {
    transform: translate(-4px, 0);
    clip-path: inset(15% 0 70% 0);
  }
  94.5% {
    transform: translate(5px, 0);
    clip-path: inset(35% 0 45% 0);
  }
  95.5% {
    transform: translate(-2px, -1px);
    clip-path: inset(72% 0 8% 0);
  }
  96.5% {
    transform: translate(2px, 0);
    clip-path: inset(5% 0 82% 0);
  }
  97.5% {
    transform: translate(-3px, 0);
    clip-path: inset(50% 0 30% 0);
  }
  98.5%,
  100% {
    transform: translate(1px, 0);
    clip-path: inset(0 0 0 0);
  }
}

.caret {
  display: inline-block;
  width: 0.6ch;
  height: 1em;
  margin-left: 0.1ch;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(92, 243, 255, 0.8);
  transform: translateY(0.1em);
  animation: caret-blink 1.05s steps(1) infinite;
}

@keyframes caret-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .domain__glitch::before,
  .domain__glitch::after {
    animation: none;
  }
  .caret {
    animation: none;
    opacity: 0.85;
  }
}