/* ======================================= */
/* animated logo on top of the hero images */
/* ======================================= */

#carousel #text-over-carousel-wrapper {
    position: absolute;
    height: 50%;
    animation:
        logo-opacity var(--fade-in-out-duration) ease 0s forwards,
        logo-movement var(--carousel-animation-speed) ease 0s infinite;
}

@keyframes logo-opacity {
    0% {
        opacity: 0;
        margin-top: 50vw;
    }

    100% {
        opacity: 100;
        margin-top: 0vw;
    }
}

@keyframes logo-movement {
    0% {
        width: 100%;
        top: 10vw;
        left: 27vw;
        rotate: 0deg;
    }

    21% {
        width: 100%;
        top: 10vw;
        left: 27vw;
        rotate: 0deg;
    }

    25% {
        width: 50%;
        top: 3vw;
        left: 55vw;
        rotate: 0deg;
    }

    46% {
        width: 50%;
        top: 3vw;
        left: 55vw;
        rotate: 0deg;
    }

    50% {
        width: 55%;
        top: 33vw;
        left: 51vw;
        rotate: 90deg;
    }

    71% {
        width: 55%;
        top: 33vw;
        left: 51vw;
        rotate: 90deg;
    }

    75% {
        width: 76%;
        top: 3vw;
        left: 3vw;
        rotate: 0deg;
    }

    96% {
        width: 76%;
        top: 3vw;
        left: 3vw;
        rotate: 0deg;
    }

    100% {
        width: 100%;
        top: 10vw;
        left: 27vw;
        rotate: 0deg;
    }
}

/* ===================================== */
/* small 'welcome to' svg with animation */
/* ===================================== */
#carousel #welcometo {
    position: absolute;
    left: 13%;
    width: 20%;
    animation:
        welcometo-movement var(--fade-in-out-duration) ease 0s forwards,
        welcometo-opacity var(--carousel-animation-speed) ease-out 0s infinite;
}

@keyframes welcometo-movement {
    0% {
        top: 10vw;
        left: -18vw;
        rotate: 0;
    }

    100% {
        top: -2vw;
        left: -18vw;
        rotate: 0;
    }
}

@keyframes welcometo-opacity {
    0% {
        opacity: 0;
    }

    1% {
        opacity: 0;
    }

    12% {
        opacity: 100;
    }

    21% {
        opacity: 100;
    }

    23% {
        opacity: 0;
    }

    46% {}

    50% {}

    71% {}

    75% {}

    96% {
        opacity: 0;
    }

    100% {
        opacity: 100;
    }
}

/* actual logo (animated by the wrapper) */
#carousel #logo {
    position: absolute;
    width: 70%;
    right: 30%;
    top: 0%;
}