/* Page Animations */
.photo-controls-wrapper {
    opacity: 0;
    animation: fadeIn 0.8s ease 0.5s forwards;
}

/* Map Styles */
#map { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 11000; background: #222; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
#map.active { opacity: 1; visibility: visible; }

/* Map Popup - Matches EXIF overlay design */
.leaflet-popup-content-wrapper {
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #fff;
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}
.leaflet-popup-tip-container { display: none; }
.leaflet-popup-content { margin: 0; width: auto !important; min-width: 220px; max-width: 320px; }
.leaflet-popup-content img {
    width: 100%;
    max-width: 100%;
    margin: 0;
    display: block;
    transition: opacity 0.2s, filter 0.2s;
    cursor: pointer;
}
.leaflet-popup-content img:hover {
    opacity: 0.85;
    filter: brightness(1.1);
}
.leaflet-popup-content a { text-decoration: none; }
.leaflet-popup-close-button { display: none; }

.map-popup-info {
    padding: 16px 18px;
    font-family: var(--font-mono);
    background: rgba(0, 0, 0, 0.3);
}
.map-popup-info .exif-primary {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--cam-text-primary);
    opacity: 0.9;
}
.map-popup-info .tech-row {
    display: flex;
    gap: 18px;
    align-items: baseline;
    margin-bottom: 6px;
}
.map-popup-info .tech-label {
    color: var(--cam-text-tertiary);
    min-width: 75px;
    font-size: 8px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.6;
}
.map-popup-info .tech-val {
    color: var(--cam-text-primary);
    font-weight: normal;
    font-size: 11px;
    letter-spacing: 0.3px;
    flex: 1;
    text-transform: uppercase;
}
.map-popup-info .tech-val a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted rgba(255,255,255,0.4);
    transition: all 0.2s;
    cursor: pointer;
}
.map-popup-info .tech-val a:hover {
    color: var(--cam-text-primary);
    border-bottom-color: var(--cam-text-primary);
    border-bottom-style: solid;
}





.leaflet-container { font-family: var(--font-mono); }
.leaflet-top.leaflet-right { top: 80px; }
.leaflet-control-zoom-in, .leaflet-control-zoom-out {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding-bottom: 2px;
}
.leaflet-control-attribution {
    font-size: 0.6rem !important;
    padding: 0 5px !important;
    opacity: 0.5;
    background: transparent !important;
    color: #aaa !important;
    border-radius: 0 !important;
}
.leaflet-control-attribution a { color: #aaa !important; text-decoration: none !important; }

/* Controls */
.photo-search-input {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
    font-family: inherit;
    transition: border-color 0.2s, background 0.2s;
}
.photo-search-input:focus { outline: none; border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); }
#clearSearchBtn:hover { color: rgba(255,255,255,0.9) !important; }

.load-more-container { text-align: center; margin: 60px 0; display: none; }

/* Search Results Count */
.search-results-count {
    padding: 15px 20px;
    text-align: center;
    color: rgba(255,255,255,0.6);
    font-size: 0.8rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin: 80px 0 20px 0;
    opacity: 0;
    animation: fadeIn 0.4s ease forwards;
}

.search-results-count strong {
    color: rgba(255,255,255,0.9);
    font-weight: normal;
}

.search-results-count small {
    display: block;
    margin-top: 6px;
    font-size: 0.7rem;
    opacity: 0.5;
    text-transform: none;
    letter-spacing: 0.05em;
}

/* Layout Overrides */
html, body, .photography-view { height: auto; min-height: 100vh; }
html.no-scroll { overflow: hidden !important; height: 100vh !important; }
body.no-scroll { overflow: hidden !important; height: 100vh !important; position: fixed; width: 100%; }

/* Masonry */
.masonry-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.4s ease;
}
.masonry-item, .masonry-item a {
    -webkit-tap-highlight-color: transparent;
}
.masonry-container .masonry-item {
    position: relative;
    overflow: visible;
    z-index: 1;
    opacity: 0; /* Set initial state for animation */
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    transform: translate(var(--tw, 0), var(--th, 0));
}
.masonry-container {
    opacity: 0;
    transition: opacity 0.4s ease;
    padding-bottom: 150px; /* Space for fixed controls at bottom */
}
.masonry-container.loaded {
    opacity: 1;
}

/* Animations for gallery items */
.masonry-container.loaded .masonry-item {
    animation: fadeIn 0.6s ease forwards;
}

/* Stagger animation delays for a smoother effect */
.masonry-container.loaded .masonry-item:nth-child(1) { animation-delay: 0.05s; }
.masonry-container.loaded .masonry-item:nth-child(2) { animation-delay: 0.1s; }
.masonry-container.loaded .masonry-item:nth-child(3) { animation-delay: 0.15s; }
.masonry-container.loaded .masonry-item:nth-child(4) { animation-delay: 0.2s; }
.masonry-container.loaded .masonry-item:nth-child(5) { animation-delay: 0.25s; }
.masonry-container.loaded .masonry-item:nth-child(6) { animation-delay: 0.3s; }
.masonry-container.loaded .masonry-item:nth-child(7) { animation-delay: 0.35s; }
.masonry-container.loaded .masonry-item:nth-child(8) { animation-delay: 0.4s; }
.masonry-container.loaded .masonry-item:nth-child(n+9) { animation-delay: 0.45s; }

/* Lightbox Overrides for Photography */
#lightbox { background: rgba(5, 5, 5, 0.98); }
#lightbox img.cover {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}
#lightbox.loading .lightbox-loader { opacity: 1; }
#lightbox.loading img { opacity: 0; }

/* Location Links */
.location-link {
    border-bottom: 1px dotted rgba(255,255,255,0.5);
    text-decoration: none;
    padding-bottom: 1px;
    transition: all 0.2s ease;
}
.location-link:hover {
    border-bottom: 1px solid #fff;
    color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,0.4);
}


/* Mobile Adjustments */
@media (max-width: 768px) {
    .search-results-count {
        margin: 70px 0 15px 0;
        padding: 12px 15px;
        font-size: 0.75rem;
    }

    .lightbox-connections {
        max-width: 100%;
        max-height: 40vh;
        left: 0;
    }
}