/* Livesound transition */
.livesound-transition {
    position: fixed;
    top: 100%; /* Start from the bottom */
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #C0D3A8; /* Replace with the background color of livesound.html */
    transition: top 0.5s ease-in-out;
    z-index: 9999;
}

/* Studiowork transition */
.studiowork-transition {
    position: fixed;
    top: 100%; /* Start from the bottom */
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #D3A8A8; /* Replace with the background color of studiowork.html */
    transition: top 0.5s ease-in-out;

    z-index: 9999;
}

/* Postproduction transition */
.postproduction-transition {
    position: fixed;
    top: 100%; /* Start from the bottom */
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #C7F0FF; /* Replace with the background color of postproduction.html */
    transition: top 0.5s ease-in-out;

    z-index: 9999;
}

/* Final state: move the element into view */
.livesound-transition.active,
.studiowork-transition.active,
.postproduction-transition.active {
    top: 0;
}