/**
 * Cryptogre PhotoViewer — оформление просмотрщика фото.
 * Цвета берём из переменных темы, ничего не хардкодим.
 * Тени и блюр — только на статичных слоях: у трансформируемого <img> их быть
 * не должно, иначе на слабом Android каждый кадр pan/zoom пересчитывает эффект.
 */

.pv {
    position: fixed; inset: 0; z-index: 9999;
    height: 100vh; height: 100dvh;
    /* непрозрачный фон: на тёмной теме даже 3% пропускания давали читаемый текст
       страницы под просмотрщиком и мешали смотреть фото */
    background: #0A0B0E;
    opacity: 0; transition: opacity .2s ease-out;
    /* жесты забираем себе целиком, иначе браузер параллельно зумит страницу */
    touch-action: none; overscroll-behavior: contain;
    user-select: none; -webkit-user-select: none;
}
.pv[hidden] { display: none; }
.pv.is-open { opacity: var(--pv-fade, 1); }

/* ─── сцена ─────────────────────────────────────────────────────────── */
.pv__stage {
    position: absolute; left: 0; right: 0;
    top: calc(52px + env(safe-area-inset-top));
    bottom: calc(76px + env(safe-area-inset-bottom));
    overflow: hidden; cursor: default;
}
.pv.is-single .pv__stage { bottom: calc(52px + env(safe-area-inset-bottom)); }

/* размытый предпросмотр под картинкой — пока грузится полный размер */
.pv__blur {
    position: absolute; inset: -24px; pointer-events: none;
    background-size: cover; background-position: center;
    filter: blur(26px) saturate(120%); opacity: .28;
}

/* Центрируем абсолютом, а не grid-выравниванием: у grid переполняющий элемент
   прижимается к началу трека, и картинка шире сцены уезжала за правый край. */
.pv__img {
    position: absolute; left: 50%; top: 50%;
    display: block; max-width: none; max-height: none;
    transform-origin: center center; will-change: transform;
    cursor: grab;
}
.pv.is-zoomed .pv__img { cursor: grab; }
.pv__img.is-anim { transition: transform .22s cubic-bezier(.2, .8, .2, 1); }

/* короткое затемнение при листании тапом — иначе смена кадра незаметна */
.pv__img.is-flash { animation: pv-flash .24s ease-out; }
@keyframes pv-flash { from { opacity: .25; } to { opacity: 1; } }

/* соседние кадры: стоят за краями сцены и едут вместе с пальцем при свайпе */
.pv__side {
    position: absolute; left: 50%; top: 50%;
    max-width: 100%; max-height: 100%; width: auto; height: auto;
    object-fit: contain; pointer-events: none;
    transform: translate(-50%, -50%) translate3d(-99999px, 0, 0);
    will-change: transform;
}
.pv__side.is-anim { transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.pv__side:not([src]) { display: none; }
.pv.is-zoomed .pv__side, .pv.is-single .pv__side { display: none; }
/* в зуме соседи прячутся, но появляются, когда тянут за край — это листание */
.pv.is-zoomed.is-edge .pv__side { display: block; }

.pv__spin {
    position: absolute; left: 50%; top: 50%; margin: -17px 0 0 -17px;
    width: 34px; height: 34px; border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, .18); border-top-color: var(--accent);
    animation: pv-spin .8s linear infinite;
}
.pv__spin[hidden] { display: none; }
@keyframes pv-spin { to { transform: rotate(360deg); } }

/* ─── верхняя панель ────────────────────────────────────────────────── */
.pv__top {
    position: absolute; left: 0; right: 0; top: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 10px calc(14px + env(safe-area-inset-left));
    pointer-events: none;
}
.pv__count { font: 600 13px 'Space Grotesk', sans-serif; color: rgba(255, 255, 255, .72); }
.pv__tools { display: flex; gap: 8px; pointer-events: auto; }
.pv__btn {
    width: 40px; height: 40px; display: grid; place-items: center;
    border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, .1); color: #fff;
    transition: background .18s;
}
.pv__btn:hover { background: rgba(255, 255, 255, .22); }
.pv__btn svg { width: 19px; height: 19px; }

/* ─── стрелки ───────────────────────────────────────────────────────── */
.pv__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px; display: grid; place-items: center;
    border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, .1); color: #fff;
    transition: background .18s, opacity .18s;
}
.pv__nav:hover { background: rgba(255, 255, 255, .22); }
.pv__nav svg { width: 22px; height: 22px; }
.pv__prev { left: max(10px, env(safe-area-inset-left)); }
.pv__next { right: max(10px, env(safe-area-inset-right)); }
.pv.is-single .pv__nav { display: none; }
/* при зуме стрелки мешают тянуть картинку — приглушаем и уводим из-под пальца */
.pv.is-zoomed .pv__nav { opacity: .25; }
.pv.is-zoomed .pv__nav:hover { opacity: 1; }

/* ─── низ: подпись и лента ──────────────────────────────────────────── */
.pv__bottom {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; gap: 8px;
    padding: 8px calc(14px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
    pointer-events: none;
}
.pv__cap {
    max-width: 780px; margin: 0 auto; text-align: center;
    font: 400 12.5px/1.45 'Inter', sans-serif; color: rgba(255, 255, 255, .68);
}
.pv__cap[hidden] { display: none; }
.pv__cap a { color: var(--accent); }
.pv__strip {
    display: flex; gap: 8px; justify-content: center; align-items: center;
    overflow-x: auto; scrollbar-width: none; pointer-events: auto;
    padding: 2px 0;
}
.pv__strip::-webkit-scrollbar { display: none; }
.pv.is-single .pv__strip { display: none; }
.pv__thumb {
    flex: none; width: 54px; height: 38px; padding: 0; cursor: pointer;
    border: 2px solid transparent; border-radius: 7px;
    background-color: rgba(255, 255, 255, .06);
    background-size: cover; background-position: center;
    opacity: .5; transition: opacity .18s, border-color .18s;
}
.pv__thumb:hover { opacity: .85; }
.pv__thumb.is-on { opacity: 1; border-color: var(--accent); }

/* ─── мобильные размеры ─────────────────────────────────────────────── */
@media (max-width: 700px) {
    .pv__btn { width: 44px; height: 44px; }
    .pv__nav { width: 44px; height: 44px; background: rgba(255, 255, 255, .12); }
    .pv__thumb { width: 46px; height: 33px; }
    .pv__cap { font-size: 12px; }
    /* левый край оставляем системному жесту «назад» на Android */
    .pv__prev { left: max(16px, env(safe-area-inset-left)); }
}

@media (prefers-reduced-motion: reduce) {
    .pv, .pv__img, .pv__btn, .pv__nav, .pv__thumb { transition: none; }
    .pv__spin { animation: none; }
}