/* gallery.html — life-gallery page only. Loaded after css/shared.css. */

/* True masonry: gallery.js measures each photo's real height (from its
   aspect-ratio, itself from real pixel dimensions in gallery-data.js) and
   places every item with a shortest-column-first pack — see layoutMasonry()
   — rather than relying on CSS multi-column's height-balancing heuristic,
   which estimates before photos load and doesn't reliably re-balance once
   they have. position/width below are placeholders JS overwrites per item. */
.masonry-grid {
    position: relative;
    transition: opacity 300ms ease-out, height 300ms ease-out;
}
.masonry-item {
    position: absolute;
    top: 0;
    right: 0;
}

.gallery-thumb {
    transition: transform 400ms ease-out;
}
.gallery-thumb:hover {
    transform: translateY(-4px);
}
.gallery-thumb img {
    opacity: 0;
    min-height: 120px;
    transition: opacity 500ms ease-out;
}
.gallery-thumb img.loaded {
    opacity: 1;
}

/* Photo frame: this page's specific shadow depth. Hover lift is triggered
   by the enclosing .gallery-thumb link, not the frame itself. */
.photo-frame {
    box-shadow: 0 4px 10px rgba(27, 28, 25, 0.10);
    transition: box-shadow 400ms ease-out;
}
.gallery-thumb:hover .photo-frame {
    box-shadow: 0 8px 18px rgba(27, 28, 25, 0.15);
}
/* Photos read as quiet, archival grayscale until a visitor's cursor finds
   them — then color returns, like a memory coming back into focus.
   Pointer-only: touch visitors (who can't hover) just see full color. */
@media (hover: hover) {
    .photo-frame-inner img {
        filter: grayscale(88%) contrast(1.03);
        transition: filter 600ms ease-out, transform 700ms ease-out;
    }
    .gallery-thumb:hover .photo-frame-inner img {
        filter: grayscale(0%);
        transform: scale(1.05);
    }
}

#lightbox {
    opacity: 0;
    transition: opacity 280ms ease-out;
}
#lightbox.lightbox-open {
    opacity: 1;
}
/* Same mounted-photo mat as .photo-frame elsewhere on the site (white mat,
   square corners) — just a deeper shadow to read as floating over the
   dark backdrop. */
.lightbox-frame {
    position: relative;
    background: #ffffff;
    border-radius: 0;
    padding: 0.4rem;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
    max-width: 100%;
}
#lightbox-img {
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 300ms ease-out, transform 300ms ease-out;
}