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

:root {
  --glow: #00ffe7;
  --glow2: #ff3cac;
  --glow3: #ffd700;
  --bg: #000;
}

body {
  background: var(--bg);
  color: #fff;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Mono', monospace;
  cursor: none;
}

#cursor {
  position: fixed;
  width: 14px; height: 14px;
  background: var(--glow);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: background 0.3s, transform 0.15s;
  box-shadow: 0 0 12px var(--glow), 0 0 30px var(--glow);
  mix-blend-mode: screen;
}
#cursor-trail {
  position: fixed;
  width: 36px; height: 36px;
  border: 1px solid var(--glow);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: left 0.12s ease, top 0.12s ease, border-color 0.3s;
  opacity: 0.5;
}

#bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.stage {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.orbit-wrap {
  position: relative;
  width: 420px; height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid transparent;
  animation: spin linear infinite;
}

.orbit-1 {
  width: 420px; height: 420px;
  border-color: rgba(0,255,231,0.18);
  border-top-color: var(--glow);
  animation-duration: 6s;
  box-shadow: 0 0 20px rgba(0,255,231,0.07);
}
.orbit-2 {
  width: 340px; height: 340px;
  border-color: rgba(255,60,172,0.15);
  border-right-color: var(--glow2);
  border-bottom-color: var(--glow2);
  animation-duration: 9s;
  animation-direction: reverse;
}
.orbit-3 {
  width: 260px; height: 260px;
  border-color: rgba(255,215,0,0.12);
  border-left-color: var(--glow3);
  animation-duration: 4s;
}

.dot {
  position: absolute;
  border-radius: 50%;
  top: 50%; left: 50%;
}

.orbit-1 .dot {
  width: 8px; height: 8px;
  background: var(--glow);
  box-shadow: 0 0 10px var(--glow), 0 0 24px var(--glow);
  margin-top: calc(-210px - 4px);
  margin-left: -4px;
}
.orbit-2 .dot {
  width: 6px; height: 6px;
  background: var(--glow2);
  box-shadow: 0 0 10px var(--glow2), 0 0 24px var(--glow2);
  margin-top: calc(-170px - 3px);
  margin-left: -3px;
}
.orbit-3 .dot {
  width: 5px; height: 5px;
  background: var(--glow3);
  box-shadow: 0 0 8px var(--glow3), 0 0 20px var(--glow3);
  margin-top: calc(-130px - 2.5px);
  margin-left: -2.5px;
}

@keyframes spin { to { transform: rotate(360deg); } }

.center-text {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.main-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(52px, 8vw, 90px);
  letter-spacing: 0.12em;
  line-height: 1;
  background: linear-gradient(135deg, #fff 40%, var(--glow) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 18px rgba(0,255,231,0.45));
  animation: title-pulse 3s ease-in-out infinite;
}

@keyframes title-pulse {
  0%, 100% { filter: drop-shadow(0 0 18px rgba(0,255,231,0.45)); }
  50%       { filter: drop-shadow(0 0 38px rgba(0,255,231,0.85)); }
}

.subtitle {
  font-size: clamp(10px, 1.5vw, 13px);
  letter-spacing: 0.35em;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  animation: blink-sub 2.8s ease-in-out infinite;
}

@keyframes blink-sub {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 1; color: var(--glow); }
}

.status-row {
  margin-top: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.3);
}
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--glow);
  animation: status-blink 1.2s ease-in-out infinite;
}
@keyframes status-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--glow); }
  50%       { opacity: 0.2; box-shadow: none; }
}

.scanlines {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,0.07) 3px,
    rgba(0,0,0,0.07) 4px
  );
}

.corner {
  position: fixed;
  width: 60px; height: 60px;
  pointer-events: none;
  z-index: 8;
  opacity: 0.3;
}
.corner::before, .corner::after {
  content: '';
  position: absolute;
  background: var(--glow);
}
.corner::before { width: 100%; height: 1px; top: 0; left: 0; }
.corner::after  { width: 1px; height: 100%; top: 0; left: 0; }
.corner.tl { top: 24px; left: 24px; }
.corner.tr { top: 24px; right: 24px; transform: scaleX(-1); }
.corner.bl { bottom: 24px; left: 24px; transform: scaleY(-1); }
.corner.br { bottom: 24px; right: 24px; transform: scale(-1); }

.powered-by {
  position: fixed;
  bottom: 28px;
  right: 32px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  pointer-events: none;
  animation: powered-fade 4s ease-in-out infinite;
}
.powered-by .pb-label { color: rgba(255,255,255,0.28); }
.powered-by .pb-brand {
  color: var(--glow);
  font-style: italic;
  text-shadow: 0 0 8px var(--glow), 0 0 20px var(--glow);
  opacity: 0.85;
}
.powered-by .pb-sep {
  width: 18px; height: 1px;
  background: linear-gradient(to right, transparent, var(--glow));
  opacity: 0.4;
}
@keyframes powered-fade {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}