/* Base Styles & Utilities */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbar for a premium feel */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #faf9f6; 
}
::-webkit-scrollbar-thumb {
    background: #e0e0e0; 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #8a8a8a; 
}

/* Header transition on scroll */
#site-header.scrolled {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Shrink logo to ~50% of its original md:h-28 (112px) size = 56px (3.5rem) */
#site-header.scrolled svg {
    height: 3.5rem !important;
    margin-bottom: 0 !important;
}

#site-header.scrolled #folder-title {
    font-size: 1.25rem !important; /* text-xl */
    margin-top: 0 !important;
    text-align: right !important; /* Right aligned on mobile */
    flex: 1;
}

@media (min-width: 768px) {
    #site-header.scrolled #folder-title {
        text-align: center !important; /* Centered on desktop */
    }
}

@media (min-width: 768px) {
    #site-header.scrolled #download-all-btn {
        margin-top: 0 !important;
        font-size: 0.65rem !important;
        padding: 0.4rem 1rem !important;
    }

    #site-header.scrolled #download-controls {
        margin-top: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
}

/* Ensure child elements transition smoothly */
#site-header svg,
#site-header #folder-title {
    transition: all 0.3s ease-in-out;
}

/* Hide progress bar in compact header */
#site-header.scrolled #download-progress {
    display: none;
}

/* Hide header download controls on mobile - use footer instead */
@media (max-width: 767px) {
    #site-header #download-controls,
    #site-header #download-progress,
    #download-controls,
    #download-progress {
        display: none !important;
    }
    /* Add space at bottom so sticky footer doesn't cover photos */
    #main-content {
        padding-bottom: 80px !important;
    }
}

/* Circular progress: only visible in scrolled+downloading state */
#download-circle {
    display: none !important;
}

#site-header.scrolled.downloading #download-circle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0 !important;
}

/* Masonry Grid Layout using CSS Columns */
.masonry-grid {
    column-count: 1; /* Default to 1 column for mobile */
    column-gap: 20px;
    width: 100%;
}

@media (min-width: 640px) {
    .masonry-grid { column-count: 2; } /* 2 columns on small tablets */
}

@media (min-width: 1024px) {
    .masonry-grid { column-count: 4; } /* 4 columns on regular desktop */
}

@media (min-width: 1536px) {
    .masonry-grid { column-count: 5; } /* 5 columns on ultrawide */
}

/* Image Container */
.gallery-item {
    break-inside: avoid;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    display: block;
    cursor: zoom-in;
    background-color: #f3f4f6; /* Placeholder color while loading */
    /* Square corners requested by user */
}

/* Image Styling & Hover Effect */
.gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s ease;
    will-change: transform;
}

.gallery-item:hover img {
    transform: scale(1.03);
    /* filter: brightness(0.95); */
}

/* Overlay that appears on hover */
.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.2) 0%, transparent 40%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.gallery-item:hover::after {
    opacity: 1;
}

/* Entrance Animation for images */
@keyframes fadeUpIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gallery-item.loaded {
    animation: fadeUpIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Loading spinner custom style */
.spinner {
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* PhotoSwipe Overrides for a cleaner look */
.pswp__bg {
    background: rgba(28, 28, 28, 0.98) !important;
}
.pswp__button {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}
.pswp__button:hover {
    opacity: 1;
}