@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600&family=JetBrains+Mono:wght@500&display=swap");

:root {
  color-scheme: dark;
  --bg: #050505;
  --ink: #f5f7f8;
  --ink-dim: #a7adb3;
  --grid: rgba(255, 255, 255, 0.06);
  --red: #ff2b4d;
  --blue: #37e3ff;
  --green: #6bff7a;

  /* Energy system - all driven by JS */
  --energy: 0;
  --event: 0;
  --tempo: 120ms;
  --force-offset: 2px;
  --force-slice: 2%;
  --force-scale: 1;
  --force-rotation: 0deg;
  --fx: 0px;
  --fy: 0px;
  --slice-pos: 45%;
  --glow-flash: 0;
  --glow-r: 0;
  --glow-b: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Space Grotesk", "Sora", "IBM Plex Sans", "Segoe UI", sans-serif;
  display: grid;
  place-items: center;
  overflow: hidden;
}

body::before {
  content: "";
  position: absolute;
  inset: -20vmax;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.12), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.08), transparent 60%),
    radial-gradient(circle at 50% 30%, rgba(255, 43, 77, 0.12), transparent 55%);
  filter: blur(0px) contrast(110%);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

.stage {
  position: relative;
  width: min(960px, 92vw);
  height: min(540px, 70vh);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 50%),
    repeating-linear-gradient(
      90deg,
      var(--grid) 0px,
      var(--grid) 1px,
      transparent 1px,
      transparent 48px
    ),
    repeating-linear-gradient(
      180deg,
      var(--grid) 0px,
      var(--grid) 1px,
      transparent 1px,
      transparent 48px
    );
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  border-radius: 28px;
  overflow: hidden;
  z-index: 1;
}

.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06) 0px,
      rgba(255, 255, 255, 0.06) 1px,
      transparent 1px,
      transparent 3px
    );
  opacity: 0.32;
  mix-blend-mode: screen;
  pointer-events: none;
}

.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 120px rgba(0, 0, 0, 0.75),
    inset 0 0 20px rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.glitch {
  position: relative;
  font-family: "JetBrains Mono", "Space Grotesk", "Sora", "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: clamp(2.8rem, 9vw, 8rem);
  letter-spacing: 0.08em;
  text-transform: lowercase;
  font-weight: 600;
  text-shadow:
    0 0 18px rgba(255, 255, 255, 0.18),
    0 0 36px rgba(55, 227, 255, 0.12);
}

.glitch span {
  position: absolute;
  inset: 0;
  display: block;
  mix-blend-mode: screen;
}

.glitch span.base-layer {
  position: relative;
  color: var(--ink);
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.20),
    0 0 24px rgba(107, 255, 122, 0.12),
    0 0 calc(12px + var(--glow-flash) * 12px) rgba(255, 255, 255, calc(var(--glow-flash) * 0.35)),
    0 0 calc(24px + var(--glow-flash) * 18px) rgba(55, 227, 255, calc(var(--glow-flash) * 0.20)),
    0 0 calc(var(--glow-r) * 28px) rgba(255, 43, 77, calc(var(--glow-r) * 0.70)),
    0 0 calc(var(--glow-b) * 28px) rgba(55, 227, 255, calc(var(--glow-b) * 0.70));
  transform:
    translate(calc(var(--fx) * var(--event) * 0.1), calc(var(--fy) * var(--event) * 0.1))
    scale(calc(1 + (var(--force-scale) - 1) * var(--event) * 0.3));
  animation: base-glow 4s ease-in-out infinite;
  transition: text-shadow 0.15s ease-out;
}

.rgb-r {
  color: var(--red);
  clip-path: inset(
    calc(var(--slice-pos) - var(--force-slice) / 2)
    0
    calc(100% - var(--slice-pos) - var(--force-slice) / 2)
    0
  );
  transform:
    translate(calc(var(--fx) * var(--event)), calc(var(--fy) * var(--event)))
    scale(calc(1 + (var(--force-scale) - 1) * var(--event)))
    rotate(calc(var(--force-rotation) * var(--event)));
  opacity: calc(var(--event) * 0.85);
}

.rgb-b {
  color: var(--blue);
  clip-path: inset(
    calc(100% - var(--slice-pos) - var(--force-slice) / 2)
    0
    calc(var(--slice-pos) - var(--force-slice) / 2)
    0
  );
  transform:
    translate(calc(var(--fx) * var(--event) * -1), calc(var(--fy) * var(--event) * -1))
    scale(calc(1 + (var(--force-scale) - 1) * var(--event)))
    rotate(calc(var(--force-rotation) * var(--event) * -1));
  opacity: calc(var(--event) * 0.85);
}

@keyframes base-glow {
  0%, 100% {
    text-shadow:
      0 0 10px rgba(255, 255, 255, 0.16),
      0 0 20px rgba(107, 255, 122, 0.08),
      0 0 calc(12px + var(--glow-flash) * 12px) rgba(255, 255, 255, calc(var(--glow-flash) * 0.35)),
      0 0 calc(24px + var(--glow-flash) * 18px) rgba(55, 227, 255, calc(var(--glow-flash) * 0.20)),
      0 0 calc(var(--glow-r) * 20px) rgba(255, 43, 77, calc(var(--glow-r) * 0.40)),
      0 0 calc(var(--glow-b) * 20px) rgba(55, 227, 255, calc(var(--glow-b) * 0.40));
  }
  50% {
    text-shadow:
      0 0 14px rgba(255, 255, 255, 0.28),
      0 0 30px rgba(107, 255, 122, 0.16),
      0 0 calc(12px + var(--glow-flash) * 12px) rgba(255, 255, 255, calc(var(--glow-flash) * 0.35)),
      0 0 calc(24px + var(--glow-flash) * 18px) rgba(55, 227, 255, calc(var(--glow-flash) * 0.20)),
      0 0 calc(var(--glow-r) * 20px) rgba(255, 43, 77, calc(var(--glow-r) * 0.40)),
      0 0 calc(var(--glow-b) * 20px) rgba(55, 227, 255, calc(var(--glow-b) * 0.40));
  }
}

.signal {
  position: absolute;
  inset: -50%;
  background:
    linear-gradient(90deg, rgba(255, 43, 77, 0.10), transparent 45%),
    linear-gradient(270deg, rgba(55, 227, 255, 0.18), transparent 60%);
  mix-blend-mode: screen;
  opacity: calc(0.4 + var(--energy) * 0.2);
  pointer-events: none;
  animation: drift 8s infinite ease-in-out;
}

@keyframes drift {
  0% { transform: translateX(-20%) translateY(-5%); }
  50% { transform: translateX(18%) translateY(6%); }
  100% { transform: translateX(-20%) translateY(-5%); }
}

.noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.noise canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: overlay;
}

#noise-color {
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity 0.225s ease-out;
}

.stage:hover #noise-color {
  opacity: 1;
  transition: opacity 0.3s ease-in;
}

.vignette {
  position: absolute;
  inset: 0;
  --vignette-size: calc(45% - var(--energy) * 15%);
  background: radial-gradient(ellipse at center, transparent var(--vignette-size), rgba(0, 0, 0, 0.7) 100%);
  opacity: calc(0.5 + var(--energy) * 0.4);
  pointer-events: none;
  z-index: 4;
  transition: opacity 0.3s ease-out;
}

.stage:hover .vignette {
  --vignette-size: 20%;
  opacity: 1;
}

.corner {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  pointer-events: none;
  z-index: 5;
}

.corner.tl { top: 24px; left: 24px; border-right: none; border-bottom: none; }
.corner.tr { top: 24px; right: 24px; border-left: none; border-bottom: none; }
.corner.bl { bottom: 24px; left: 24px; border-right: none; border-top: none; }
.corner.br { bottom: 24px; right: 24px; border-left: none; border-top: none; }

.stage:hover {
  --energy: min(1, calc(var(--energy) + 0.2));
}

@media (max-width: 640px) {
  .stage {
    height: min(420px, 70vh);
    border-radius: 20px;
  }
  .glitch {
    letter-spacing: 0.06em;
  }
  .corner {
    width: 24px;
    height: 24px;
  }
  .corner.tl, .corner.tr { top: 16px; }
  .corner.bl, .corner.br { bottom: 16px; }
  .corner.tl, .corner.bl { left: 16px; }
  .corner.tr, .corner.br { right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .glitch span,
  .signal,
  .noise {
    animation: none;
  }
}