/* ============================================
   EDP STUDIO — BACKGROUND SYSTEM
   Layer 1: Base ink
   Layer 2: Gradient mesh CMYK animado
   Layer 3: Trazos SVG dibujados (en secciones)
   Layer 4: Grain texture overlay
   ============================================ */

/* ───── LAYER 2: AURORA ANIMADA (JS-driven) ─────
   Los gradientes radiales son pintados cada frame por initHeroAurora()
   en main.js. background-blend-mode:screen los funde sobre el --ink
   de fondo para crear el efecto luminoso CMY. */
.bg-mesh {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
  overflow: hidden;
  background: var(--ink);
  background-blend-mode: screen;
  filter: blur(80px) saturate(1.2);
  will-change: background-image;
}

/* ───── LAYER 3: DOODLE STROKES (decoración por sección) ───── */
.bg-doodle {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0.15;
}

.bg-doodle path,
.bg-doodle line,
.bg-doodle circle {
  stroke: var(--paper);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bg-doodle--accent path,
.bg-doodle--accent line {
  stroke: var(--orange);
}

/* ───── LAYER 4: GRAIN TEXTURE ───── */
.bg-grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.18'/%3E%3C/svg%3E");
}

/* Para móvil, reducir la intensidad del grain */
@media (max-width: 767px) {
  .bg-grain {
    opacity: 0.35;
  }
}