/* ===========================================================================
 * 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;
}
.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; }