/* ==========================================================================
   components/background.css
   Capas decorativas fijas: lienzo del fondo 3D, ruido, luz del cursor y barra de progreso.
   ========================================================================== */
#bg3d { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
body::before { /* luces ambientales */
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60vmax 60vmax at 85% -10%, rgba(227,38,43,.18), transparent 60%),
    radial-gradient(50vmax 50vmax at -10% 110%, rgba(227,38,43,.12), transparent 60%);
  animation: ambient 14s ease-in-out infinite alternate;
}
@keyframes ambient { to { transform: translate3d(-3%, 2%, 0) scale(1.08); } }
.bg-noise { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cursor-glow { position: fixed; left: -200px; top: -200px; width: 400px; height: 400px; border-radius: 50%; z-index: 1; pointer-events: none; background: radial-gradient(circle, rgba(227,38,43,.16), transparent 65%); }
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; }
.scroll-progress span { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--red-deep), var(--red-2)); box-shadow: 0 0 10px var(--red); }

.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease) var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }