welcome.css

:root{
    --welcomeSectionBg: rgb(221, 213, 213);
}

#welcomeSection {
    width: 100vw;
    height: 100vh;
    background: var(--welcomeSectionBg);
    /* background: black; */
    /* display: none; */

    position: absolute;
    top: 0;

    overflow: hidden;
   

    /* opacity: 0; */
}

#welcomeSection.loaded{
    animation: backgroundBlack 1s 6s steps(4) forwards, rotateAndDisapear 2.5s 11.3s ease-in forwards;
}

@keyframes backgroundBlack {
    to{
        background:black ;
    }
    
}

@keyframes rotateAndDisapear{
    99%{
        transform: rotate(90deg) scale(51);
    }
    100%{
        opacity: 0;
    }
}


#welcomeSection.loaded .maskedContainer {
    -webkit-mask-image: url(images/welcomeSectionImages/welcome1.svg);
    mask-image: url(images/welcomeSectionImages/welcome1.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 40%;
    height: 15%;

    animation: markGlitch 1s 7s 1 linear forwards;
}

@keyframes markGlitch {
    10% {
        -webkit-mask-image: url(images/welcomeSectionImages/welcomeGlitch.svg);
        mask-image: url(images/welcomeSectionImages/welcomeGlitch.svg);
    }

    20% {
        -webkit-mask-image: url(images/welcomeSectionImages/welcome1.svg);
        mask-image: url(images/welcomeSectionImages/welcome1.svg);
    }

    35% {
        -webkit-mask-image: url(images/welcomeSectionImages/welcomeGlitch.svg);
        mask-image: url(images/welcomeSectionImages/welcomeGlitch.svg);
    }

    42% {
        -webkit-mask-image: url(images/welcomeSectionImages/welcome1.svg);
        mask-image: url(images/welcomeSectionImages/welcome1.svg);
    }

    95% {
        -webkit-mask-image: url(images/welcomeSectionImages/welcomeGlitch.svg);
        mask-image: url(images/welcomeSectionImages/welcomeGlitch.svg);
    }
    100%{
        -webkit-mask-image: url(images/welcomeSectionImages/MdANTOR.svg);
        mask-image: url(images/welcomeSectionImages/MdANTOR.svg);
    }


}

/* background of the masking figulre */
#leftToRightFirst,
#leftToRightSecond {
    height: 29%;
    width: 0;
}


.rtl {
    width: 100%;
    height: 25%;
}


#welcomeSection.loaded .rtl>div {
    height: 100%;
    background-color: rgb(20, 207, 201);
    background-size: contain;
    float: right;
            /* in second animation, delay time is being reduced from actual time  */
    animation: fullWidth 2s 1 linear forwards, colorAnimation 10s 2.8s 1 linear forwards;
}

#welcomeSection.loaded #leftToRightFirst {
    background-color: azure;
    animation: fullWidth 2s 1 linear forwards, colorAnimation 10s 2s 1 linear forwards;
}

#welcomeSection.loaded #leftToRightSecond {
    background-color: black;

    animation: fullWidth 2s 1 linear forwards, colorAnimation 10s 2.5s 1 linear forwards;
}


@keyframes fullWidth{
    30% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

@keyframes colorAnimation{
    5% {
        background-color: rgb(52, 200, 139);
    }

    10% {
        background-color: rgb(103, 74, 74);
    }

    15% {
        background-color: rgb(122, 196, 32);
    }

    20% {
        background-color: rgb(223, 41, 41);
    }

    25% {
        background-color: rgb(56, 56, 175);
    }

    30% {
        background-color: rgb(255, 255, 255);
    }

    35% {
        background-color: rgb(21, 187, 148);
    }

    40% {
        background-color: rgb(149, 102, 223);
    }

    45% {
        background-color: rgb(223, 233, 39);
    }

    50% {
        background-color: rgb(85, 122, 13);
    }

    55% {
        background-color: rgb(74, 74, 139);
    }

    60% {
        background-color:rgb(0, 0, 0);
    }

    65% {
        background-color:rgb(255, 255, 255), ;
    }

    70% {
        background-color: rgb(255, 179, 0);
    }

    75% {
        background-color: rgb(155, 217, 130);
    }

    80% {
        background-color: rgb(255, 119, 0);
    }

    85% {
        background-color: rgb(78, 190, 138);
    }

    90% {
        background-color: rgb(158, 48, 99);
    }

    95% {
        background-color: rgb(255, 255, 255);
    }
    
    100% {
        background-image: url(images/welcomeBackground/Group12.svg);
    }
}


#codedImg {
    width: 6%;
    position: absolute;
    top: 70%;
    left: 47%;
    /* filter: invert(100%); */
}

#codedImg:hover{
    box-shadow:  0 0 20px 5px #0000004a;
    transform: scale(105%);
}

#codedImgAlert{
    position: absolute;
    top: 65%;
    margin: auto;
    text-align: center;
    width: 100%;
    font-size: 1vw;

    opacity: 0;
}



#context, #contextSecond{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    position: absolute;

    height: 100%;

    left: 3%;
    top: 50%;
    transform: translateY(-50%);
    color: var(--welcomeSectionBg);

}

#welcomeSection.loaded #context > :first-child{
    animation:inVisible steps(1) 10s forwards;
}
#welcomeSection.loaded #context > :nth-child(2){
    animation:inVisible steps(1) 10.5s forwards;

}
#welcomeSection.loaded #context > :nth-child(3){
    animation:inVisible steps(1) 11s forwards;
}

@keyframes inVisible {
    to{
        opacity: 0;
    }    
}


#contextSecond{
    color: black;
}

#welcomeSection.loaded #contextSecond > :first-child{
    opacity: 0;
    animation: visible 4.5s 2s step-start;
}
#welcomeSection.loaded #contextSecond > :nth-child(2){
    opacity: 0;
    animation: visible 4s 2.5s step-start;
}
#welcomeSection.loaded #contextSecond > :nth-child(3){
    opacity: 0;
    animation: visible 3.5s 3s step-start;
}

@keyframes visible {
    to{
        opacity: 1;
    }    
}



/* coading for loading page  */
/* coading for loading page  */
/* coading for loading page  */
#loader {
    background-color: black;
    position: absolute;
    top: 0;
    height: 100vh;
    left: 0;
    right: 0;
    z-index: 1;

    pointer-events: none;
}

@keyframes offScreenLoad {
    to {
        transform: translateY(-100vh);
    }
}


#loadFigure {
    position: absolute;
    top: 0;
    bottom: 8%;
    left: 0;
    right: 0;
    margin: auto;

    width: 80vw;
    border-bottom: 1vh solid #d1a432;
    border-radius: 50%;

}

@keyframes smile {
    to {
        border-bottom: 15vh solid #d1a432;
    }
}

#loadEyes {
    position: absolute;
    top: 5%;

    left: 0;
    right: 0;
    margin: auto;

    width: 60%;

    display: flex;
    justify-content: space-between;
}

#loadEyes>div {
    box-sizing: border-box;
    border-top: 3vh solid black;
    position: relative;

    width: 25vh;
    height: 25vh;
    border-radius: 45%;
    background-color: antiquewhite;

    display: flex;
    justify-content: center;
    align-items: center;
}

#loadEyes>div>div {
    width: 7vh;
    height: 7vh;
    border-radius: 50%;

    background: black;


    animation: 1s eyeRoll ease-in-out infinite;
}

@keyframes eyeRoll {
    25% {
        transform: translateX(-50%);
    }

    75% {
        transform: translateX(50%);
    }
}

#loadingText {
    color: wheat;

    position: absolute;
    font-size: 3vh;
    /* background-color: red; */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#loadingText p {
    /* background-color: red; */
    overflow: hidden;
    animation: loadingText 1s steps(2) infinite;
}

@keyframes loadingText {
    to {
        opacity: 0;
    }

}

#loadingProgress{
    background-color: gainsboro;
    width: 200%;
    height: 2vh;
    border-radius: 1vh;
    overflow: hidden;

    transform: translateX(-25%);
}

#loadingProgress >div{
    width: 0%;
    height: 100%;
    background-color: #d1a432;

    animation: loaderProgress 8s ease-out forwards;
}

@keyframes loaderProgress {
    to{
        width: 97%;
    }
}

#loadingText button {
    font-size: 3vh;
    border: none;
    background-color: aqua;
    border-radius: 30%;
    box-shadow: 0 5px 30px 10px aqua;

    display: none;
}

#loadingText button:hover {
    font-size: 5vh;
}