:root {
  color-scheme: dark;
  --bg: #05060c;
  --ink: #f6fbff;
  --cyan: #25f4ff;
  --pink: #ff2df7;
  --green: #59ff8f;
  --violet: #8b5cff;
  --panel: rgba(4, 8, 20, 0.72);
}

* {
  box-sizing: border-box;
}

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

body {
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 10%, rgba(37, 244, 255, 0.16), transparent 26rem),
    radial-gradient(circle at 84% 82%, rgba(255, 45, 247, 0.15), transparent 28rem),
    linear-gradient(135deg, #05060c 0%, #0c1020 46%, #05060c 100%);
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

.page-shell {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: clamp(1.2rem, 4vw, 3rem);
  isolation: isolate;
}

.page-shell::before,
.page-shell::after {
  position: fixed;
  inset: auto;
  z-index: -1;
  width: 34vmax;
  height: 34vmax;
  border: 1px solid rgba(37, 244, 255, 0.18);
  content: "";
  filter: blur(0.15rem);
  transform: rotate(45deg);
}

.page-shell::before {
  top: -16vmax;
  left: -12vmax;
  box-shadow: 0 0 5rem rgba(37, 244, 255, 0.2);
}

.page-shell::after {
  right: -15vmax;
  bottom: -17vmax;
  border-color: rgba(255, 45, 247, 0.2);
  box-shadow: 0 0 5rem rgba(255, 45, 247, 0.18);
}

.scanlines,
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.scanlines {
  z-index: 4;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.05) 0,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px,
    transparent 6px
  );
  mix-blend-mode: overlay;
  opacity: 0.22;
}

.noise {
  z-index: 3;
  background-image:
    linear-gradient(90deg, rgba(255, 45, 247, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(37, 244, 255, 0.05) 1px, transparent 1px);
  background-size: 3rem 3rem;
  mask-image: radial-gradient(circle at center, black 18%, transparent 74%);
  animation: grid-drift 12s linear infinite;
}

.signal-panel {
  position: relative;
  display: grid;
  width: min(94vw, 72rem);
  place-items: center;
  gap: clamp(1.15rem, 3.5vw, 2.4rem);
  padding: clamp(1.1rem, 4vw, 2.4rem);
  border: 1px solid rgba(37, 244, 255, 0.32);
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(135deg, rgba(37, 244, 255, 0.85), rgba(255, 45, 247, 0.72), rgba(89, 255, 143, 0.7)) border-box;
  box-shadow:
    0 0 3rem rgba(37, 244, 255, 0.16),
    inset 0 0 3rem rgba(139, 92, 255, 0.12);
  backdrop-filter: blur(1rem);
  clip-path: polygon(0 1.25rem, 1.25rem 0, 100% 0, 100% calc(100% - 1.25rem), calc(100% - 1.25rem) 100%, 0 100%);
}

.signal-panel::before {
  position: absolute;
  inset: 0.7rem;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.08);
  content: "";
  clip-path: inherit;
}

.gif-frame {
  position: relative;
  width: min(72vw, 28rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(37, 244, 255, 0.45);
  background-image:
    linear-gradient(rgba(5, 8, 18, 0.08), rgba(5, 8, 18, 0.08)),
    url("https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExbmVuazdpZjZla3dhbzJzb3Jxd2NtYXZqenM1bWo3ZmUxMGJsbGVmOSZlcD12MV9naWZzX3NlYXJjaCZjdD1n/d4CnuaS1BQl7W5nowu/giphy.gif"),
    radial-gradient(circle, rgba(37, 244, 255, 0.18), transparent 66%),
    linear-gradient(#060811, #060811);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover, cover, cover, cover;
  box-shadow:
    0 0 1.8rem rgba(37, 244, 255, 0.34),
    0 0 4rem rgba(255, 45, 247, 0.14),
    inset 0 0 2.4rem rgba(37, 244, 255, 0.12);
  overflow: hidden;
}

.gif-frame::before,
.gif-frame::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.gif-frame::before {
  border: 0.55rem solid transparent;
  border-image: linear-gradient(90deg, var(--cyan), var(--pink), var(--green), var(--cyan)) 1;
  opacity: 0.65;
  animation: hue-roll 3.6s linear infinite;
}

.gif-frame::after {
  background:
    linear-gradient(90deg, transparent, rgba(37, 244, 255, 0.22), transparent),
    linear-gradient(0deg, transparent, rgba(255, 45, 247, 0.14), transparent);
  mix-blend-mode: screen;
  opacity: 0.55;
  transform: translateX(-100%);
  animation: signal-sweep 3.2s ease-in-out infinite;
}

.glitch-title {
  position: relative;
  margin: 0;
  max-width: 100%;
  font-size: clamp(3rem, 8.2vw, 8rem);
  line-height: 0.86;
  font-weight: 950;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(90deg, var(--cyan), var(--pink), var(--green), var(--violet), var(--cyan));
  background-size: 320% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: rgb-shift 2.2s linear infinite, glitch-jitter 2.9s steps(1, end) infinite;
  filter:
    drop-shadow(0 0 0.28rem rgba(37, 244, 255, 0.8))
    drop-shadow(0 0 1.1rem rgba(255, 45, 247, 0.48));
}

.glitch-title::before,
.glitch-title::after {
  position: absolute;
  inset: 0;
  content: attr(data-text);
  background: inherit;
  background-size: inherit;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  pointer-events: none;
}

.glitch-title::before {
  transform: translate(-0.06em, -0.02em);
  text-shadow: 0.04em 0 rgba(37, 244, 255, 0.72);
  clip-path: inset(0 0 52% 0);
  animation: glitch-slice-a 1.8s infinite linear alternate-reverse;
}

.glitch-title::after {
  transform: translate(0.05em, 0.025em);
  text-shadow: -0.04em 0 rgba(255, 45, 247, 0.68);
  clip-path: inset(46% 0 0 0);
  animation: glitch-slice-b 2.1s infinite linear alternate-reverse;
}

@keyframes rgb-shift {
  to {
    background-position: 320% 0;
  }
}

@keyframes hue-roll {
  to {
    filter: hue-rotate(360deg);
  }
}

@keyframes signal-sweep {
  0%,
  20% {
    transform: translateX(-100%);
  }

  55%,
  100% {
    transform: translateX(100%);
  }
}

@keyframes grid-drift {
  to {
    background-position: 3rem 3rem;
  }
}

@keyframes glitch-jitter {
  0%,
  88%,
  100% {
    transform: translate(0, 0) skewX(0);
  }

  90% {
    transform: translate(-0.035em, 0.015em) skewX(-3deg);
  }

  92% {
    transform: translate(0.025em, -0.015em) skewX(2deg);
  }

  94% {
    transform: translate(-0.015em, 0.02em) skewX(0);
  }
}

@keyframes glitch-slice-a {
  0%,
  68%,
  100% {
    clip-path: inset(0 0 54% 0);
  }

  72% {
    clip-path: inset(16% 0 62% 0);
  }

  77% {
    clip-path: inset(4% 0 72% 0);
  }

  82% {
    clip-path: inset(31% 0 38% 0);
  }
}

@keyframes glitch-slice-b {
  0%,
  64%,
  100% {
    clip-path: inset(48% 0 0 0);
  }

  70% {
    clip-path: inset(63% 0 13% 0);
  }

  75% {
    clip-path: inset(42% 0 36% 0);
  }

  84% {
    clip-path: inset(70% 0 7% 0);
  }
}

@media (max-width: 42rem) {
  body {
    overflow: auto;
  }

  .page-shell {
    min-height: 100svh;
    padding: 1rem;
  }

  .signal-panel {
    width: 100%;
    padding: 1rem;
    gap: 1.1rem;
  }

  .gif-frame {
    width: min(78vw, 20rem);
  }

  .glitch-title {
    font-size: clamp(3.1rem, 17vw, 5.8rem);
    white-space: normal;
  }
}

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