@import url('https://fonts.googleapis.com/css2?family=Corinthia:wght@400;700&display=swap');

:root{
    --ScriptText:"Corinthia", cursive;
}


.backgroundMask{
    position: fixed;
    top: 0;
    left: 0;
    background:linear-gradient(45deg, #d3c2e0, #e6defc, #b080ee);
    z-index: 999;
    padding:0 2rem 1rem 2rem;
    display: flex;
    flex-direction: column;
    pointer-events: all;
    opacity: 1;
    width: 100%;
    height: 100%;
    min-height: 100svh;
    row-gap: .5rem;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    mask-image: url(/images/lotusintro.svg);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 50px;
    animation: lock-reveal 2700ms forwards ease-in-out;
    
}

.backgroundMask::before{
    z-index: 2;
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background: url(/images/resources/bgMountains.png) no-repeat;
    background-size: cover;
    background-position: 50% 85%;
    opacity: 50%;
}

.backgroundMask.hide{
    opacity: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    top: 100%;
}

@keyframes lock-reveal{
    0%{
        mask-size: 50px;
    }

    100%{
        mask-size: 1000vh;
    }
}

/* .backgroundMask .bgIntroMountain{
    position: absolute;
    inset: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 45%;
} */

.blackBG{
    position: fixed;
    inset: 0;
    background: #000000;
    z-index: 300;
    visibility: visible;
    opacity: 1;
}

.blackBG.hide{
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    bottom: -100%;
}


.backgroundMask .headTop{
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    width: 100%;
    border-radius:0 0 1rem 1rem;
    background: #f5f5f5;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 5;
}


.backgroundMask .headTop .introLogoCortain{
    width: calc(100% - 55%);
    border-radius:0 0 1rem 1rem;
    /* border: 1px solid #fff; */
    /* box-shadow: 0 5px 15px rgba(0,0,0, .120); */
}




.backgroundMask .headTop h1{
    font-family: var(--ScriptText);
    font-size: clamp(2rem, 3vw, 3.5rem);
    text-align: center;
    width: 100%;
    background: rgba(176, 128, 238, 0.2);
    backdrop-filter: blur(5px);
    border: 1px solid #dbc2fc;
    color: #000;
    text-shadow: 0 1px 2px #fff;
    padding: 1rem;
    box-shadow: 0 5px 15px rgba(0,0,0, .080);
    line-height: 2rem;
}

.backgroundMask .groupTextIntro{
    z-index: 5;
    background: rgba(255, 255, 255, 0.5);
    padding: .5rem;
    border-radius: 1rem;
    box-shadow: 0 5px 12px rgba(0,0,0, .120);
    backdrop-filter: blur(5px);
}
.backgroundMask .groupTextIntro p{
    font-size: clamp(.8rem, 2vw, 1rem);
    color: #444;
}



.backgroundMask .introSocial{
    display: flex;
    align-items: center;
    justify-content: end;
    gap: .3rem;
    z-index: 5;
    margin-bottom: auto;
}
.backgroundMask .introSocial .item{
    border-radius: 50%;
}
.backgroundMask .introSocial .item a{
    height: 2.5rem;
    width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.5rem;
    background: #444;
    color: #fff;
}
.backgroundMask .introSocial .item a:hover{
    background: #000;
}

.backgroundMask .getIn{
    width: max-content;
    margin-left: 50%;
    transform: translateX(-50%);
    padding: .2rem 3rem;
    border: none;
    border-radius: 5rem;
    cursor: pointer;
    font-size: clamp(1rem, 3vw, 1.2rem);
    color: #eeee;
    font-weight: 500;
    background:#9a10a7;
    border: 1px solid #fff;
    z-index: 5;
}
.backgroundMask .getIn:hover{
    background:#850991;
    color: #fff;
}



@media(max-width:700px){
    .backgroundMask .headTop{
        row-gap: 0;
    }
    .backgroundMask .headTop .introLogoCortain{
        width:100%;
        border-radius: unset;
    }
    .backgroundMask .introSocial{
        justify-content: center;
    }

}