/* pixel-bg.css — CSS-only pixel art backgrounds */
.bg-pixel-stars {
  background-color: #0a0e1a;
  background-image:
    radial-gradient(1.5px 1.5px at 3% 7%, #fff 100%, transparent),
    radial-gradient(1px 1px at 8% 23%, #fbbf24 100%, transparent),
    radial-gradient(2px 2px at 15% 45%, #60a5fa 100%, transparent),
    radial-gradient(1px 1px at 22% 68%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 30% 88%, #fbbf24 100%, transparent),
    radial-gradient(1px 1px at 38% 12%, #fff 100%, transparent),
    radial-gradient(2px 2px at 45% 34%, #a78bfa 100%, transparent),
    radial-gradient(1px 1px at 52% 55%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 58% 77%, #60a5fa 100%, transparent),
    radial-gradient(1px 1px at 65% 95%, #fff 100%, transparent),
    radial-gradient(2px 2px at 72% 18%, #fbbf24 100%, transparent),
    radial-gradient(1px 1px at 78% 40%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 85% 62%, #a78bfa 100%, transparent),
    radial-gradient(1px 1px at 92% 83%, #fff 100%, transparent),
    radial-gradient(2px 2px at 97% 5%, #60a5fa 100%, transparent),
    radial-gradient(1px 1px at 5% 50%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 12% 72%, #fbbf24 100%, transparent),
    radial-gradient(1px 1px at 20% 92%, #fff 100%, transparent),
    radial-gradient(2px 2px at 28% 15%, #a78bfa 100%, transparent),
    radial-gradient(1px 1px at 35% 38%, #60a5fa 100%, transparent),
    radial-gradient(1.5px 1.5px at 42% 60%, #fff 100%, transparent),
    radial-gradient(1px 1px at 50% 82%, #fbbf24 100%, transparent),
    radial-gradient(2px 2px at 57% 3%, #fff 100%, transparent),
    radial-gradient(1px 1px at 63% 28%, #a78bfa 100%, transparent),
    radial-gradient(1.5px 1.5px at 70% 52%, #fff 100%, transparent),
    radial-gradient(1px 1px at 76% 72%, #60a5fa 100%, transparent),
    radial-gradient(2px 2px at 83% 90%, #fbbf24 100%, transparent),
    radial-gradient(1px 1px at 90% 10%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 95% 35%, #a78bfa 100%, transparent),
    radial-gradient(1px 1px at 100% 58%, #fff 100%, transparent),
    radial-gradient(0.5px 0.5px at 10% 15%, rgba(255,255,255,0.4) 100%, transparent),
    radial-gradient(0.5px 0.5px at 25% 30%, rgba(255,255,255,0.3) 100%, transparent),
    radial-gradient(0.5px 0.5px at 40% 50%, rgba(255,255,255,0.4) 100%, transparent),
    radial-gradient(0.5px 0.5px at 55% 65%, rgba(255,255,255,0.3) 100%, transparent),
    radial-gradient(0.5px 0.5px at 70% 80%, rgba(255,255,255,0.4) 100%, transparent),
    radial-gradient(0.5px 0.5px at 85% 10%, rgba(255,255,255,0.3) 100%, transparent);
  background-size: 100% 100%;
  animation: twinkle 4s ease-in-out infinite alternate;
}

@keyframes twinkle {
  0% { opacity: 0.85; }
  100% { opacity: 1; }
}

.bg-pixel-grid {
  background-color: #0f172a;
  background-image:
    linear-gradient(#1e293b 1px, transparent 1px),
    linear-gradient(90deg, #1e293b 1px, transparent 1px),
    linear-gradient(rgba(59,130,246,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.06) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 8px 8px, 8px 8px;
  position: relative;
}

.bg-pixel-grid::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(59,130,246,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(99,102,241,0.06) 0%, transparent 50%);
  pointer-events: none;
}

.bg-pixel-checker {
  background-color: #0f172a;
  background-image:
    conic-gradient(from 0deg at 50% 50%, #1e293b 0deg 90deg, transparent 90deg 180deg, #1e293b 180deg 270deg, transparent 270deg 360deg),
    conic-gradient(from 45deg at 50% 50%, rgba(99,102,241,0.04) 0deg 90deg, transparent 90deg 180deg, rgba(99,102,241,0.04) 180deg 270deg, transparent 270deg 360deg);
  background-size: 20px 20px, 10px 10px;
  background-position: 0 0, 0 0;
}

.bg-pixel-circuit {
  background-color: #050d1a;
  background-image:
    linear-gradient(90deg, transparent 7px, #3b82f6 7px 8px, transparent 8px),
    linear-gradient(transparent 7px, #3b82f6 7px 8px, transparent 8px),
    linear-gradient(90deg, transparent 15px, #60a5fa 15px 16px, transparent 16px),
    linear-gradient(transparent 15px, #60a5fa 15px 16px, transparent 16px),
    linear-gradient(90deg, transparent 23px, #2563eb 23px 24px, transparent 24px),
    linear-gradient(transparent 23px, #2563eb 23px 24px, transparent 24px),
    radial-gradient(2px 2px at 0 0, #93c5fd 100%, transparent),
    radial-gradient(2px 2px at 8px 8px, #93c5fd 100%, transparent),
    radial-gradient(2px 2px at 16px 0, #93c5fd 100%, transparent),
    radial-gradient(2px 2px at 24px 8px, #93c5fd 100%, transparent),
    radial-gradient(2px 2px at 0 16px, #93c5fd 100%, transparent),
    radial-gradient(2px 2px at 8px 24px, #93c5fd 100%, transparent),
    radial-gradient(2px 2px at 16px 16px, #93c5fd 100%, transparent),
    radial-gradient(2px 2px at 24px 24px, #93c5fd 100%, transparent);
  background-size: 32px 32px;
  position: relative;
}

.bg-pixel-circuit::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 25%, rgba(59,130,246,0.1) 0%, transparent 40%),
    radial-gradient(ellipse at 85% 75%, rgba(99,102,241,0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 50%, rgba(37,99,235,0.05) 0%, transparent 50%);
  pointer-events: none;
}

.bg-pixel-diamond {
  background-color: #0f172a;
  background-image:
    conic-gradient(from 45deg at 50% 50%, transparent 0deg 90deg, #1e293b 90deg 180deg, transparent 180deg 270deg, #1e293b 270deg 360deg),
    conic-gradient(from 0deg at 50% 50%, transparent 0deg 90deg, rgba(59,130,246,0.04) 90deg 180deg, transparent 180deg 270deg, rgba(59,130,246,0.04) 270deg 360deg);
  background-size: 32px 32px, 16px 16px;
  position: relative;
}

.bg-pixel-diamond::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(99,102,241,0.03) 8px, rgba(99,102,241,0.03) 9px),
    repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(99,102,241,0.03) 8px, rgba(99,102,241,0.03) 9px);
  background-size: 16px 16px;
  pointer-events: none;
}

.bg-pixel-rain {
  background-color: #080e1a;
  background-image:
    linear-gradient(transparent 3px, rgba(59,130,246,0.25) 3px 4px, transparent 4px),
    linear-gradient(transparent 5px, rgba(96,165,250,0.2) 5px 6px, transparent 6px),
    linear-gradient(transparent 7px, rgba(147,197,253,0.15) 7px 8px, transparent 8px),
    linear-gradient(90deg, transparent 3px, rgba(59,130,246,0.06) 3px 4px, transparent 4px),
    linear-gradient(90deg, transparent 5px, rgba(96,165,250,0.04) 5px 6px, transparent 6px);
  background-size: 100% 20px, 100% 28px, 100% 36px, 20px 100%, 28px 100%;
  animation: rain-drop 1.2s linear infinite;
  position: relative;
}

.bg-pixel-rain::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    linear-gradient(transparent 2px, rgba(147,197,253,0.12) 2px 3px, transparent 3px);
  background-size: 100% 12px;
  animation: rain-drop 0.8s linear infinite;
  pointer-events: none;
}

@keyframes rain-drop {
  0% { background-position: 0 0, 8px 0, 4px 0, 0 0, 0 0; }
  100% { background-position: 0 20px, 8px 28px, 4px 36px, 0 0, 0 0; }
}

.bg-pixel-mountain {
  background-color: #0a0f1a;
  background-image:
    linear-gradient(135deg, transparent 20px, #1a2744 20px 40px, transparent 40px),
    linear-gradient(225deg, transparent 20px, #1a2744 20px 40px, transparent 40px),
    linear-gradient(135deg, transparent 15px, #233255 15px 30px, transparent 30px),
    linear-gradient(225deg, transparent 15px, #233255 15px 30px, transparent 30px),
    linear-gradient(135deg, transparent 10px, #2d3f66 10px 20px, transparent 20px),
    linear-gradient(225deg, transparent 10px, #2d3f66 10px 20px, transparent 20px),
    linear-gradient(135deg, transparent 6px, #3a5080 6px 12px, transparent 12px),
    linear-gradient(225deg, transparent 6px, #3a5080 6px 12px, transparent 12px);
  background-size: 80px 40px, 80px 40px, 60px 30px, 60px 30px, 44px 22px, 44px 22px, 28px 14px, 28px 14px;
  background-position: 0 60%, 40px 60%, 10px 50%, 40px 50%, 18px 40%, 42px 40%, 22px 32%, 44px 32%;
  background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x;
  position: relative;
}

.bg-pixel-mountain::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(147,197,253,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 30%, rgba(99,102,241,0.04) 0%, transparent 40%);
  pointer-events: none;
}

.bg-pixel-mountain::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background:
    linear-gradient(transparent, rgba(147,197,253,0.03)),
    repeating-linear-gradient(90deg, transparent, transparent 12px, rgba(147,197,253,0.04) 12px, rgba(147,197,253,0.04) 13px);
  pointer-events: none;
}

.bg-pixel-nebula {
  background-color: #0f0720;
  background-image:
    radial-gradient(ellipse at 20% 30%, rgba(139, 92, 246, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 60%, rgba(59, 130, 246, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(236, 72, 153, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 20%, rgba(168, 85, 247, 0.12) 0%, transparent 40%),
    radial-gradient(ellipse at 30% 70%, rgba(59, 130, 246, 0.1) 0%, transparent 40%),
    conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(139, 92, 246, 0.05) 90deg,
                   transparent 180deg, rgba(59, 130, 246, 0.05) 270deg, transparent 360deg);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}

.bg-pixel-matrix {
  background-color: #0a0a0a;
  background-image:
    repeating-linear-gradient(90deg, transparent 0px, transparent 7px, rgba(0, 255, 0, 0.06) 7px, rgba(0, 255, 0, 0.06) 8px, transparent 8px, transparent 16px),
    repeating-linear-gradient(transparent 0px, transparent 7px, rgba(0, 255, 0, 0.05) 7px, rgba(0, 255, 0, 0.05) 8px, transparent 8px, transparent 16px);
  background-size: 16px 16px;
  position: relative;
}

.bg-pixel-matrix::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1.5px 1.5px at 3% 8%, rgba(0, 255, 0, 0.7) 100%, transparent),
    radial-gradient(1px 1px at 8% 22%, rgba(0, 255, 0, 0.5) 100%, transparent),
    radial-gradient(1.5px 1.5px at 14% 35%, rgba(0, 255, 0, 0.6) 100%, transparent),
    radial-gradient(1px 1px at 20% 50%, rgba(0, 255, 0, 0.4) 100%, transparent),
    radial-gradient(1.5px 1.5px at 26% 65%, rgba(0, 255, 0, 0.7) 100%, transparent),
    radial-gradient(1px 1px at 32% 78%, rgba(0, 255, 0, 0.5) 100%, transparent),
    radial-gradient(1.5px 1.5px at 38% 90%, rgba(0, 255, 0, 0.6) 100%, transparent),
    radial-gradient(1px 1px at 44% 5%, rgba(0, 255, 0, 0.4) 100%, transparent),
    radial-gradient(1.5px 1.5px at 50% 18%, rgba(0, 255, 0, 0.7) 100%, transparent),
    radial-gradient(1px 1px at 56% 32%, rgba(0, 255, 0, 0.5) 100%, transparent),
    radial-gradient(1.5px 1.5px at 62% 45%, rgba(0, 255, 0, 0.6) 100%, transparent),
    radial-gradient(1px 1px at 68% 58%, rgba(0, 255, 0, 0.4) 100%, transparent),
    radial-gradient(1.5px 1.5px at 74% 72%, rgba(0, 255, 0, 0.7) 100%, transparent),
    radial-gradient(1px 1px at 80% 84%, rgba(0, 255, 0, 0.5) 100%, transparent),
    radial-gradient(1.5px 1.5px at 86% 96%, rgba(0, 255, 0, 0.6) 100%, transparent),
    radial-gradient(1px 1px at 92% 12%, rgba(0, 255, 0, 0.4) 100%, transparent),
    radial-gradient(1.5px 1.5px at 96% 26%, rgba(0, 255, 0, 0.7) 100%, transparent),
    radial-gradient(1px 1px at 100% 40%, rgba(0, 255, 0, 0.5) 100%, transparent),
    radial-gradient(1px 1px at 5% 45%, rgba(0, 255, 0, 0.3) 100%, transparent),
    radial-gradient(1px 1px at 12% 60%, rgba(0, 255, 0, 0.4) 100%, transparent),
    radial-gradient(1px 1px at 18% 75%, rgba(0, 255, 0, 0.3) 100%, transparent),
    radial-gradient(1px 1px at 24% 88%, rgba(0, 255, 0, 0.4) 100%, transparent),
    radial-gradient(1px 1px at 30% 2%, rgba(0, 255, 0, 0.3) 100%, transparent),
    radial-gradient(1px 1px at 36% 15%, rgba(0, 255, 0, 0.4) 100%, transparent),
    radial-gradient(1px 1px at 42% 30%, rgba(0, 255, 0, 0.3) 100%, transparent),
    radial-gradient(1px 1px at 48% 42%, rgba(0, 255, 0, 0.4) 100%, transparent),
    radial-gradient(1px 1px at 54% 55%, rgba(0, 255, 0, 0.3) 100%, transparent),
    radial-gradient(1px 1px at 60% 68%, rgba(0, 255, 0, 0.4) 100%, transparent),
    radial-gradient(1px 1px at 66% 80%, rgba(0, 255, 0, 0.3) 100%, transparent),
    radial-gradient(1px 1px at 72% 93%, rgba(0, 255, 0, 0.4) 100%, transparent),
    radial-gradient(1px 1px at 78% 8%, rgba(0, 255, 0, 0.3) 100%, transparent),
    radial-gradient(1px 1px at 84% 20%, rgba(0, 255, 0, 0.4) 100%, transparent),
    radial-gradient(1px 1px at 90% 33%, rgba(0, 255, 0, 0.3) 100%, transparent),
    radial-gradient(1px 1px at 94% 48%, rgba(0, 255, 0, 0.4) 100%, transparent);
  pointer-events: none;
  animation: matrix-fade 2.5s ease-in-out infinite alternate;
}

@keyframes matrix-fade {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}