/* bg.css · logo de la franquicia como fondo general (crossfade).
   - Se muestra en toda la página MENOS en <main> (contenido sólido).
   - Imagen contenida y centrada (sin estirarse ni recortarse).
   - En modo día lleva resplandor negro; en modo noche fondo dorado/naranja
     para que los logos con base oscura no se pierdan sobre el fondo negro. */

#bgFx{
  position:fixed;
  inset:0;
  z-index:-1;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--bg);
}
#bgFx img{
  position:absolute;
  width:min(74vmin, 580px);
  height:auto;
  opacity:0;
  transform:scale(.97);
  transition:opacity .6s ease, transform .6s ease;
  pointer-events:none;
  user-select:none;
  border-radius:22px;
}
#bgFx img.active{
  opacity:1;
  transform:scale(1);
}

/* modo día: resplandor negro alrededor del logo */
:root[data-theme="light"] #bgFx img.active{
  filter:drop-shadow(0 0 22px rgba(0,0,0,.55))
         drop-shadow(0 0 60px rgba(0,0,0,.28));
}

/* modo noche: fondo dorado/naranja alrededor del logo para que
   los logos con base negra no se pierdan (evita fondo blanco anticlimático) */
:root[data-theme="dark"] #bgFx img.active{
  background:radial-gradient(ellipse at center,
    rgba(245,142,39,.22) 0%,
    rgba(240,200,0,.14) 42%,
    transparent 72%);
  padding:18px;
  filter:drop-shadow(0 0 18px rgba(245,142,39,.42))
         drop-shadow(0 0 42px rgba(240,200,0,.22));
}