:root{
  --bg0:#02020a;
  --ink:#e9fff9;
  --muted:rgba(233,255,249,.65);
  --neonA:#b6ffea;
  --neonB:#75d7ff;
}

/* reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg0);
  color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  overflow:hidden;
}

/* =========================
   BACKGROUND COMPOSITION
   ========================= */

#bg{
  position:fixed;
  inset:0;
  z-index:-10;
  background:var(--bg0);
  overflow:hidden;
}

#bg video{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.2;
  filter:
    brightness(.7)
    contrast(1.1)
    saturate(.8);
}

#bg video.vid-tr{
  top:0;
  right:0;
  transform:scale(1.5) rotate(180deg);
  transform-origin:top right;
  animation:drift-tr 60s linear infinite;
}

#bg video.vid-bl{
  bottom:0;
  left:0;
  transform:scale(1.5);
  transform-origin:bottom left;
  animation:drift-bl 45s linear infinite reverse;
}

@keyframes drift-tr{
  0%{transform:scale(1.5) rotate(180deg) translate(0,0)}
  50%{transform:scale(1.6) rotate(180deg) translate(5%,5%)}
  100%{transform:scale(1.5) rotate(180deg) translate(0,0)}
}

@keyframes drift-bl{
  0%{transform:scale(1.5) translate(0,0)}
  50%{transform:scale(1.6) translate(-5%,-5%)}
  100%{transform:scale(1.5) translate(0,0)}
}

/* glitch texture stack - stitched from glitches folder */
.bg-glitch{
  position:absolute;
  inset:0;
  pointer-events:none;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:repeat(2, 1fr);
  opacity:.35;
}

.bg-glitch::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    url(bg_images/glitches/rubber_ducky.webp) 0 0/33.33% 50% no-repeat,
    url(bg_images/glitches/rubber_duckey.webp) 33.33% 0/33.33% 50% no-repeat,
    url(bg_images/glitches/rubbber_duckee.webp) 66.66% 0/33.33% 50% no-repeat,
    url(bg_images/glitches/rubbber_duckeee.webp) 0 50%/33.33% 50% no-repeat,
    url(bg_images/glitches/rubbber_duckieieie.webp) 33.33% 50%/33.33% 50% no-repeat,
    url(bg_images/glitches/rubbbber_duckeyte.webp) 66.66% 50%/33.33% 50% no-repeat;
  filter:grayscale(.6) contrast(1.2);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  #bg video{display:none}
  .bg-glitch{opacity:.14}
}

/* =========================
   FOREGROUND / SIGIL
   ========================= */

.stage{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

.sigil{
  font-size:clamp(24px, 8vw, 72px);
  font-weight:700;
  letter-spacing:0.05em;
  line-height:1.2;
  text-align:center;
  text-shadow:
    0 0 20px rgba(182,255,234,.3),
    0 0 60px rgba(117,215,255,.2);
  user-select:none;
  padding:0 1rem;
  word-break:keep-all;
  white-space:nowrap;
}

.pipe{color:var(--muted)}

/* =========================
   ZERO: FLICKER + GLITCH
   ========================= */

.zero{
  position:relative;
  color:#ffffff;
  text-shadow:
    0 0 10px #ffffff,
    0 0 30px rgba(200,230,255,.8),
    0 0 60px rgba(150,200,255,.5);
  animation:flicker 3s infinite;
}

@keyframes flicker{
  0%,85%,100%{opacity:1}
  88%{opacity:.2}
  91%{opacity:1}
  94%{opacity:.4}
  97%{opacity:.9}
}

/* glitch layers - prominent upward drift */
.zero.glitch::before,
.zero.glitch::after{
  content:"0";
  position:absolute;
  left:0;
  right:0;
  pointer-events:none;
}

.zero.glitch::before{
  color:#ffffff;
  text-shadow:
    0 0 15px #ffffff,
    0 0 30px #ffffff;
  animation:glitch-up-white 2s ease-out infinite;
}

.zero.glitch::after{
  color:#a8d4ff;
  text-shadow:
    0 0 20px #a8d4ff,
    0 0 40px #7ab8ff;
  animation:glitch-up-blue 2s ease-out infinite 0.3s;
}

@keyframes glitch-up-white{
  0%{
    transform:translateY(0);
    opacity:0.9;
  }
  30%{
    opacity:0.7;
  }
  70%{
    transform:translateY(-50px);
    opacity:0.3;
  }
  100%{
    transform:translateY(-80px);
    opacity:0;
  }
}

@keyframes glitch-up-blue{
  0%{
    transform:translateY(0);
    opacity:0.8;
  }
  30%{
    opacity:0.6;
  }
  70%{
    transform:translateY(-40px);
    opacity:0.2;
  }
  100%{
    transform:translateY(-70px);
    opacity:0;
  }
}

/* =========================
   HIT COUNTER
   ========================= */

.counter{
  position:fixed;
  bottom:1.5rem;
  right:1.5rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:0.75rem;
  color:var(--muted);
  opacity:.6;
  letter-spacing:0.05em;
}