/*
 * feat-40: Focus mode (ver js/focus_mode.js). Reglas genéricas que sirven para cualquier modo.
 * Solo actúan cuando el JS ha arrancado (.fm-ready): sin JS no se oculta nada.
 * Lo que es el mismo efecto que el zoom de la imagen de la ficha está en BStyle.css, en las reglas del zoom
 * (plegar, crecer, la ✕ y su duración, --transition-duration). Aquí solo va lo que el focus mode añade o cambia.
 * Lo propio de cada modo (p. ej. el tamaño de la imagen ampliada) va en el CSS de cada página.
 */

/* Deja animar la altura y el ancho desde y hasta "auto": las cajas pierden o ganan su espacio poco a poco.
   Chrome y Edge 129+; en los demás navegadores ese cambio va de golpe, sin romper nada */
.fm-ready { interpolate-size: allow-keywords; }

/* Cajas que se pliegan o crecen al abrir un modo, con la misma duración que el zoom de la imagen.
   Lo que añade el focus mode: lo plegado tampoco se alcanza con el tabulador (visibility). Al plegar se oculta al
   final de la animación; al desplegar vuelve a verse en el acto (visibility 0s), para que el foco pueda volver a lo
   que había dentro. Los valores del plegado (ancho, alto, relleno y opacidad a 0) son los del zoom, en BStyle.css */
.fm-ready [data-focus-block], .fm-ready [data-focus-grow] { transition: all var(--transition-duration), visibility 0s; }
.fm-ready .fm-collapsed { visibility: hidden; transition: all var(--transition-duration); }
/* Las cajas interiores (.box) se animan con la misma duración que su bloque */
.fm-ready [data-focus-block] > .box { transition-duration: var(--transition-duration); }

/* Caja que crece hasta todo el ancho con su modo abierto (el ancho al 100 %, como la imagen del zoom, en BStyle.css).
   Lo que añade: sin márgenes ni ancho máximo. min-width: 0 para que empiece en su tamaño (como elemento flex,
   por defecto no bajaría del ancho de lo que va a mostrar) */
.fm-ready [data-focus-grow] { min-width: 0; }
.fm-ready .fm-grown { max-width: none; margin-left: 0; margin-right: 0; }

/* Contenido que solo existe con su modo abierto: aparece creciendo desde nada y se va igual. Desde nada quiere decir
   altura 0 y también relleno de arriba y abajo 0: si no, al cerrar quedaría un hueco del tamaño del relleno que
   desaparece de golpe al final y mueve todo lo de debajo.
   Cerrado no ocupa sitio ni se pinta (display: none), así que no le cuesta nada a la página.
   overflow: hidden recorta lo que aún no cabe mientras crece y contiene los floats de dentro (BStyle usa muchos) */
.fm-ready [data-focus-only] {
	overflow: hidden;
	transition: all var(--transition-duration), display var(--transition-duration) allow-discrete;
}
.fm-ready [data-focus-only]:not(.fm-shown) { display: none !important; height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }
@starting-style {
	.fm-ready [data-focus-only].fm-shown { height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }
}

/* Piezas que viajan (data-fm-from/to): fuera de su lado no se ven ni un instante; mientras viajan las pinta
   View Transitions (sin esto se verían dos veces: la que viaja y la original desvaneciéndose en su sitio) */
.fm-ready .fm-away { visibility: hidden; transition: all var(--transition-duration), visibility 0s; }

/* Sin animación (al cargar la página con #modo). También ::before y ::after, que no entran en «*» (la serpiente de la ficha) */
.fm-instant, .fm-instant *, .fm-instant *::before, .fm-instant *::after { transition: none !important; }

/* Botón de cerrar genérico: comparte en BStyle.css todo el efecto de la ✕ del zoom de la imagen (posición, tamaño,
   gris, opacidad, azul al pasar el ratón y transiciones). Aquí solo lo que cambia por ser un <button>:
   sin borde ni fondo, y opaco también al llegar con el teclado */
.fm-close { z-index: 2; padding: 4px; border: 0; background: transparent; line-height: 1; }
.fm-close:focus-visible { opacity: 1; }

/* View Transitions solo mueve las piezas que viajan, con la misma duración. El resto de la página no es una foto
   con fundido: se ve en vivo, con sus cajas creciendo y encogiendo a la vez */
::view-transition-group(*) { animation-duration: var(--transition-duration); }
/* El fundido entre la foto de antes y la de después de cada pieza dura la mitad del viaje: la pieza se ve nítida en su
   tamaño nuevo cuanto antes (la foto de antes, ampliada, se ve borrosa) */
::view-transition-old(*), ::view-transition-new(*) { animation-duration: calc(var(--transition-duration) / 2); }
::view-transition-old(root) { display: none; }
::view-transition-new(root) { animation: none; }

@media (prefers-reduced-motion: reduce) {
	.fm-ready [data-focus-block], .fm-ready [data-focus-grow], .fm-ready [data-focus-only], .fm-ready [data-focus-block] > .box { transition: none; }
}