@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap");

:root {
  color-scheme: dark;
  --terminal-font:
    "Share Tech Mono",
    "Cascadia Mono",
    "IBM Plex Mono",
    "Lucida Console",
    Consolas,
    "Courier New",
    monospace;
  --terminal: #f7fbff;
  --terminal-soft: rgba(255, 255, 255, 0.66);
  --magenta: rgba(255, 0, 255, 0.42);
  --cyan: rgba(0, 225, 255, 0.42);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background: #000;
  font-family: var(--terminal-font);
}

.stage {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  isolation: isolate;
  background: #000;
}

.bg-video,
.fallback-bg,
.scanline,
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.bg-video {
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.68;
  filter: contrast(1.12) saturate(0.88) brightness(0.7);
}

.fallback-bg {
  z-index: 0;
  background:
    linear-gradient(90deg, transparent 0 96%, rgba(255, 255, 255, 0.06) 98%),
    linear-gradient(0deg, rgba(255, 0, 255, 0.07), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1), transparent 38%),
    #000;
  background-size: 34px 100%, 100% 100%, 100% 100%, auto;
  animation: fallback-shift 7s steps(12) infinite;
}

.scanline {
  z-index: 2;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.045) 0,
    rgba(255, 255, 255, 0.045) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: overlay;
  opacity: 0.3;
}

.vignette {
  z-index: 3;
  background:
    radial-gradient(circle, transparent 0 42%, rgba(0, 0, 0, 0.56) 76%),
    rgba(0, 0, 0, 0.2);
}

.terminal {
  position: relative;
  z-index: 4;
  margin: 0;
  padding: 0 24px;
  color: var(--terminal);
  font-size: clamp(2rem, 8vw, 5.8rem);
  font-family: var(--terminal-font);
  font-weight: 400;
  font-variant-ligatures: none;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow:
    0 0 3px rgba(255, 255, 255, 0.86),
    0 0 16px var(--terminal-soft),
    2px 0 1px var(--magenta),
    -2px 0 1px var(--cyan);
  animation: text-glitch 2.8s infinite;
}

.terminal::before,
.terminal::after {
  position: absolute;
  inset: 0;
  padding: 0 24px;
  content: attr(aria-label);
  opacity: 0;
  pointer-events: none;
}

.terminal::before {
  color: #ff00ff;
  transform: translateX(-2px);
}

.terminal::after {
  color: #00b4ff;
  transform: translateX(2px);
}

.terminal.is-glitching::before,
.terminal.is-glitching::after {
  opacity: 0.56;
}

.terminal.is-glitching::before {
  clip-path: inset(0 0 56% 0);
}

.terminal.is-glitching::after {
  clip-path: inset(48% 0 0 0);
}

.cursor {
  display: inline-block;
  width: 0.62ch;
  animation: blink 1s infinite;
}

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

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes text-glitch {
  0%,
  88%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  90% {
    transform: translate3d(1px, -1px, 0);
  }

  92% {
    transform: translate3d(-2px, 1px, 0);
  }

  94% {
    transform: translate3d(2px, 0, 0);
  }
}

@keyframes fallback-shift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  35% {
    transform: translate3d(-1.2%, 0, 0);
  }

  65% {
    transform: translate3d(1%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fallback-bg,
  .terminal,
  .cursor {
    animation: none;
  }
}