/* assets.css — arte restaurado de la plantilla y reserva de hueco de las imagenes.
 *
 * Dos trabajos:
 *  1. Deshacer el marco de "poster" que fx.css le pone a `.fx-poster` en las tres esferas 3D
 *     de la seccion why y en los objetos grandes de las filas de reasons. Esas imagenes
 *     vuelven a ser recortes con transparencia, no laminas enmarcadas: nada de borde, sombra,
 *     rotacion, fondo ni object-fit. Se neutraliza aqui con selectores mas especificos en vez
 *     de tocar fx.css, que es de otro carril.
 *  2. Que ninguna imagen sea un hueco vacio mientras baja: cada una reserva su caja con
 *     width/height (o aspect-ratio) y, mientras `preload.js` la marca `data-fx-pending`,
 *     pinta un velo suave del color dominante de la propia imagen (`--fx-art-bg`). Un
 *     rectangulo opaco quedaria fatal detras de un recorte con alfa, asi que el velo es un
 *     degradado radial que se apaga hacia los bordes.
 *
 * Se carga despues de fx.css (la op `insert` del bloque ASSETS-RESTORE va al final del body).
 */

/* ---------- 1. fuera el marco de poster en el arte restaurado ---------- */
img.fx-art,
.face-six.fx-art, .face-seven.fx-art, .face-eight.fx-art,
.icon-what.fx-art, .icon-what.size.fx-art, .icon-what.size-o.fx-art {
  border: 0 !important;
  box-shadow: none !important;
  background-color: transparent;
  background-image: none;
  object-fit: contain;
  border-radius: 0;
}
/* la rotacion de lamina y la entrada recortada de fx.js no van en arte con alfa */
img.fx-art.fx-rot-a, img.fx-art.fx-rot-b { --fx-rot: 0deg; transform: none; }
img.fx-art.fx-clip-init, img.fx-art.fx-clip-init.is-in { clip-path: none; transform: none; }

/* El TAMANO no se toca: los anchos fijos que fx.css daba a las laminas colgaban de
   `.fx-poster`, y al devolverle a cada imagen su clase original (`face-six`, `icon-what`…)
   esas reglas ya no casan. Manda el CSS del clon, que es justo lo que se quiere. Poner aqui
   un `width:auto` seria peor que no hacer nada: el atributo width del <img> ganaria al
   porcentaje de la plantilla y las esferas saldrian al doble de tamano (medido). */

/* ---------- 2. reserva de hueco y velo mientras decodifica ---------- */
/* Los <img> restaurados SI llevan width/height (reservan su caja y evitan el salto de
   layout), y por eso necesitan `height:auto`: si no, el alto del atributo gana al alto
   proporcional y la imagen sale estirada. El ancho sigue mandandolo el CSS de la plantilla. */
img.fx-art { height: auto; }

img[data-fx-pending] {
  background-image: radial-gradient(closest-side,
    var(--fx-art-bg, rgba(127, 127, 127, .22)) 0%,
    var(--fx-art-bg, rgba(127, 127, 127, .22)) 52%,
    transparent 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 92% 92%;
}
img[data-fx-ready] { background-image: none; transition: background-image .2s linear; }

/* las animaciones propias no deben revelar un hueco: mientras la imagen esta pendiente se
   queda un pelo transparente, y entra en cuanto decodifica (tope 400 ms) */
img.fx-art[data-fx-pending] { opacity: .35; }
img.fx-art[data-fx-ready] { opacity: 1; transition: opacity .4s ease-out; }
@media (prefers-reduced-motion: reduce) {
  img.fx-art[data-fx-pending], img.fx-art[data-fx-ready] { opacity: 1; transition: none; }
}

/* ---------- 3. la flecha izquierda del carrusel ---------- */
/* El mirror solo tiene el SVG de la flecha derecha (el de la izquierda daba 404 tambien en el
   clon pristino), asi que la izquierda es la misma imagen espejada. */
.fx-arrow-flip { transform: scaleX(-1); }