#photo-container {
    position: relative;
    width: 100%;
    height: 500px;      /* Give it a fixed height so sections below stay below */
    max-height: 80vh;   /* Optional: keeps it from taking over completely on huge screens */
    overflow: hidden;   /* Crucial: keeps moving images inside this box only */
}

.floating-photo {
    position: absolute;
    right: -500px; 
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    pointer-events: none; 
    filter: grayscale(100%);
    transition: filter 0.4s ease;
    animation: scrollAndDissolve linear forwards;
}

.floating-photo:hover {
    filter: grayscale(0%);
    cursor: pointer;
}

@keyframes scrollAndDissolve {
    0% {
        /* Start off-screen right, tiny (pop-in effect), and transparent */
        transform: translateX(0) scale(0.3);
        opacity: 0;
    }
    10% {
        /* Quickly scale up to full size and full opacity */
        transform: translateX(-10vw) scale(1);
        opacity: 1;
    }
    80% {
        /* Hold full opacity for most of the journey */
        opacity: 1;
    }
    100% {
        /* Dissolve (fade out) as it reaches the left side */
        transform: translateX(-130vw) scale(0.9);
        opacity: 0;
    }
}