/* ===========================================
   СКЕЛЕТОНЫ КАРТИНОК
   Идея взята из glavclubsite/css/components/_image-skeleton.css, но:
   1) там градиенты белые (тёмная тема) — здесь тёплые под кремовый фон;
   2) там глобальное правило `img { opacity: 0 }` + `.loaded` от JS —
      если скрипт не отработал, НИ ОДНА картинка не видна. Здесь наоборот:
      картинка видима по умолчанию, скелетон лежит ПОД ней и просто
      перестаёт просвечивать. Без JS сайт остаётся рабочим.
   =========================================== */

@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Обёртка задаёт пропорцию заранее → нет скачка вёрстки при загрузке */
.img-frame {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        90deg,
        rgba(74, 14, 14, 0.04) 0%,
        rgba(74, 14, 14, 0.09) 50%,
        rgba(74, 14, 14, 0.04) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

/* Загрузилось — гасим анимацию, чтобы не крутить её вечно под картинкой */
.img-frame.is-loaded {
    animation: none;
    background: var(--color-surface-container);
}

.img-frame--square {
    aspect-ratio: 1 / 1;
}

.img-frame--wide {
    aspect-ratio: 16 / 9;
}

.img-frame--portrait {
    aspect-ratio: 3 / 4;
}

.img-frame > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

.img-frame > img.is-loaded {
    opacity: 1;
}

/* Подстраховка: если JS не отработал (ошибка, отключён) — показать картинку
   через 1.2с всё равно. Лучше картинка без плавного появления, чем пустота. */
@media (prefers-reduced-motion: no-preference) {
    .img-frame > img {
        animation: img-failsafe-show 0s linear 1.2s forwards;
    }
}

@keyframes img-failsafe-show {
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .img-frame {
        animation: none;
        background: var(--color-surface-container);
    }

    .img-frame > img {
        opacity: 1;
        transition: none;
    }
}