:root {
  --glow-primary: #00d4ff;
  --glow-secondary: #ff006e;
}

.code-rain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0; /* behind content but above body background */
  overflow: hidden;
}

.code-snippet {
  position: absolute;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  color: var(--glow-primary);
  opacity: 0;
  animation: rain linear infinite;
  white-space: nowrap;
  letter-spacing: .5px;
  filter: drop-shadow(0 0 4px rgba(0,212,255,0.35));
}

@keyframes rain {
  0% { transform: translateY(-110vh) translateZ(0); opacity: 0; }
  10% { opacity: .18; }
  85% { opacity: .18; }
  100% { transform: translateY(110vh) translateZ(0); opacity: 0; }
}

/* Subtle hero glow pulse */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 55% 45%, rgba(0,212,255,0.10), transparent 60%),
    radial-gradient(circle at 45% 55%, rgba(255,0,110,0.07), transparent 65%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: heroGlow 9s ease-in-out infinite;
  z-index: -1;
}

@keyframes heroGlow {
  0%,100% { opacity:.55; transform: scale(1); }
  50% { opacity:.85; transform: scale(1.08); }
}

:root.light .code-snippet {
  color: var(--glow-secondary);
  filter: drop-shadow(0 0 4px rgba(255,0,110,0.28));
  animation-name: rainLight;
}

@keyframes rainLight {
  0% { transform: translateY(-110vh); opacity: 0; }
  12% { opacity: .10; }
  80% { opacity: .10; }
  100% { transform: translateY(110vh); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .code-snippet, .hero::before { animation: none !important; opacity: 0.15; }
}