/* ═══════════════════════════════════════════════════════════════════════════════
   BACKGROUND THEMES
   Used by: #bg-{name} (screen 1) and #capture-bg.bg-{name} (screen 2)
   Each theme targets its class name so the same styles apply to both contexts.
══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. NEON GRID ─────────────────────────────────────────────────────────── */
#bg-neon-grid,
.capture-background.bg-neon-grid {
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    #010610 0%,
    #020A1E 35%,
    #071030 50%,
    #050A14 100%
  );
}

/* Sky stars — pseudo-dots using radial gradients */
#bg-neon-grid::after,
.capture-background.bg-neon-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  height: 50%;
  background:
    radial-gradient(circle, rgba(0,245,255,0.9) 1px, transparent 1px) 15%  20% / 200px 200px,
    radial-gradient(circle, rgba(255,45,120,0.9) 1px, transparent 1px) 42%  8%  / 150px 150px,
    radial-gradient(circle, rgba(240,240,255,0.7) 1px, transparent 1px) 67% 25%  / 250px 250px,
    radial-gradient(circle, rgba(155,48,255,0.8) 1px, transparent 1px) 88%  12%  / 180px 180px,
    radial-gradient(circle, rgba(240,240,255,0.5) 1px, transparent 1px) 30%  40%  / 300px 300px,
    radial-gradient(circle, rgba(0,245,255,0.6) 1px, transparent 1px) 75%  38%   / 220px 220px,
    radial-gradient(circle, rgba(255,45,120,0.6) 1px, transparent 1px) 55%  15%  / 170px 170px;
  animation: twinkle 3s ease-in-out infinite alternate;
}

/* Perspective grid floor */
#bg-neon-grid::before,
.capture-background.bg-neon-grid::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -60%;
  width: 220%;
  height: 58%;
  background:
    linear-gradient(rgba(0, 245, 255, 0.45) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, rgba(0, 245, 255, 0.35) 1px, transparent 1px) 0 0 / 60px 60px;
  transform: perspective(320px) rotateX(68deg);
  transform-origin: top center;
  animation: grid-scroll 1.4s linear infinite;
}

/* Pink horizon glow line */
#bg-neon-grid .horizon-line,
.capture-background.bg-neon-grid .horizon-line {
  /* drawn via box-shadow on a zero-height element injected by backgrounds.js */
}

/* ── 2. GLITCH STATIC ─────────────────────────────────────────────────────── */
#bg-glitch-static,
.capture-background.bg-glitch-static {
  overflow: hidden;
  background: #080010;
}

/* Noise texture via SVG turbulence */
#bg-glitch-static::before,
.capture-background.bg-glitch-static::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.35;
  mix-blend-mode: screen;
}

/* Colored scanlines / horizontal bands */
#bg-glitch-static::after,
.capture-background.bg-glitch-static::after {
  content: '';
  position: absolute;
  inset: -10px;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 2px,
      rgba(155, 48, 255, 0.04) 2px,
      rgba(155, 48, 255, 0.04) 4px
    );
  animation: glitch-shift-h 5s step-start infinite;
  pointer-events: none;
}

/* Glitch RGB split bars */
#bg-glitch-static .glitch-bar-cyan,
#bg-glitch-static .glitch-bar-pink {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#bg-glitch-static .glitch-bar-cyan,
.capture-background.bg-glitch-static .glitch-bar-cyan {
  background: rgba(0, 245, 255, 0.07);
  animation: glitch-shift-h 4.5s step-start 0.3s infinite;
}
#bg-glitch-static .glitch-bar-pink,
.capture-background.bg-glitch-static .glitch-bar-pink {
  background: rgba(255, 45, 120, 0.06);
  animation: glitch-shift-v 4.5s step-start 1.2s infinite;
}

/* ── 3. FESTIVAL LIGHTS ───────────────────────────────────────────────────── */
#bg-festival-lights,
.capture-background.bg-festival-lights {
  background: #020202;
}

#bokeh-canvas,
.capture-background.bg-festival-lights canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── 4. HOLOGRAPHIC ───────────────────────────────────────────────────────── */
#bg-holographic,
.capture-background.bg-holographic {
  overflow: hidden;
  background: #050010;
}

#bg-holographic::before,
.capture-background.bg-holographic::before {
  content: '';
  position: absolute;
  /* Oversized so rotation doesn't reveal edges */
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    #FF2D78,
    #FF8C00,
    #AAFF00,
    #00F5FF,
    #9B30FF,
    #FF2D78
  );
  animation: holo-rotate 6s linear infinite;
  opacity: 0.14;
}

#bg-holographic::after,
.capture-background.bg-holographic::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, transparent 40%, rgba(5,0,16,0.7) 100%);
}

/* ── Background thumbnail previews (bg-selector) ──────────────────────────── */
.bg-thumb--neon-grid {
  background:
    linear-gradient(to bottom, #010610 0%, #020A1E 50%, #050A14 100%);
  position: relative;
  overflow: hidden;
}
.bg-thumb--neon-grid::before {
  content: '';
  position: absolute;
  bottom: 0; left: -40%; width: 180%; height: 55%;
  background:
    linear-gradient(rgba(0,245,255,0.5) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg, rgba(0,245,255,0.4) 1px, transparent 1px) 0 0 / 12px 12px;
  transform: perspective(60px) rotateX(68deg);
  transform-origin: top center;
}

.bg-thumb--glitch-static {
  background: #080010;
  position: relative;
  overflow: hidden;
}
.bg-thumb--glitch-static::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(155,48,255,0.15) 0px, transparent 2px, transparent 4px);
}
.bg-thumb--glitch-static::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,245,255,0.06);
  clip-path: inset(30% 0 40% 0);
}

.bg-thumb--festival-lights {
  background: #020202;
  position: relative;
  overflow: hidden;
}
.bg-thumb--festival-lights::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle 18px, rgba(255,45,120,0.7) 0%, transparent 100%) 20% 60%,
    radial-gradient(circle 22px, rgba(0,245,255,0.6) 0%, transparent 100%) 60% 30%,
    radial-gradient(circle 14px, rgba(170,255,0,0.6) 0%, transparent 100%) 80% 70%,
    radial-gradient(circle 20px, rgba(155,48,255,0.5) 0%, transparent 100%) 40% 20%;
  background-repeat: no-repeat;
  filter: blur(4px);
}

.bg-thumb--holographic {
  background: #050010;
  position: relative;
  overflow: hidden;
}
.bg-thumb--holographic::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: conic-gradient(from 0deg, #FF2D78, #AAFF00, #00F5FF, #9B30FF, #FF2D78);
  opacity: 0.25;
  transform: rotate(30deg);
}