/** ==========================================================================
 * LA BURBUJA DE VIDRIO QUE SIGUE AL RATÓN (Eduardo, 24/09/2026)
 *
 * En la home y en la pantalla de acceso. La crea y la mueve js/cei-burbuja.js:
 * la posición, la forma de gota al moverse, el tamaño (se encoge encima de lo
 * que se pulsa) y la opacidad van en línea. Es una lupa de vidrio líquido: un
 * filtro SVG de desplazamiento como el de la barra, con un mapa propio
 * (#CeiLenteHome, lo pinta el JS) que amplía en el centro. Solo Blink aplica
 * filtros SVG en backdrop-filter (la clase la pone cei-cabecera.js en el body,
 * o cei26_pie_acceso() en el acceso); el resto, desenfoque y saturación.
 * Fija a la ventana: por encima del contenido y del footer, y por debajo de la
 * barra.
 *
 * Dos capas (Eduardo, 25/09/2026: «que no se pare»): .VidrioLente solo se
 * mueve (el transform del JS) y .VidrioLente-cristal, dentro, lleva el
 * vidrio, la opacidad y la respiración (.is-flotando, una animación del
 * compositor cuando no hay ratón que seguir) sin pisar el transform de fuera.
 * OJO: la de fuera no puede llevar opacity, filter, mask ni will-change de
 * esos: la haría «backdrop root» y el cristal solo vería a su padre (vacío),
 * no la página. Pasó el 25/09/2026 y la burbuja se quedó sin vidrio.
 *
 * Lo que hace al fondo (Eduardo, 25/09/2026: «una pequeña saturación y un
 * pequeño zoom»): saturación al 150 % en todos los navegadores; en Blink,
 * además, la lupa (×1,2 en todo el círculo); en el resto, un desenfoque de
 * 1px, que no hay lupa que enseñar.
 *
 * EXCEPCIÓN REGISTRADA: el diámetro (150px), el desenfoque de 1px y la
 * saturación de 150 % no tienen token: el vidrio de la barra
 * (--Global-Vidrio-Blur, 18px/400 %) borraría lo que la lente enseña. Motivo:
 * efecto nuevo, sin equivalente en la web · Autor: Eduardo · 24/09/2026.
 * ========================================================================== */

.VidrioLente {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9995; /* sobre el footer (9990), bajo la barra (9999) */
  width: 150px;  /* = DIAMETRO en js/cei-burbuja.js */
  height: 150px;
  pointer-events: none; /* lo de debajo se sigue pulsando */
  will-change: transform; /* solo transform: ver la nota de arriba */
}

.VidrioLente-cristal {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: 50%;
  background-color: rgb(255 255 255 / 0.06);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.05); /* el canto de la lente, que se vea sobre blanco */
  opacity: 0; /* la sube el JS */
  -webkit-backdrop-filter: blur(1px) saturate(150%);
  backdrop-filter: blur(1px) saturate(150%);
}

body.cei-has-liquidGlass .VidrioLente-cristal {
  backdrop-filter: blur(1px) saturate(150%) url(#CeiLiquidGlass);
}

/* Con la lupa (#CeiLenteHome): sin desenfoque, que lo que se amplía se vea
   nítido, y un brillo arriba a la izquierda como en el vidrio */
body.cei-has-liquidGlass .VidrioLente.has-lupa .VidrioLente-cristal {
  background-image: linear-gradient(135deg, rgb(255 255 255 / 0.22), transparent 45%);
  backdrop-filter: saturate(150%) url(#CeiLenteHome);
}

/* Sin ratón que seguir, respira: un 6 % arriba y abajo, despacio. Solo mueve
   la escala del cristal, en el compositor: no cuesta nada */
@keyframes VidrioRespira {
  from {
    scale: 1;
  }

  to {
    scale: 1.06;
  }
}

.VidrioLente.is-flotando .VidrioLente-cristal {
  animation: VidrioRespira 2.4s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .VidrioLente.is-flotando .VidrioLente-cristal {
    animation: none;
  }
}

:root[data-accesible="plano"] .VidrioLente {
  display: none;
}