/* ============================================================
   FRENCORE — estilos del framework
   Solo lo que necesita el propio mecanismo: el contenedor del lienzo
   de escala y las transiciones entre paginas. Nada de diseño.
   ============================================================ */

/* ── Compensacion del zoom del navegador ──────────────────
   Lo escribe frencore/zoom.js. Vale 1/Z, de modo que el zoom del
   navegador queda anulado y la pagina se dibuja como a 100%.

   El respaldo `1` no es decorativo: si zoom.js no esta o el dispositivo es
   tactil, la variable no se define y esto se resuelve a 1, o sea, no-op.

   Va en el body y no en el html a proposito: asi documentElement.clientWidth
   —lo que mide frencore.js— NO se ve afectado, y no puede formarse el bucle
   medir-escribir-medir que producia el parpadeo. */
body{ zoom:var(--zoom-fix, 1); }

/* ── Lienzo de escala ──────────────────────────────────────
   El contenedor reserva el alto que ocupa el lienzo YA escalado.
   transform no participa en el flujo: sin esta reserva el documento
   quedaria largo al reducir y corto al ampliar.

   El calculo lo hace el CSS con las dos variables que escribe
   frencore.js, de modo que no hay que medir nada en cada fotograma
   —medir y escribir en la misma pasada era el origen del parpadeo—. */
.scale-canvas-wrapper{
  width:100%;
  max-width:100vw;
  /* Segunda barrera contra el desbordamiento lateral: aunque el lienzo se
     pase por redondeo, aquí se recorta y nunca llega a pedir barra.

     `clip` y no `hidden`: en un elemento normal, poner hidden en un eje
     obliga al otro a `auto`, y como este contenedor lleva alto fijo se
     convertiría en un panel con scroll propio —la página dejaría de
     desplazarse—. `clip` recorta sin crear contenedor de scroll. */
  overflow-x:clip;
  height:calc(var(--canvas-h, 0px) * var(--page-scale, 1));
}

.scale-canvas{
  /* Ancho de maqueta FIJO. Sin max-width a propósito: limitarlo al
     contenedor haría que a 1024px la página se maquetara a 1024 y encima
     se encogiera al 71%, que es justo lo contrario de lo que se busca.
     El ajuste a la ventana lo hace el transform, no el ancho; de que no
     desborde se encargan el recorte del contenedor y el margen de
     seguridad de la escala. */
  width:var(--maxw, 1440px);
  /* Centrado. Solo hace algo cuando la ventana supera los 1440px: como la
     escala ya no amplía por encima de ese ancho, sin esto la página se
     quedaría pegada a la izquierda con todo el hueco a la derecha. Por
     debajo no hay sitio que repartir y `auto` se resuelve a 0, que es lo
     que necesita el origen arriba-izquierda para cuadrar. */
  margin:0 auto;
  /* El origen va arriba-IZQUIERDA, no arriba-centro. Con `center` el
     escalado solo cuadra cuando la ventana supera los 1440px, que es
     cuando `margin:0 auto` tiene hueco para centrar; por debajo la caja
     arranca en x=0 y al escalar desde su centro el contenido se
     desplazaba a la derecha y se salia de la pantalla. */
  transform-origin:top left;
  transform:scale(var(--page-scale, 1));

  /* Aísla el interior: lo que cambie aquí dentro (carruseles, revelados,
     el typewriter) no obliga al navegador a recalcular el documento
     entero. Menos reflujos globales = menos ocasiones de temblar.

     Sin `size` a propósito: el alto tiene que seguir dependiendo del
     contenido, que es de donde sale --canvas-h.

     Y sin `paint`: recortaba TODO lo que sobresaliera de la caja de
     1440px, incluida la franja del pie, que se ensancha a propósito para
     ir a sangre. El azul se pintaba correctamente y este `contain` lo
     cortaba justo en el borde del lienzo, que es por lo que seguía
     quedando blanco a los lados en pantallas anchas.

     `layout` es el que aísla los reflujos internos —lo que interesaba
     para el temblor—; `paint` solo evitaba pintar fuera de la caja, que
     aquí es justo lo que hace falta permitir. */
  contain:layout style;
}

/* Por debajo del umbral manda el diseño movil: ancho real y sin escalar.
   La regla vive aqui, y no solo en el JS, para que el salto ocurra
   aunque el script no llegue a ejecutarse. */
@media (max-width:768px){
  .scale-canvas-wrapper{height:auto;}
  .scale-canvas{width:100%;transform:none;}
}

/* ── Transicion entre paginas ──────────────────────────────
   Donde hay View Transitions API la usa el navegador. Este bloque es el
   respaldo para el resto: un fundido corto al salir. */
#router-outlet{
  /* Fundido entre paginas: sale a 0 con .frencore-saliendo y vuelve a 1
     al quitarse la clase. Es el mecanismo de siempre, sin nada encima. */
  transition:opacity .16s ease;
}
#router-outlet.frencore-saliendo{
  opacity:0;
}

@media (prefers-reduced-motion:reduce){
  #router-outlet{transition:none;}
  #router-outlet.frencore-saliendo{opacity:1;}
}

/* Los montajes de componentes no deben aportar caja propia: el diseño lo
   ponen el nav, el pie y el preloader por su cuenta. */
#nav-mount,#footer-mount,#preloader-mount,#floating-logo-mount{
  display:contents;
}