@font-face {
    font-family: 'Domine';
    src: url('../fonts/Domine-Medium.ttf');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Justsans';
    src: url('../fonts/just-sans.otf');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Pataya';
    src: url('../fonts/Pattaya-Regular.ttf');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'MantraCinta';
    src: url('../fonts/MantraCinta.ttf');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

.loader{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: var(--color-bg-B1);
    padding: 2% 3%;
    transition: opacity 0.5s;

    --introdelay: 0.3s;
}
.loader .fs-l{
    padding: 0;
}
.loader *{
    color: var(--color-txt-B1) !important;
}
.loader-n{
    display: none;
}
.loader-pre{
    display: flex;
    height: 100%;
}
.loader-intro{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    overflow: hidden;
}
.loader-pre > div{
    flex: 1;
    display: flex;
    flex-direction: column;
}
.loader.reloaded{
    pointer-events: none;
    opacity: 0;
}
.loader.reloaded *{
    pointer-events: none;
    opacity: 0;
}
.loader-pre{
    transition: opacity 0.5s;
}
.loader.loaded.intro-done{
    pointer-events: none;
    opacity: 0;
}
.loader.loaded .loader-pre{
    opacity: 0;
}

.loader.loaded .loader-intro{
    opacity: 1;
}

.loader-intro > div{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media only screen and (max-width: 500px){
    .loader-intro > div{
        flex-direction: column;
    }
}
.loader-intro1,
.loader-intro2,
.loader-intro3{
    flex-wrap: wrap;
}
.loader-intro *{
    font-size: var(--h1TextSize);
}
.loader-intro2 *{
    font-size: calc(var(--h1TextSize) / 1.2)
}
.loader-intro1 p{
    padding: 0 10px;
    opacity: 0;
}
.loader-intro span.fc-usr1{
    font-family: 'Inter', sans-serif;
    font-size: 2em;
    line-height: 0;
}
.loader-intro1 > :nth-child(1){
    transition-delay: calc(var(--introdelay) * 1);
}
.loader-intro1 > :nth-child(2){
    transition-delay: calc(var(--introdelay) * 2);
}
.loader-intro1 > :nth-child(3){
    transition-delay: calc(var(--introdelay) * 3);
}
.loader-intro1 > :nth-child(3) span{
    opacity: 0;
    transition-delay: calc(var(--introdelay) * 4);
}
.loader.loaded .loader-intro1 p,
.loader.loaded .loader-intro1 span{
    opacity: 1;
}
.loader-intro1 p,
.loader-intro2 p,
.loader-intro3 p,
.loader-intro4 p{
    font-family: 'Inter', sans-serif;
}
.loader.loaded .loader-intro1 > :nth-child(3){
    animation: loaderintrofont1 calc(var(--introdelay) * 4) linear;
    animation-delay: calc(var(--introdelay) * 5);
}
@keyframes loaderintrofont1 {
    0%,20%{
        font-family: 'Pataya', sans-serif;
    }
    20%,40%{
        font-family: 'Justsans', sans-serif;
    }
    40%,60%{
        font-family: 'Domine', sans-serif;
    }
    60%, 80%{
        font-family: 'MantraCinta', sans-serif;
    }
    80%{
        font-family: 'Pataya', sans-serif;
    }
}

.loader.loaded .loader-intro1{
    animation: loaderintro1 calc(var(--introdelay) * 3) ease-out forwards;
    animation-delay: calc(var(--introdelay) * 7);
}
@keyframes loaderintro1 {
    0%,50%{
        filter: none;
        opacity: 1;
    }
    75%,100%{
        opacity: 0;
        filter: blur(10px);
    }
}
.loader-intro2{
    opacity: 0;
    filter: blur(10px);
    transition: all var(--introdelay);
}
.loader.loaded .loader-intro2{
    opacity: 1;
    filter: none;
    transition-delay: calc(var(--introdelay) * 8);
    animation: loaderintro2 calc(var(--introdelay) * 2) ease-out forwards;
    animation-delay: calc(var(--introdelay) * 14);
}
@keyframes loaderintro2 {
    0%{
        opacity: 1;
    }
    100%{
        filter: blur(10px);
        opacity: 0;
    }
}

.loader-intro3 p{
    padding: 0 10px;
    opacity: 0;
    transform: translateY(100%);
    transition: all var(--introdelay);
}
.loader-intro3 > :nth-child(1){
    transition-delay: calc(var(--introdelay) * 14.5);
}
.loader-intro3 > :nth-child(2){
    transition-delay: calc(var(--introdelay) * 15);
}
.loader-intro3 > :nth-child(3){
    transition-delay: calc(var(--introdelay) * 16);
}
.loader.loaded .loader-intro3 > :nth-child(3){
    animation: intro3scaleupdown calc(var(--introdelay) * 3);
    animation-delay: calc(var(--introdelay) * 17);
}
@keyframes intro3scaleupdown {
    0%{
        transform: none;
    }
    50%{
        transform: scale(1.2);
    }
    100%{
        transform: none;
    }
}
.loader.loaded .loader-intro3 > p{
    opacity: 1;
    transform: none;
}


.loader-intro4{
    opacity: 0;
    transform: translateY(-100%);
    transition: transform calc(var(--introdelay) * 5);
}
.loader.loaded .loader-intro4{
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--introdelay) * 19);
}

.loader-intro4 > img{
    transform: scale(0.2);
}
.loader.loaded .loader-intro4 > img{
    animation: intro4logo calc(var(--introdelay) * 1) forwards cubic-bezier(.67,.09,.86,.49);
    animation-delay: calc(var(--introdelay) * 24);
}
@keyframes intro4logo {
    0%{
        transform: scale(0.2);
    }
    100%{
        transform: translate(170%, 200%) scale(10);
    }
}




.no-js .loader{
    display: none;
}