/* --- Gallery Header --- */
.gallery-header {
    padding: 160px 5% 60px;
    text-align: center;
}
.gallery-header h1 {
    font-size: 5rem;
    font-family: var(--font-heading);
    margin-bottom: 20px;
    color: var(--text-heading);
    transition: color 0.4s ease;
}
.header-desc {
    color: var(--text-muted);
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
    transition: color 0.4s ease;
}

/* --- Infinite Moving Gallery --- */
.infinite-gallery {
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between rows */
}

.gallery-row {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

/* The continuous moving tracks */
.track-left {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: scrollLeft 40s linear infinite;
}
.track-right {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: scrollRight 45s linear infinite;
}
.track-left.slow {
    animation-duration: 55s; /* Different speed for parallax feel */
}

/* Pause animation when user hovers over the row */
.gallery-row:hover .track-left,
.gallery-row:hover .track-right {
    animation-play-state: paused;
}

/* Media Items (Images & Videos) */
.media-item {
    height: 350px;
    width: 500px; /* Default width */
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: filter 0.3s ease;
}

/* Masonry varying widths */
.media-item.wide { width: 700px; }
.media-item.portrait { width: 300px; }

/* Dim un-hovered images slightly when track is hovered */
.gallery-row:hover .media-item { filter: brightness(0.4); }
.gallery-row .media-item:hover { filter: brightness(1); }

/* Make images and videos fill the container */
.media-item img, 
.media-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* Prevents video controls from interfering */
    transition: transform 0.5s ease;
}

/* Slight zoom effect on hover */
.media-item:hover img,
.media-item:hover video {
    transform: scale(1.05);
}

/* Keyframes for the infinite scroll */
@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
    /* -50% works perfectly because we duplicated the media groups inside the track */
}

@keyframes scrollRight {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* Header Animations */
.animate-fade-up { opacity: 0; transform: translateY(30px); transition: all 1s ease; }
.in-view { opacity: 1; transform: translate(0, 0); }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }

/* =========================================
   RESPONSIVE (Gallery Specific)
   ========================================= */
@media (max-width: 768px) {
    .gallery-header {
        padding: 130px 5% 40px;
    }
    .gallery-header h1 {
        font-size: 3rem;
    }
    .header-desc {
        font-size: 1rem;
    }
    
    /* Shrink the marquee items so they look good on mobile */
    .media-item { height: 250px; width: 350px; }
    .media-item.wide { width: 450px; }
    .media-item.portrait { width: 200px; }
}