/* ================================================================
   FRAN96MC.ES — SISTEMA DE DISEÑO COMPARTIDO
   includes/transiciones.css — estilos de la "cortina de píxeles":
   la transición entre páginas del sitio. El DOM lo inyecta
   includes/transiciones.js (no hace falta markup previo).
   Funcionamiento:
     · IDA: al pulsar un enlace con data-trans, las celdas de la
       cortina aparecen en oleada diagonal y, al cubrir la pantalla,
       se navega a la nueva página.
     · VUELTA: la página destino detecta sessionStorage['fm-trans'],
       pinta la cortina ya cerrada y la abre en oleada inversa.
   Cada celda anima SOLO opacity/transform, con retraso individual
   (--fm-retraso) calculado por el JS. Duración total: 250-350ms.
   ================================================================ */

/* Contenedor a pantalla completa, por encima de todo (incluso del
   warp de la portada). No captura clics: es puramente visual. */
.fm-cortina{
  position:fixed;inset:0;
  z-index:calc(var(--z-warp,50) + 10);
  display:grid; /* columnas/filas las fija el JS según el viewport */
  pointer-events:none;
  contain:strict;
}

/* Celda individual de la cortina. Nace invisible y encogida; la
   clase del contenedor decide hacia qué estado transiciona. */
.fm-cortina i{
  display:block;
  background:var(--fm-color,var(--acento-pagina));
  opacity:0;
  transform:scale(.4);
  /* margen negativo mínimo para que no asomen juntas entre celdas */
  margin:-1px;
  transition:
    opacity var(--fm-dur-celda,.15s) var(--ease-out,ease-out),
    transform var(--fm-dur-celda,.15s) var(--ease-back,ease-out);
  transition-delay:var(--fm-retraso,0s);
}

/* IDA (cerrando): las celdas aparecen en oleada diagonal
   hasta cubrir la pantalla entera con el color del acento. */
.fm-cortina.fm-cierra i{
  opacity:1;
  transform:scale(1.05); /* leve solape para que no queden ranuras */
}

/* VUELTA (revelado): el JS pinta las celdas ya visibles sin
   transición (clase fm-cerrada) y después activa fm-abre para
   que desaparezcan en oleada y revelen la página nueva. */
.fm-cortina.fm-cerrada i{
  opacity:1;
  transform:scale(1.05);
  transition:none;
}
.fm-cortina.fm-abre i{
  opacity:0;
  transform:scale(.4);
  transition:
    opacity var(--fm-dur-celda,.15s) var(--ease-out,ease-out),
    transform var(--fm-dur-celda,.15s) var(--ease-out,ease-out);
  transition-delay:var(--fm-retraso,0s);
}

/* Movimiento reducido: la cortina no se usa (el JS ya navega
   directamente), pero por si acaso se anula toda transición. */
@media (prefers-reduced-motion:reduce){
  .fm-cortina{display:none}
  .fm-cortina i{transition:none}
}