/* =====================================================================
   Плейсхолдеры под фото (inc/slot.php). Подключается только на не-AMP страницах.
   Эффекты: kenburns, tilt, shine, curtain, float, spotlight, parallax, colorshift
   ===================================================================== */
.slot { margin: 6px auto 22px; position: relative; max-width: 920px; }
.slot__frame {
    position: relative; overflow: hidden; border-radius: 16px;
    aspect-ratio: var(--ar, 16/7); background: var(--ink-2);
    border: 1px solid var(--hair);
    box-shadow: 0 14px 34px rgba(0,0,0,.35);
    transform-style: preserve-3d; will-change: transform;
}
.slot__art {
    position: absolute; inset: -6%;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(60% 80% at 22% 30%, hsla(var(--h), 90%, 58%, .55), transparent 70%),
        radial-gradient(55% 70% at 80% 75%, hsla(calc(var(--h) + 40), 85%, 50%, .45), transparent 72%),
        linear-gradient(135deg, hsl(var(--h), 40%, 12%), hsl(calc(var(--h) + 30), 45%, 19%));
}
.slot__art::before {
    content: ""; position: absolute; inset: 0; opacity: .22;
    background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
    background-size: 34px 34px;
}
.slot__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot__fx { position: absolute; inset: 0; pointer-events: none; }

/* 1. kenburns: медленный наезд и дрейф */
.slot--kenburns .slot__art { animation: slot-kb 16s ease-in-out infinite alternate; }
@keyframes slot-kb { from { transform: scale(1) translate(0,0); } to { transform: scale(1.12) translate(-2.5%, -2%); } }

/* 2. tilt: наклон за курсором (переменные задаёт slots.js) + блик */
.slot--tilt .slot__frame { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .18s ease-out; }
.slot--tilt .slot__fx { background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.22), transparent 45%); }

/* 3. shine: диагональный блик, проходящий по кадру */
.slot--shine .slot__fx {
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
    transform: translateX(-120%); animation: slot-shine 4.8s ease-in-out infinite;
}
@keyframes slot-shine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* 4. curtain: кадр раскрывается шторкой при прокрутке */
.slot--curtain .slot__frame { clip-path: inset(0 100% 0 0 round 16px); transition: clip-path 1s cubic-bezier(.7,0,.2,1); }
.slot--curtain.slot--on .slot__frame { clip-path: inset(0 0 0 0 round 16px); }

/* 5. float: плавное парение с дыханием тени */
.slot--float .slot__frame { animation: slot-float 5.5s ease-in-out infinite; }
@keyframes slot-float {
    0%, 100% { transform: translateY(0); box-shadow: 0 14px 34px rgba(0,0,0,.35); }
    50% { transform: translateY(-9px); box-shadow: 0 26px 40px rgba(0,0,0,.28); }
}

/* 6. spotlight: пятно света ходит за курсором */
.slot--spotlight .slot__art { filter: brightness(.7) saturate(.9); transition: filter .3s; }
.slot--spotlight:hover .slot__art { filter: brightness(.85) saturate(1.1); }
.slot--spotlight .slot__fx { background: radial-gradient(180px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,236,190,.5), transparent 70%); mix-blend-mode: soft-light; }

/* 7. parallax: внутренний слой смещается при прокрутке (--py задаёт slots.js) */
.slot--parallax .slot__art { transform: translateY(var(--py, 0px)) scale(1.08); transition: transform .12s linear; }

/* 8. colorshift: цветовой сдвиг и зум при наведении */
.slot--colorshift .slot__art { filter: hue-rotate(0deg) saturate(.85); transition: filter .8s ease, transform .8s ease; }
.slot--colorshift:hover .slot__art { filter: hue-rotate(70deg) saturate(1.3); transform: scale(1.07); }

@media (max-width: 640px) {
    .slot__frame { border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .slot__art, .slot__frame, .slot__fx { animation: none !important; transition: none !important; }
    .slot--curtain .slot__frame { clip-path: none; }
}