/* ===========================================================================
 * photo-viewer.css
 *
 * Apple-Photos-style fullscreen image viewer with smooth wheel-driven zoom
 * between single-photo mode and a grid of the camera's library. The clicked
 * photo is the anchor — when zooming out, the grid expands around it; when
 * zooming back in, the grid contracts smoothly back to the same photo.
 * =========================================================================== */

#photo-viewer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #0a0e16;            /* fully opaque — no blur */
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}
#photo-viewer.open { display: block; }

/* Stage = full viewport that the grid is anchored inside. */
.pv-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* The grid container is positioned at the stage's top-left.
   transform-origin is (0, 0) so scaling preserves the absolute coordinate system
   we use to place cells. JS sets translate(tx, ty) on every frame so the anchor
   cell's centre lands at viewport centre — this is what makes wheel-zoom and
   anchor-changes animate smoothly toward the same point. */
.pv-grid {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}
.pv-grid.no-transition { transition: none !important; }

/* Each cell is positioned absolutely relative to the grid center (0,0).
   JS sets its left/top to (col * (size+gap) - anchorOffsetX, row * (size+gap) - anchorOffsetY)
   so the anchor cell ends up at (0, 0) — which is the viewport center. */
.pv-cell {
    position: absolute;
    width: var(--pv-cell, 160px);
    height: calc(var(--pv-cell, 160px) * 0.625);    /* 16:10 */
    background: #1f2937;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    border: 2px solid transparent;
    transition: border-color 0.12s, box-shadow 0.12s;
    /* Skip layout/paint/animation for off-screen cells so the ~800-cell grid
       only renders what's near the viewport. Kills the shimmer-repaint storm
       and box-shadow raster cost that made wheel-zoom janky. contain-intrinsic-size
       reserves each cell's space so skipped cells keep exact positions. */
    content-visibility: auto;
    contain-intrinsic-size: var(--pv-cell, 160px) calc(var(--pv-cell, 160px) * 0.625);
}
.pv-cell.anchor {
    border-color: rgba(255,255,255,0.85);
    box-shadow: 0 8px 28px rgba(0,0,0,0.6);
    z-index: 2;
}
.pv-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.pv-cell .pv-skel {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 1.4rem;
    background: linear-gradient(90deg, #1f2937 25%, #2a3441 50%, #1f2937 75%);
    background-size: 200% 100%;
    animation: pv-shimmer 1.4s infinite;
}
@keyframes pv-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Chrome (always on top of stage) ─────────────────────────────────── */
.pv-close,
.pv-nav {
    position: absolute;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    backdrop-filter: blur(6px);
    transition: background 0.15s, opacity 0.2s;
    font-size: 1.5rem;
    line-height: 1;
}
.pv-close:hover, .pv-nav:hover {
    background: rgba(255,255,255,0.22);
}

.pv-close {
    top: 20px;
    right: 24px;
    width: 42px;
    height: 42px;
    font-size: 1.05rem;
    font-weight: 700;
    gap: 6px;
    padding: 0 14px;
    width: auto;
    border-radius: 12px;
}

.pv-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    font-size: 1.8rem;
}
.pv-nav.pv-prev { left: 24px; }
.pv-nav.pv-next { right: 24px; }

/* Hide arrows when we're in grid mode — they only make sense in single view */
#photo-viewer.grid-mode .pv-nav {
    opacity: 0;
    pointer-events: none;
}

.pv-counter {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    color: #cbd5e1;
    font-size: 0.85rem;
    font-weight: 600;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 6px 14px;
    border-radius: 999px;
    z-index: 10;
    backdrop-filter: blur(6px);
    letter-spacing: 0.02em;
    pointer-events: none;
}
.pv-counter .pv-date {
    color: #fff;
    margin-right: 6px;
}

/* Hint shown briefly when the viewer first opens */
.pv-hint {
    position: absolute;
    bottom: 64px;
    left: 50%;
    transform: translateX(-50%);
    color: #94a3b8;
    font-size: 0.78rem;
    background: rgba(0,0,0,0.5);
    padding: 5px 12px;
    border-radius: 999px;
    z-index: 10;
    opacity: 1;
    transition: opacity 0.5s;
    pointer-events: none;
}
.pv-hint.fade { opacity: 0; }