/* La capa 3D (Three.js): el lugar y su lienzo. El mismo archivo para todos
   los diseños; solo baja si el cliente declaró alguna escena.

   Cada diseño le pasa SU paleta en su propio .css, con estas variables:

     --escena-1       color principal (la marca)
     --escena-2       color de acento
     --escena-fondo   el color sobre el que se dibuja: la escena se funde
                      hacia él con la distancia, y así no termina en un borde
     --escena-x/-y    hacia dónde correr el objeto, de -1 a 1, según dónde el
                      diseño tenga espacio libre (un titular a la izquierda
                      pide la escena a la derecha)

   Acá NO van valores por defecto de los colores, a propósito: si un diseño
   se olvida de definirlos, el motor usa los suyos y lo AVISA en la consola.
   Con un valor por defecto acá, el olvido pasaría callado (learnings L26). */

.escena-3d {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;   /* decoración: los clics pasan al contenido */
}

/* El lienzo lo crea el JavaScript, así que esta regla solo existe cuando el
   JS corrió: si falla, no queda NADA escondido (la regla dura de la skill
   de animaciones). Nace transparente y aparece cuando ya dibujó su primer
   cuadro: nunca se ve un rectángulo negro mientras compila. */
.escena-3d canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1);
}
.escena-3d.lista canvas { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .escena-3d canvas { transition: none; }
}