/* Overlay-elementti siirtymän aikana */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Läpinäkyvä tumma tausta */
    display: none; /* Näkyy vain siirtymän aikana */
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Fade-out-efekti */
.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Slide-out-efekti */
.slide-out {
    transform: translateX(-100%);
    transition: transform 2.5s ease-in-out;
}

/* Lähteminen */
.scale-out {
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

/* Saapuminen */
.scale-in {
    transform: scale(1);
    opacity: 1;
    transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out;
}

/* Piilota alkuun */
.hidden {
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
}




/* Lottie-animaatiolle tila */
.lottie-animation {
    width: 100px;
    height: 100px;
}

/* Uniikki overlay-tyyli sivukohtaisesti */
.sivu1 #loading-overlay {
    background-color: rgba(0, 50, 100, 0.7); /* Esimerkki: sininen tausta */
}

.sivu2 #loading-overlay {
    background-color: rgba(100, 0, 50, 0.7); /* Esimerkki: punertava tausta */
}