:root {
  --energy: 0;
  --shake-x: 0px;
  --shake-y: 0px;
  --dot-x: 50vw;
  --dot-y: 50vh;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  cursor: default;
  font-family: Arial, Helvetica, sans-serif;
}

.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--dot-x) var(--dot-y), rgba(255,255,255,0.12), transparent 22%),
    radial-gradient(circle at center, #111 0%, #020202 44%, #000 72%);
}

.depth-grid {
  position: absolute;
  inset: -10%;
  opacity: calc(0.08 + var(--energy) * 0.08);
  background:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: perspective(800px) rotateX(62deg) translateY(18%);
  filter: blur(0.4px);
  pointer-events: none;
}

#matrixCanvas,
#symbolCanvas,
#staticCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

#matrixCanvas {
  z-index: 1;
  opacity: calc(0.24 + var(--energy) * 0.42);
  mix-blend-mode: screen;
}

#symbolCanvas { z-index: 2; }

#staticCanvas {
  z-index: 4;
  opacity: calc(var(--energy) * 0.65);
  mix-blend-mode: screen;
}

.light-aura {
  position: fixed;
  width: 340px;
  height: 340px;
  left: var(--dot-x);
  top: var(--dot-y);
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0.12) 18%,
    rgba(255,255,255,0.05) 42%,
    transparent 72%
  );
  filter: blur(18px);
  mix-blend-mode: screen;
}

.content {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  pointer-events: none;
  transform: translate(var(--shake-x), var(--shake-y));
  filter:
    blur(calc(var(--energy) * 4.2px))
    brightness(calc(1 - var(--energy) * 0.25));
  opacity: calc(1 - var(--energy) * 0.34);
}

.content-inner {
  padding: 26px;
  text-shadow:
    0 0 12px rgba(255,255,255,0.86),
    0 0 38px rgba(255,255,255,0.36),
    calc(var(--energy) * 12px) 0 rgba(255,255,255,0.24),
    calc(var(--energy) * -12px) 0 rgba(255,255,255,0.2);
}

h1 {
  margin: 0;
  font-size: clamp(46px, 8vw, 118px);
  letter-spacing: 0.06em;
  font-weight: 700;
}

.subtitle {
  margin-top: 18px;
  font-size: clamp(16px, 2.1vw, 31px);
  letter-spacing: 0.06em;
  font-weight: 300;
}

.status {
  margin-top: 34px;
  font-size: clamp(14px, 1.4vw, 20px);
  letter-spacing: 0.13em;
  opacity: 0.82;
}

.signal-line {
  margin-top: 14px;
  font-size: clamp(12px, 1.2vw, 17px);
  letter-spacing: 0.16em;
  opacity: 0.64;
  font-weight: 300;
}

.light-dot {
  position: fixed;
  left: var(--dot-x);
  top: var(--dot-y);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  z-index: 10;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 8px #fff,
    0 0 18px #fff,
    0 0 42px #fff,
    0 0 96px rgba(255,255,255,0.95),
    0 0 160px rgba(255,255,255,0.5);
}

@media (max-width: 640px) {
  .light-aura {
    width: 260px;
    height: 260px;
  }
}