/*
Defines CSS styles for transition effects,
including text animation for loading, and sliding transition effects for elements.

Author: Philip
*/

.transitionText {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "VT323", cursive;
    font-size: 150px;
    color: #ffffff;
    filter: drop-shadow(0 0 0.75rem #000000);
    top: 40vh;
}

@keyframes loading {
    0% { content: "Loading ."; }
    25% { content: "Loading .."; }
    50% { content: "Loading ..."; }
    75% { content: "Loading ...."; }
    100% { content: "Loading ....."; }
}

.transitionText::after {
    content: " ";
    animation: loading 1.7s infinite;
}


.transition-1 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background-color: rgb(107, 67, 45);
    opacity: 0;
    pointer-events: none;
    transition: 0.5s ease-out;
}

.transition-1.is-active {
    opacity: 1;
    pointer-events: all;
}

.transition-2 {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    bottom: 0;
    z-index: 10;
    background-color: rgb(107, 67, 45);
    transition: 0.5s ease-out;
}

.transition-2.is-active {
    left: 0;
}

.transition-3 {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    bottom: 0;
    z-index: 10;
    background-color: rgb(107, 67, 45);
    transition: 0.5s ease-out;
}

.transition-3.is-active {
    right: 0;
}