:root {
  color-scheme: dark;
  font-family: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  background: #030506;
  color: #dce4e4;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #030506;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #030506;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  content: "";
}

#atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  pointer-events: none;
}

body::before {
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 2px,
      rgb(143 203 205 / 5%) 3px,
      transparent 4px 7px,
      rgb(0 0 0 / 9%) 8px,
      transparent 9px 13px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0 16px,
      rgb(77 220 228 / 3.5%) 17px,
      rgb(255 43 82 / 1.5%) 18px,
      transparent 20px 31px
    );
  opacity: 0.48;
  -webkit-mask-image: radial-gradient(
    ellipse 39% 25% at center,
    #000 0%,
    rgb(0 0 0 / 78%) 28%,
    rgb(0 0 0 / 25%) 57%,
    transparent 82%
  );
  mask-image: radial-gradient(
    ellipse 39% 25% at center,
    #000 0%,
    rgb(0 0 0 / 78%) 28%,
    rgb(0 0 0 / 25%) 57%,
    transparent 82%
  );
  animation: scanline-drift 6.4s steps(7, end) infinite;
}

.terminal {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 2rem;
  font-size: clamp(0.95rem, 1.5vw, 1.2rem);
  font-weight: 350;
  line-height: 1;
  letter-spacing: 0.035em;
  white-space: nowrap;
  filter: blur(0.08px);
  text-shadow:
    -0.8px 0 rgb(255 38 76 / 68%),
    0.8px 0 rgb(0 198 255 / 68%),
    0 0 0.65rem rgb(197 255 252 / 12%);
  animation: signal-jitter 7s steps(1, end) infinite;
}

.brand-letter--strong {
  font-weight: 750;
  color: #f4f8f8;
}

.glitch {
  position: absolute;
  top: 2rem;
  left: 2rem;
  color: #f1ffff;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

.glitch--active {
  animation: diagonal-glitch 7.25s steps(1, end) infinite;
}

.cursor {
  display: inline-block;
  margin-left: 0.08em;
  color: #e6ffff;
  opacity: 0;
  text-shadow:
    -1px 0 #ff264c,
    1px 0 #00c6ff,
    0 0 0.55rem rgb(218 255 254 / 48%);
}

.cursor--active {
  animation: cursor-blink 1.05s steps(1, end) infinite;
}

.cursor--erasing {
  opacity: 1;
  animation: none;
}

@keyframes cursor-blink {
  0%, 47% {
    opacity: 1;
  }

  48%, 100% {
    opacity: 0;
  }
}

@keyframes scanline-drift {
  0%, 100% {
    background-position: 0 0, 0 0;
  }

  31% {
    background-position: 0 1px, 0 -2px;
  }

  67% {
    background-position: 0 -1px, 0 2px;
  }
}

@keyframes signal-jitter {
  0%, 91%, 94%, 100% {
    transform: translate(0);
  }

  92% {
    transform: translate(-0.6px, 0.35px);
  }

  93% {
    transform: translate(0.7px, -0.25px);
  }
}

@keyframes diagonal-glitch {
  0%, 81%, 85%, 100% {
    opacity: 0;
    transform: translate(0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }

  81.4% {
    opacity: 0.96;
    transform: translate(3.6px, -1.4px);
    clip-path: polygon(-8% 25%, 108% 4%, 108% 31%, -8% 52%);
    text-shadow: -3px 0 #ff264c, 3px 0 #00c6ff;
  }

  82% {
    opacity: 0.78;
    transform: translate(-4.2px, 1.4px);
    clip-path: polygon(-8% 47%, 108% 25%, 108% 43%, -8% 65%);
    text-shadow: 3.2px 0 #ff264c, -3.2px 0 #00c6ff;
  }

  82.5% {
    opacity: 0;
  }

  83% {
    opacity: 0.88;
    transform: translate(2.6px, -1px);
    clip-path: polygon(-8% 67%, 108% 46%, 108% 58%, -8% 79%);
    text-shadow: -2.4px 0 #ff264c, 2.4px 0 #00c6ff;
  }

  83.45% {
    opacity: 0;
  }

  84% {
    opacity: 0.62;
    transform: translate(-2px, 0.8px);
    clip-path: polygon(-8% 34%, 108% 13%, 108% 20%, -8% 41%);
    text-shadow: 2px 0 #ff264c, -2px 0 #00c6ff;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  .terminal,
  .cursor--active {
    animation: none;
  }

  .cursor--active {
    opacity: 1;
  }

  .glitch--active {
    opacity: 0;
  }
}