/* ===================== FONDO ANIMADO ===================== */
#bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* Cuadrícula en perspectiva que se desplaza, con desvanecido hacia arriba */
.gridbg {
  position: fixed; left: -50%; right: -50%; bottom: -10%; height: 70vh; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(rgba(168, 85, 247, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, .22) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(520px) rotateX(62deg);
  transform-origin: center bottom;
  -webkit-mask-image: linear-gradient(to top, #000 5%, transparent 85%);
          mask-image: linear-gradient(to top, #000 5%, transparent 85%);
  animation: gridmove 3.2s linear infinite;
  opacity: .55;
}
@keyframes gridmove { to { background-position: 0 64px, 64px 0; } }

/* Auroras: bandas de luz que ondulan detrás del contenido */
.aurora { position: fixed; inset: -20% -10% auto -10%; height: 70vh; z-index: -3; pointer-events: none; opacity: .55; filter: blur(70px); }
.aurora::before, .aurora::after { content: ''; position: absolute; inset: 0; }
.aurora::before { background: conic-gradient(from 200deg at 30% 40%, transparent 0 20%, rgba(124, 58, 237, .55) 35%, rgba(217, 70, 239, .35) 50%, transparent 65%); animation: wave1 14s ease-in-out infinite alternate; }
.aurora::after  { background: conic-gradient(from 20deg at 75% 30%, transparent 0 25%, rgba(99, 102, 241, .4) 40%, rgba(168, 85, 247, .45) 55%, transparent 70%); animation: wave2 18s ease-in-out infinite alternate; }
@keyframes wave1 { to { transform: translateX(8%) rotate(6deg) scale(1.12); } }
@keyframes wave2 { to { transform: translateX(-9%) rotate(-7deg) scale(1.1); } }

/* Viñeta para dar profundidad y que el texto se lea mejor */
.vignette { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, transparent 45%, rgba(5, 6, 10, .55) 100%); }

@media (max-width: 700px) { .gridbg { height: 45vh; opacity: .4; } .aurora { filter: blur(50px); } }


/* Panel: versión sutil (sin cuadrícula, auroras tenues) */
body[data-require-auth] .gridbg { display: none; }
body[data-require-auth] .aurora { opacity: .22; height: 55vh; }

/* Más movimiento: auroras con respiración y cuadrícula que avanza más rápido */
.aurora { animation: breathe 9s ease-in-out infinite alternate; }
@keyframes breathe { from { opacity: .4; transform: translateY(0) scale(1); } to { opacity: .7; transform: translateY(4%) scale(1.06); } }
.gridbg { animation-duration: 2.2s; }
body[data-require-auth] .aurora { animation: none; }


/* Con "reducir animaciones" activo el fondo sigue vivo pero más lento (gana a la regla general de site.css) */
@media (prefers-reduced-motion: reduce) {
  html body .gridbg { animation: gridmove 5s linear infinite !important; }
  html body .aurora { animation: breathe 18s ease-in-out infinite alternate !important; }
  html body .aurora::before { animation: wave1 28s ease-in-out infinite alternate !important; }
  html body .aurora::after { animation: wave2 36s ease-in-out infinite alternate !important; }
  html body[data-require-auth] .aurora { animation: none !important; }
}
/* Pausa manual */
html.bg-paused .gridbg, html.bg-paused .aurora, html.bg-paused .aurora::before, html.bg-paused .aurora::after { animation-play-state: paused !important; }

#bg-toggle {
  position: fixed; left: 16px; bottom: 16px; z-index: 60; cursor: pointer;
  font: 600 12px 'Inter', system-ui, sans-serif; color: #c4b5fd; padding: 8px 13px; border-radius: 999px;
  background: rgba(15, 18, 29, .8); border: 1px solid rgba(168, 85, 247, .35); backdrop-filter: blur(10px);
  opacity: .55; transition: opacity .2s, transform .2s, background .2s;
}
#bg-toggle:hover, #bg-toggle:focus-visible { opacity: 1; transform: translateY(-2px); background: rgba(124, 58, 237, .25); }