/* src/css/theme-scenes.css */
/* A fixed, non-interactive background canvas that themes can restyle */
.scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--crusher-background-canvas);
  transition: background var(--crusher-motion-duration-slow) var(--crusher-motion-easing-inout);
}

/* ===== GLASS ===== */
html[data-theme="glass"] .scene {
  --blob1: radial-gradient(800px 600px at 10% 20%, rgba(255,255,255,0.35), transparent 60%);
  --blob2: radial-gradient(600px 500px at 80% 10%, rgba(255,0,200,0.15), transparent 60%);
  --blob3: radial-gradient(700px 600px at 30% 90%, rgba(34,197,94,0.18), transparent 60%);
  background:
    var(--blob1),
    var(--blob2),
    var(--blob3),
    linear-gradient(180deg, color-mix(in srgb, var(--crusher-color-brand-secondary) 10%, transparent), transparent 40%),
    var(--crusher-background-canvas);
  backdrop-filter: blur(var(--effect-blur-md, 16px));
  -webkit-backdrop-filter: blur(var(--effect-blur-md, 16px));
}

/* ===== FUTURISTIC ===== */
html[data-theme="futuristic"] .scene {
  background:
    radial-gradient(1200px 800px at 80% 20%, color-mix(in srgb, var(--crusher-color-brand-primary) 20%, transparent), transparent 60%),
    radial-gradient(1000px 700px at 10% 80%, color-mix(in srgb, var(--crusher-color-brand-secondary) 18%, transparent), transparent 60%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--crusher-background-canvas) 92%, var(--crusher-color-brand-primary) 8%),
      var(--crusher-background-canvas)
    );
  mask-image: radial-gradient(120% 90% at 50% 35%, #000 60%, transparent 100%);
}
html[data-theme="futuristic"][data-mode="light"] .scene {
  background:
    radial-gradient(1200px 800px at 80% 20%, color-mix(in srgb, var(--crusher-color-brand-primary) 18%, transparent), transparent 60%),
    radial-gradient(1000px 700px at 10% 80%, color-mix(in srgb, var(--crusher-color-brand-secondary) 16%, transparent), transparent 60%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--crusher-color-base-white) 72%, var(--crusher-color-brand-primary) 10%),
      var(--crusher-background-canvas)
    );
}
html[data-theme="futuristic"][data-mode="dark"] .scene {
  background:
    radial-gradient(1200px 800px at 80% 20%, color-mix(in srgb, var(--crusher-color-brand-primary) 24%, transparent), transparent 60%),
    radial-gradient(1000px 700px at 10% 80%, color-mix(in srgb, var(--crusher-color-brand-secondary) 22%, transparent), transparent 60%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--crusher-background-canvas) 90%, black 10%),
      var(--crusher-background-canvas)
    );
}
html[data-theme="futuristic"] .grid-overlay {
  position: absolute; inset: -2rem;
  pointer-events: none;
  background-image:
    linear-gradient(transparent 95%, rgba(255,255,255,0.06) 95%),
    linear-gradient(90deg, transparent 95%, rgba(255,255,255,0.06) 95%);
  background-size: 24px 24px;
  mask: linear-gradient(0deg, transparent 0%, black 15%, black 85%, transparent 100%);
}

/* ===== BRUTAL ===== */
html[data-theme="brutal"] .scene {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--crusher-color-brand-accent-orange) 40%, var(--crusher-background-canvas)) 0 18%,
      var(--crusher-background-canvas) 18% 72%,
      color-mix(in srgb, var(--crusher-color-brand-primary) 32%, var(--crusher-background-canvas)) 72% 100%
    );
}
html[data-theme="brutal"][data-mode="dark"] .scene {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--crusher-color-brand-accent-orange) 50%, var(--crusher-background-canvas)) 0 18%,
      var(--crusher-background-canvas) 18% 72%,
      color-mix(in srgb, var(--crusher-color-brand-primary) 40%, var(--crusher-background-canvas)) 72% 100%
    );
}

/* ===== NEOBRUTAL ===== */
html[data-theme="neobrutal"] .scene {
  background:
    radial-gradient(1200px 600px at 20% 10%, color-mix(in srgb, var(--crusher-color-brand-secondary) 14%, transparent), transparent 60%),
    radial-gradient(1200px 600px at 90% 80%, color-mix(in srgb, var(--crusher-color-brand-primary) 12%, transparent), transparent 60%),
    var(--crusher-background-canvas);
}
html[data-theme="neobrutal"][data-mode="dark"] .scene {
  background:
    radial-gradient(1200px 600px at 20% 10%, color-mix(in srgb, var(--crusher-color-brand-secondary) 22%, transparent), transparent 60%),
    radial-gradient(1200px 600px at 90% 80%, color-mix(in srgb, var(--crusher-color-brand-primary) 18%, transparent), transparent 60%),
    var(--crusher-background-canvas);
}

/* ===== MINIMAL ===== */
html[data-theme="minimal"] .scene {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--crusher-text-primary) 6%, transparent), transparent 28%),
    linear-gradient(90deg, color-mix(in srgb, var(--crusher-text-primary) 4%, transparent), transparent 14%),
    radial-gradient(780px 440px at 92% 8%, color-mix(in srgb, var(--crusher-color-brand-primary) 5%, transparent), transparent 68%),
    radial-gradient(680px 420px at 12% 92%, color-mix(in srgb, var(--crusher-text-primary) 4%, transparent), transparent 72%),
    var(--crusher-background-canvas);
}
html[data-theme="minimal"][data-mode="dark"] .scene {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--crusher-color-base-white) 5%, transparent), transparent 28%),
    linear-gradient(90deg, color-mix(in srgb, var(--crusher-color-base-white) 3%, transparent), transparent 16%),
    radial-gradient(780px 440px at 92% 8%, color-mix(in srgb, var(--crusher-color-base-white) 6%, transparent), transparent 68%),
    radial-gradient(760px 460px at 10% 90%, color-mix(in srgb, var(--crusher-color-brand-primary) 8%, transparent), transparent 72%),
    var(--crusher-background-canvas);
}

/* ===== NEUMORPH ===== */
html[data-theme="neumorph"] .scene {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--crusher-color-base-white) 58%, transparent), color-mix(in srgb, black 8%, transparent)),
    radial-gradient(1000px 700px at 12% 18%, color-mix(in srgb, var(--crusher-color-base-white) 30%, transparent), transparent 60%),
    radial-gradient(900px 600px at 88% 82%, color-mix(in srgb, black 12%, transparent), transparent 60%),
    radial-gradient(720px 420px at 84% 22%, color-mix(in srgb, var(--crusher-color-brand-primary) 8%, transparent), transparent 70%),
    var(--crusher-background-canvas);
}
html[data-theme="neumorph"][data-mode="dark"] .scene {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--crusher-color-base-white) 5%, transparent), color-mix(in srgb, black 20%, transparent)),
    radial-gradient(1000px 700px at 10% 20%, color-mix(in srgb, var(--crusher-color-base-white) 9%, transparent), transparent 60%),
    radial-gradient(900px 600px at 90% 80%, color-mix(in srgb, black 24%, transparent), transparent 60%),
    radial-gradient(720px 420px at 82% 18%, color-mix(in srgb, var(--crusher-color-brand-primary) 10%, transparent), transparent 70%),
    var(--crusher-background-canvas);
}

/* ===== BENTO ===== */
html[data-theme="bento"] .scene {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--crusher-color-brand-primary) 3%, transparent), transparent 36%),
    linear-gradient(125deg, transparent 0 68%, color-mix(in srgb, var(--crusher-color-brand-primary) 5%, transparent) 68% 80%, transparent 80%),
    linear-gradient(215deg, transparent 0 72%, color-mix(in srgb, var(--crusher-color-brand-secondary) 5%, transparent) 72% 84%, transparent 84%),
    radial-gradient(520px 340px at 18% 18%, color-mix(in srgb, var(--crusher-color-brand-primary) 6%, transparent), transparent 68%),
    radial-gradient(560px 360px at 84% 20%, color-mix(in srgb, var(--crusher-color-brand-secondary) 6%, transparent), transparent 68%),
    var(--crusher-background-canvas);
}
html[data-theme="bento"][data-mode="dark"] .scene {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--crusher-color-brand-primary) 6%, transparent), transparent 38%),
    linear-gradient(125deg, transparent 0 64%, color-mix(in srgb, var(--crusher-color-brand-primary) 9%, transparent) 64% 78%, transparent 78%),
    linear-gradient(215deg, transparent 0 68%, color-mix(in srgb, var(--crusher-color-brand-secondary) 10%, transparent) 68% 82%, transparent 82%),
    radial-gradient(640px 440px at 18% 18%, color-mix(in srgb, var(--crusher-color-brand-primary) 12%, transparent), transparent 65%),
    radial-gradient(640px 440px at 84% 24%, color-mix(in srgb, var(--crusher-color-brand-secondary) 12%, transparent), transparent 65%),
    var(--crusher-background-canvas);
}