:root {
  --acid: #7cff6b;
  --cyan: #34e8ff;
  --black: #020302;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  overflow: hidden;
  color: var(--acid);
  background:
    radial-gradient(circle at 50% 50%, rgba(124, 255, 107, 0.16), transparent 20rem),
    radial-gradient(circle at 50% 56%, rgba(52, 232, 255, 0.08), transparent 31rem),
    linear-gradient(145deg, #000505, #04120a 58%, #010201);
}

.coming-layer {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 2rem;
  overflow: hidden;
}

.coming-layer::after {
  content: "";
  position: absolute;
  inset: 1rem;
  border: clamp(0.45rem, 1.45vw, 0.9rem) solid rgba(124, 255, 107, 0.15);
  box-shadow:
    inset 0 0 88px rgba(52, 232, 255, 0.18),
    0 0 80px rgba(124, 255, 107, 0.08);
}

.speed-grid,
.speed-slashes,
.matrix-rain {
  position: absolute;
  inset: -18%;
}

.speed-grid {
  opacity: 0.5;
  background:
    repeating-linear-gradient(0deg, transparent 0 10px, rgba(124, 255, 107, 0.08) 11px 12px),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(52, 232, 255, 0.08) 19px 20px);
  transform: perspective(44rem) rotateX(64deg);
  transform-origin: center bottom;
}

.speed-slashes {
  opacity: 0.72;
  background:
    linear-gradient(100deg, transparent 0 39%, rgba(124, 255, 107, 0.48) 40%, transparent 42%),
    repeating-linear-gradient(100deg, transparent 0 5.6rem, rgba(52, 232, 255, 0.16) 5.7rem 5.86rem);
  transform: skewX(-16deg);
}

.matrix-rain {
  opacity: 0.22;
  background:
    repeating-linear-gradient(90deg, transparent 0 1.2rem, rgba(124, 255, 107, 0.16) 1.25rem 1.33rem, transparent 1.38rem 2.8rem),
    repeating-linear-gradient(180deg, transparent 0 0.8rem, rgba(52, 232, 255, 0.08) 0.86rem 0.94rem, transparent 1rem 2.3rem);
  filter: blur(0.2px);
}

.coming-title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #b9ff4a;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(2.4rem, 10.6vw, 10.8rem);
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.08em;
  line-height: 0.72;
  text-align: center;
  text-transform: uppercase;
  transform: skewX(-14deg);
  text-shadow:
    0.035em 0.035em 0 #041d0a,
    0.078em 0.078em 0 #00b95f,
    0 0 46px rgba(124, 255, 107, 0.78),
    0 0 84px rgba(52, 232, 255, 0.36);
  -webkit-text-stroke: clamp(1px, 0.24vw, 4px) rgba(0, 8, 5, 0.94);
}

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

.coming-title::before {
  color: transparent;
  -webkit-text-stroke: clamp(1px, 0.16vw, 3px) rgba(221, 255, 227, 0.9);
  transform: translate(-0.045em, -0.038em);
  clip-path: polygon(0 0, 100% 0, 100% 42%, 0 50%);
}

.coming-title::after {
  color: rgba(52, 232, 255, 0.58);
  transform: translate(0.06em, 0.045em);
  clip-path: polygon(0 55%, 100% 47%, 100% 100%, 0 100%);
  mix-blend-mode: screen;
}

body::after {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 30;
  background: radial-gradient(circle at center, transparent 45%, rgba(0, 0, 0, 0.46) 100%);
}

@media (max-width: 920px) {
  .coming-title {
    font-size: clamp(2.1rem, 13.4vw, 6.4rem);
    letter-spacing: -0.085em;
  }
}