/* BIN-BOI — photography gallery + lightbox (studio wing). */

/* ----- GRID CARDS (placeholders until real shots drop in) ----- */
.photo-card {
    position: relative; aspect-ratio: 4 / 3;
    border-radius: 1rem; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, rgba(240, 120, 38, 0.08), rgba(255, 255, 255, 0.02));
    cursor: pointer;
    transition: all 0.3s ease;
}
.photo-card:hover {
    border-color: rgba(240, 120, 38, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -10px rgba(240, 120, 38, 0.35);
}
.photo-card .photo-frame {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 0.5rem;
    padding: 1rem; text-align: center;
}
.photo-card .photo-tag {
    font-family: 'Fira Code', monospace;
    font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(240, 120, 38, 0.7);
    background: rgba(240, 120, 38, 0.08);
    padding: 3px 8px; border-radius: 999px;
}
.photo-card .photo-cap {
    font-size: 11px; color: rgba(245, 245, 245, 0.6);
    font-family: 'Fira Code', monospace;
}
.photo-card::after {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(245, 245, 245, 0.04) 1px, transparent 0);
    background-size: 8px 8px; pointer-events: none;
}

/* ----- LIGHTBOX ----- */
#lightbox {
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
}
#lightbox.lb-open { opacity: 1; pointer-events: auto; }
#lightbox.lb-open #lb-figure { transform: scale(1) translateY(0); }
#lb-figure {
    transform: scale(0.96) translateY(12px);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
#lb-media img {
    max-width: 100%; max-height: 65vh;
    object-fit: contain;
    border-radius: 0.75rem;
}
#lb-media .lb-placeholder {
    width: 100%; max-height: 65vh; aspect-ratio: 4 / 3;
    display: flex; flex-direction: column; gap: 0.6rem;
    justify-content: center; align-items: center; text-align: center;
}
@media (prefers-reduced-motion: reduce) {
    #lightbox, #lb-figure { transition: none; }
    .photo-card { transition: none; }
}