/* ══════════════════════════════════════════════
   EXILIUM — AMBIENT BACKGROUND SYSTEM
   Capas cinemáticas: fondos, vignette, grain,
   luces ambientales, partículas y mouse glow.
   ══════════════════════════════════════════════ */

/* ── Body ambient gradients ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 10% -10%, rgba(200,146,42,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 110%, rgba(107,47,160,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(139,26,26,0.04) 0%, transparent 70%);
}

/* ── Scanline CRT overlay (override body::after) ── */
body::after {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  ) !important;
  animation: none !important;
}

/* ── Cinematic Background System ── */
.bg-cinematic {
  position: fixed;
  inset: 0;
  z-index: -3;
  background-image: url('img/bg-epic.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(8px) brightness(0.4);
  transform: scale(1.05);
}

.bg-overlay {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: radial-gradient(circle at center, rgba(5,5,10,0.6), rgba(5,5,10,0.95));
}
.bg-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('img/embers.png');
  background-size: cover;
  background-position: center;
  opacity: 0.08;
  mix-blend-mode: screen;
  animation: embersOverlayPulse 12s ease-in-out infinite alternate;
}

.bg-texture {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.04;
  background-image: url('img/texture-smoke.png');
  background-size: 600px;
  mix-blend-mode: overlay;
  animation: textureFloat 30s linear infinite;
}

/* ── Vignette ── */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 65% 55% at 50% 50%, transparent 30%, rgba(5,5,10,0.55) 100%);
}

/* ── Film grain ── */
.film-grain {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.022;
  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='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}

/* ── Breathing ambient lights ── */
.ambient-light {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0;
  animation: ambientDrift 20s ease-in-out infinite;
}
.ambient-light.warm  { width: 600px; height: 600px; background: rgba(200,146,42,0.04);  top: 10%;  left: 15%;  animation-delay: 0s; }
.ambient-light.cool  { width: 500px; height: 500px; background: rgba(107,47,160,0.03);  bottom: 10%; right: 10%; animation-delay: -10s; }
.ambient-light.ember { width: 400px; height: 400px; background: rgba(180,60,30,0.025);  top: 60%;  left: 50%;  animation-delay: -5s; }

/* ── Particle canvas ── */
#particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}

/* ── Mouse glow ── */
.mouse-glow {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  will-change: left, top;
}
.mouse-glow-inner {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,146,42,0.05) 0%, rgba(200,146,42,0.02) 30%, transparent 65%);
}
.mouse-glow-outer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,146,42,0.015) 0%, transparent 60%);
}