/* ==========================================================================
   Quantum · Fondo de la portada
   --------------------------------------------------------------------------
   Pone en index.html el mismo fondo animado que usa el resto del sitio (el
   que vive en design-system.css) y saca el orbe de partículas del hero.

   Va en un archivo aparte porque la portada no carga el design system: así se
   le da solo el fondo, sin cambiarle nada más del diseño.

   PARA REVERTIR: sacar el <link> de home-bg.css de index.html y volver a
   poner `animate();` en el script del orbe (está anotado ahí mismo).
   ========================================================================== */

/* ------------------------------------------------------------- fondo animado */
/* Mismas dos capas que el resto: el GIF y encima un velo oscuro para que el
   texto se lea. El GIF es de 192px y se amplía, así que sale suave solo. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -3;
    background-image: url('fondo-tofu.jpg');
    background-size: cover;
    background-position: center;
    transform: scale(1.06);
    will-change: transform;
    pointer-events: none;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background: linear-gradient(180deg, rgba(8, 7, 12, 0.78), rgba(8, 7, 12, 0.90));
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    body::after { background-image: url('fondo-tofu.jpg'); }
}
/* En el teléfono el GIF de 952 KB no se justifica: va detrás de un velo negro
   al 78-90% y prácticamente no se percibe, pero se come el ancho de banda que
   necesitan las miniaturas de la tienda. Se usa el cuadro fijo, que pesa 25 KB. */
@media (max-width: 900px) {
    body::after { background-image: url('fondo-tofu.jpg'); }
}

/* el contenido tiene que quedar por encima de las dos capas */
body > *:not(script):not(style) { position: relative; }

/* --------------------------------------------------------------- el orbe */
/* El lienzo se oculta y, además, el script no arranca la animación cuando
   está oculto (son 1500 partículas por frame). */
#particle-canvas { display: none !important; }