/* ============================================================
   img-placeholder.css — красивые заглушки пока постеры грузятся
   Подключить: <link rel="stylesheet" href="/css/img-placeholder.css">
   ============================================================ */

.img-ph {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #2b2140 0%, #3d2b63 50%, #241a38 100%);
    min-height: 40px;
}

/* Анимированный shimmer-блик */
.img-ph::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 40%,
        rgba(255, 190, 240, 0.13) 50%,
        rgba(255, 255, 255, 0.06) 60%,
        transparent 100%
    );
    animation: imgph-shimmer 1.6s infinite;
}

@keyframes imgph-shimmer {
    100% { transform: translateX(100%); }
}

/* Лёгкая иконка-кружок по центру (LB-стиль) */
.img-ph::before {
    content: '🐞';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(18px, 4vw, 34px);
    opacity: 0.35;
    animation: imgph-pulse 1.6s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes imgph-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .3; }
    50%      { transform: translate(-50%, -50%) scale(1.15); opacity: .55; }
}

/* Само изображение появляется плавно */
.img-ph > img {
    opacity: 0;
    transition: opacity .45s ease;
    position: relative;
    z-index: 2;
    display: block;
}

.img-ph.img-loaded::after,
.img-ph.img-loaded::before {
    display: none;
    content: none;
}

.img-ph.img-loaded > img {
    opacity: 1;
}

/* Если картинка не загрузилась */
.img-ph.img-error {
    background: repeating-linear-gradient(
        45deg,
        #2b2140, #2b2140 12px,
        #31254a 12px, #31254a 24px
    );
}
.img-ph.img-error::before {
    content: '🖼';
    opacity: .4;
    animation: none;
}

/* Уважаем prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .img-ph::after { animation: none; }
    .img-ph::before { animation: none; }
}