/* Standaard de container onzichtbaar maken */
.hidden {
    display: none;
}

/* De volledige scherm overlay */
#modalContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000; /* Zorg dat het boven alles ligt */
}

/* De semi-transparante donkere achtergrond */
#modalOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Donkere, transparante kleur */
}

/* De pop-up content is nu de fullscreen foto */
#modalContent {
    position: absolute; /* Ligt over de overlay heen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* Gebruiken flexbox om de afbeelding te centreren */
    justify-content: center;
    align-items: center;
    z-index: 1001; /* Ligt boven de overlay */
    overflow: hidden; /* Zorg dat eventuele overflow van de afbeelding niet zichtbaar is */
}

/* De afbeelding zelf: fullscreen en vervagend */
#fullscreenFoto {
    width: 100vw; /* 100% van de viewport breedte */
    height: 100vh; /* 100% van de viewport hoogte */
    object-fit: cover; /* Zorgt ervoor dat de afbeelding het hele scherm vult, en cropt indien nodig */
    opacity: 1; /* Standaard volledig zichtbaar */
    transition: opacity 2.5s ease-out; /* Smooth transitie voor het vervagen over 2.5 seconden */
    
    /* Optioneel: Zorg dat de afbeelding niet reageert op muis events, zodat de overlay eronder wel klikbaar kan zijn indien nodig */
    pointer-events: none; 
}

/* CSS-klasse voor wanneer de foto moet vervagen */
.fade-out {
    opacity: 0 !important; /* Forceer de opacity naar 0 */
}