/* public/css/img-loader.css: плейсхолдер и спиннер на время загрузки картинок (управляет public/js/img-loader.js).
   Светлый фон под картинкой: rgba(0,0,0,.1) и тёмный спиннер; тёмный фон (data-ph="dark"): rgba(255,255,255,.1) и белый спиннер.
   Содержимое картинки на время загрузки сдвигается за рамку (она его обрезает), поэтому недогруженный кусок не виден. */

img[data-imgl="wait"] {
    background: rgba(0, 0, 0, .1)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='15' fill='none' stroke='%23000' stroke-opacity='.15' stroke-width='3'/%3E%3Cpath d='M20 5a15 15 0 0 1 15 15' fill='none' stroke='%23000' stroke-opacity='.6' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 20 20' to='360 20 20' dur='.9s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E")
        center / 32px 32px no-repeat;
    color: transparent;                          /* alt-текст не мелькает, пока картинка грузится */
    object-position: 100vw 100vh !important;     /* перебивает inline object-position у карточек */
}
img[data-imgl="wait"][data-ph="dark"] {
    background-color: rgba(255, 255, 255, .1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='15' fill='none' stroke='%23fff' stroke-opacity='.2' stroke-width='3'/%3E%3Cpath d='M20 5a15 15 0 0 1 15 15' fill='none' stroke='%23fff' stroke-opacity='.85' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 20 20' to='360 20 20' dur='.9s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
}

/* на маленьких превью спиннер поменьше */
.search-thumb[data-imgl="wait"],
.fav-thumb img[data-imgl="wait"],
.pp-thumb img[data-imgl="wait"] { background-size: 20px 20px; }

/* плавное появление после загрузки (через filter, чтобы не мешать opacity-переходам fade-галерей и карточек) */
img[data-imgl="in"] { animation: imgl-in .45s ease-out; }
@keyframes imgl-in {
    from { filter: opacity(0); }
    to   { filter: opacity(1); }
}

@media (prefers-reduced-motion: reduce) {
    img[data-imgl="in"] { animation: none; }
}