/* =========================================================
   WEBGL — v45. Los lienzos que crea js/webgl.js.
   Sin js/webgl.js (o sin WebGL) nada de esto aparece y la
   página es exactamente la de v44.
   ========================================================= */

/* 1. Cortina de código: sustituye a los paneles de color de
   .curtain (main.js sigue marcando is-out / is-in; aquí sólo
   se vuelven invisibles y el lienzo pinta el código encima). */
/* Los rectángulos de color no se vuelven a ver nunca: ni un
   instante al cargar la página nueva, antes de que llegue el JS. */
.curtain i { background: transparent !important; }
/* Al llegar desde otra página, la pantalla nace tapada con el color
   de fondo (el mismo que hay detrás del código) hasta que el lienzo
   pinta su primer frame de 0 y 1; así no se ve la página "a pelo"
   entre la cortina que se va y la que llega. Lo pone el script del
   <head> y lo quita js/webgl.js (o él solo, a los 1,5 s). */
html.edg-arriving::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 990;
  background: var(--bg);
  pointer-events: none;
}
.gl-curtain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  z-index: 991;
  pointer-events: none;
  display: none;
}
.gl-curtain.is-on { display: block; }

/* 2. Constelación: ocupa el hero, bajo el título. */
.gl-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  animation: gl-fade 1.6s var(--ease) 0.2s forwards;
}
@keyframes gl-fade { to { opacity: 1; } }
/* En las demás páginas la esfera vive en la cabecera (.page-head):
   el texto queda por encima y nada se sale por los lados. */
.page-head { position: relative; overflow-x: clip; }
.page-head > :not(.gl-hero) { position: relative; z-index: 1; }

/* 3. Ensamblaje: las piezas flotan (JS) y al encajar dan un
   golpe elástico, con un pequeño rebote al pasarse de sitio. */
.asm { will-change: translate, rotate, scale; }
/* Mientras flotan, las piezas se salen por los lados: sin esto, en
   móvil el navegador ensancha la página y aparece scroll lateral.
   clip (no hidden) para no romper position: sticky. */
html, body { overflow-x: clip; }
.asm-snap {
  transition:
    translate 0.6s cubic-bezier(0.25, 1.65, 0.45, 1),
    rotate 0.6s cubic-bezier(0.25, 1.65, 0.45, 1),
    scale 0.6s cubic-bezier(0.25, 1.65, 0.45, 1);
}

@media (prefers-reduced-motion: reduce) {
  .gl-hero { animation: none; opacity: 1; }
  .asm { translate: none !important; rotate: none !important; scale: none !important; }
}

@media print {
  .gl-curtain, .gl-hero { display: none !important; }
}