/* ===== CriAI Backgrounds ===== */

/* Default: LSD Grid */
body.ide-page::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(ellipse at 50% 50%, transparent 20%, rgba(0,0,0,0.95) 80%),
    linear-gradient(90deg, transparent 47%, rgba(255,255,255,0.2) 49%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 51%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(255,255,255,0.2) 49%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 51%, transparent 53%);
  background-size: 100% 100%, 61.8px 61.8px, 61.8px 61.8px;
  background-position: center;
  filter: url(#lsd);
  animation: gridLsd 10s linear infinite;
}
@keyframes gridLsd {
  0% { filter: url(#lsd) hue-rotate(0deg); }
  50% { filter: url(#lsd) hue-rotate(15deg); }
  100% { filter: url(#lsd) hue-rotate(0deg); }
}

/* Grid (blue, no distortion) */
body.ide-page[data-bg="grid"]::before {
  background-image:
    radial-gradient(ellipse at 50% 50%, transparent 20%, rgba(0,0,0,0.95) 80%),
    linear-gradient(90deg, transparent 47%, rgba(66,133,244,0.3) 49%, rgba(66,133,244,0.3) 50%, rgba(66,133,244,0.3) 51%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(66,133,244,0.3) 49%, rgba(66,133,244,0.3) 50%, rgba(66,133,244,0.3) 51%, transparent 53%);
  background-size: 100% 100%, 40px 40px, 40px 40px;
  filter: none;
  animation: none;
}

/* Space (3D warp) */
body.ide-page[data-bg="cyberspace"]::before {
  background: #000;
  perspective: 800px;
  transform-style: preserve-3d;
  overflow: hidden;
  background-image:
    radial-gradient(circle, rgba(124,77,255,0.6) 0 1px, transparent 1px),
    radial-gradient(circle, rgba(255,82,82,0.6) 0 1px, transparent 1px),
    radial-gradient(circle, rgba(255,215,64,0.5) 0 0.8px, transparent 0.8px),
    radial-gradient(circle, rgba(0,229,160,0.5) 0 0.8px, transparent 0.8px),
    radial-gradient(circle, #7C4DFF 0 1.2px, transparent 1.2px),
    radial-gradient(circle, #FF5252 0 1.2px, transparent 1.2px),
    radial-gradient(circle, #FFD740 0 1.2px, transparent 1.2px),
    radial-gradient(circle, #00E5A0 0 1.2px, transparent 1.2px);
  background-repeat: repeat;
  background-size:
    200px 200px, 260px 260px, 320px 320px, 380px 380px,
    260px 260px, 320px 320px, 380px 380px, 440px 440px;
  background-position:
    0 0, 50px 80px, 120px 40px, 80px 160px,
    30px 120px, 90px 200px, 140px 60px, 200px 150px;
  filter: none;
  animation: spaceWarp 8s linear infinite;
}
@keyframes spaceWarp {
  0% {
    transform: translateZ(0) scale(1);
    opacity: 0.4;
  }
  100% {
    transform: translateZ(200px) scale(1.7);
    opacity: 0.4;
  }
}

/* None (pure black) */
body.ide-page[data-bg="none"]::before { display: none; }
body.ide-page[data-bg="none"] { background: #000; }