/* ---------------------------------------------------- */
/* PRELOADER */
/* ---------------------------------------------------- */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.preloader-hidden {
    opacity: 0;
    visibility: hidden;
}

/* ---------------------------------------------------- */
/* LOGO ANIMADO */
/* ---------------------------------------------------- */

.logo-animado {
    width: clamp(12rem, 20vw, 28rem);
    height: auto;
    animation: zoomInOut 3.5s ease-in-out forwards;
}

/* ---------------------------------------------------- */
/* KEYFRAMES */
/* ---------------------------------------------------- */

@keyframes zoomInOut {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    25% {
        transform: scale(1.2);
        opacity: 1;
    }
    75% {
        transform: scale(1.0);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}