:root {
  color-scheme: dark;
  --bg: #050505;
  --fg: #f7f7f0;
  --hot: #f7ff00;
  --cyan: #00e5ff;
  --magenta: #ff2bd6;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  letter-spacing: 0;
}

body {
  min-height: 100svh;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--hot);
  color: var(--bg);
}

.noise,
.scanline {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.noise {
  opacity: 0.11;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.22) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: screen;
  animation: static-shift 550ms steps(2, end) infinite;
}

.scanline {
  opacity: 0.38;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 7px,
    rgba(247, 255, 0, 0.08) 8px,
    transparent 10px
  );
}

.stage {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 100svh;
  padding: clamp(14px, 2.6vw, 42px);
  place-items: center;
  isolation: isolate;
}

.stage::before,
.stage::after {
  position: absolute;
  inset: clamp(14px, 2.6vw, 42px);
  z-index: -1;
  content: "";
  border: 1px solid rgba(247, 247, 240, 0.18);
  animation: frame-glitch 5.5s steps(1, end) infinite;
}

.stage::after {
  inset: clamp(28px, 4vw, 74px);
  border-color: rgba(247, 255, 0, 0.26);
  animation-delay: -1.7s;
}

.title-link {
  display: block;
  max-width: 100%;
  outline-offset: 12px;
}

.hero-title {
  position: relative;
  max-width: 100%;
  margin: 0;
  color: var(--fg);
  font-size: clamp(4.2rem, 19vw, 19rem);
  font-weight: 1000;
  line-height: 0.75;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  word-break: break-word;
  filter: contrast(1.18);
  animation:
    title-pulse 2.4s steps(2, end) infinite,
    title-jolt 4.8s steps(1, end) infinite;
}

.hero-title span {
  display: block;
  color: transparent;
  -webkit-text-stroke: clamp(1px, 0.24vw, 4px) var(--fg);
  text-stroke: clamp(1px, 0.24vw, 4px) var(--fg);
}

.hero-title::before,
.hero-title::after {
  position: absolute;
  inset: 0;
  content: attr(data-text);
  pointer-events: none;
  white-space: pre;
}

.hero-title::before {
  color: var(--cyan);
  transform: translate(-0.035em, -0.012em);
  clip-path: inset(0 0 46% 0);
  mix-blend-mode: screen;
  animation: glitch-slice-a 900ms steps(2, end) infinite;
}

.hero-title::after {
  color: var(--magenta);
  transform: translate(0.026em, 0.015em);
  clip-path: inset(52% 0 0 0);
  mix-blend-mode: screen;
  animation: glitch-slice-b 760ms steps(2, end) infinite;
}

.hero-title.is-glitching {
  text-shadow:
    0.025em 0 var(--cyan),
    -0.02em 0 var(--magenta),
    0 0 0.18em rgba(247, 255, 0, 0.6);
}

@keyframes title-pulse {
  0%,
  80%,
  100% {
    opacity: 1;
  }

  82% {
    opacity: 0.78;
  }

  84% {
    opacity: 1;
  }
}

@keyframes title-jolt {
  0%,
  88%,
  100% {
    transform: translate(0, 0) skew(0);
  }

  89% {
    transform: translate(0.018em, -0.01em) skew(-2deg);
  }

  90% {
    transform: translate(-0.014em, 0.012em) skew(2deg);
  }
}

@keyframes glitch-slice-a {
  0%,
  100% {
    clip-path: inset(0 0 58% 0);
    transform: translate(-0.035em, -0.012em);
  }

  34% {
    clip-path: inset(18% 0 47% 0);
    transform: translate(0.045em, 0.008em);
  }

  68% {
    clip-path: inset(5% 0 70% 0);
    transform: translate(-0.018em, 0.02em);
  }
}

@keyframes glitch-slice-b {
  0%,
  100% {
    clip-path: inset(54% 0 0 0);
    transform: translate(0.026em, 0.015em);
  }

  42% {
    clip-path: inset(44% 0 22% 0);
    transform: translate(-0.05em, -0.01em);
  }

  74% {
    clip-path: inset(70% 0 6% 0);
    transform: translate(0.02em, -0.022em);
  }
}

@keyframes static-shift {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-2px, 1px);
  }

  100% {
    transform: translate(2px, -1px);
  }
}

@keyframes frame-glitch {
  0%,
  92%,
  100% {
    transform: translate(0, 0);
  }

  93% {
    transform: translate(8px, -4px);
  }

  94% {
    transform: translate(-6px, 5px);
  }
}

@media (max-width: 620px) {
  .hero-title {
    font-size: clamp(4rem, 22vw, 8rem);
    line-height: 0.78;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}