.hero-overlay {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
}

.project-card-overlay {
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.8) 100%);
}

/* Vertical Slider Animation */
@keyframes scrollDown {
    0% {
        transform: translateY(-50%);
    }

    100% {
        transform: translateY(0);
    }
}

.vertical-slider-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.vertical-slider-track {
    display: flex;
    flex-direction: column;
    /* Ensure height is enough to hold two sets of images. 
       Since we have duplicate sets, moving from -50% to 0 means we traverse exactly one full height of the set. */
    will-change: transform;
    animation: scrollDown 60s linear infinite;
}

.vertical-slider-track:hover {
    animation-play-state: paused;
}

.slider-image {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    flex-shrink: 0;
}

/* Ensure the hero overlay stays on top */
.hero-overlay {
    z-index: 10 !important;
}