/* Infinite Falling Gallery Styles */

.demo-1__gallery {
    position: relative;
    width: 100%;
    height: 100vh;
    /* Full viewport height */
    overflow: hidden;
    background: #141414;
    /* Match the section background */
    cursor: grab;
}

.demo-1__gallery:active {
    cursor: grabbing;
}

/* Container for the moving images */
.gallery-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    will-change: transform;
    /* We will translate this wrapper or the images within it */
}

.demo-1__gallery__figure {
    position: absolute;
    /* left/transform handled by JS for masonry layout */
    margin: 0;
    padding: 0;
    will-change: transform;
}

.demo-1__gallery__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    /* Optional: Add some styling to images if needed, e.g., shadow */
}

/* Grain Overlay */
.grain-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    background-image: url('../images/grain.png');
    background-repeat: repeat;
    opacity: 0.08;
    /* Lower opacity to be subtle */
    /* mix-blend-mode: overlay; Removed to prevent blackening */
}

/* Ensure figures are visible */
.demo-1__gallery__figure {
    z-index: 1;
}

.gallery-wrapper {
    z-index: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .demo-1__gallery__figure {
        max-width: 90%;
    }
}