/* * Carga de imágenes. Las clases lmg-img / lmg-img-skeleton en * las pone un script en el head solo si la opción está activa y el * usuario no tiene las animaciones del sistema desactivadas. * image-loading.js marca cada imagen: .lmg-img-loading mientras carga * y .lmg-img-in al terminar. --lmg-img-duration viene de las opciones. */ /* Esqueleto: tono papel con un brillo que lo recorre. Los !important y el filter ganan a las reglas del lazy load de Bricks (.bricks-lazy-hidden pone background-image: none !important y su estado .wait añade su propio icono y oscurece con un filtro). */ html.lmg-img-skeleton img.lmg-img-loading { background-color: #ece7db; background-image: linear-gradient( 100deg, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 64% ) !important; background-size: 200% 100% !important; background-position: 0 0; background-repeat: no-repeat; filter: none; animation: lmg-shimmer 1.3s ease-in-out infinite; } @keyframes lmg-shimmer { from { background-position: 120% 0; } to { background-position: -80% 0; } } /* Entrada al terminar de cargar: de translúcida y desenfocada a nítida. Se parte de opacidad 0.3 (no 0) para que el hueco nunca quede vacío. */ html.lmg-img img.lmg-img-in { animation: lmg-img-in var(--lmg-img-duration, 600ms) cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes lmg-img-in { from { opacity: 0.3; filter: blur(10px); } to { opacity: 1; filter: blur(0); } }