/* IMPORTS -------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap'); */

@font-face{
    font-family: "Lemon";
    src: url(../fonts/LemonMilk/LEMONMILK-Regular.otf);
}
@font-face{
    font-family: "Lemon-bold";
    src: url(../fonts/LemonMilk/LEMONMILK-Bold.otf);
}
@font-face{
    font-family: "Lemon-medium";
    src: url(../fonts/LemonMilk/LEMONMILK-Medium.otf);
}

/* @font-face{
    font-family: "Chakra";
    src: url(../fonts/ChakraPetch/ChakraPetch-Regular.ttf);
}
@font-face{
    font-family: "Chakra-bold";
    src: url(../fonts/ChakraPetch/ChakraPetch-Bold.ttf);
}
@font-face{
    font-family: "Chakra-medium";
    src: url(../fonts/ChakraPetch/ChakraPetch-Medium.ttf);
} */

@keyframes ribbonAnimation{
    0%{
        transform: translateY(-50%) skewY(-5deg);
    }
    100%{
        transform: translateY(-50%) skewY(5deg);
    }
}
@keyframes figmaCover{
    0%{
        object-position: 50% 0%;
    }
    10%{
        object-position: 50% 0%;
    }
    55%{
        object-position: 50% 100%;
    }
    60%{
        object-position: 50% 100%;
    }
    100%{
        object-position: 50% 0%;
    }
}
@keyframes timelineScroll{
    20%{
        transform: translate(-50%, 100%);
    }
    25%{
        transform: translate(-50%, 135%);
    }
    30%{
        transform: translate(-50%, 100%);
    }
    35%{
        transform: translate(-50%, 135%);
    }
    40%{
        transform: translate(-50%, 100%);
    }
}
/* ---------------------------------------------------------------------- */

/* GLOBAL RULES --------------------------------------------------------- */
:root{
    --black-dark-1: #000000;
    --black: #101010;
    --white: #FFFCF5;
    /* --white-dark-1: #FFF7E5;
    --white-dark-2: #FFEDC2;
    --red-light-1: #EB1919; */
    --red-base: #C01111;
    --red-dark-1: #910D0D;
    --shadow-black: #1010101A;
}
*::-webkit-scrollbar{
    display: none;
}
*{
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.overflow-deleter{
    position: relative;
    overflow-x: clip;
}
body{
    /* background-color: var(--white); */
    background-color: var(--black);
    /* background-color: #DDDDDD; */
}
body.no-scroll{
    overflow: hidden;
}
.container{
    width: 100%;
    max-width: 1440px;
    position: relative;
    margin: auto;
}
h2{
    width: fit-content;
    /* font-family: "Chakra-medium"; */
    font-family: "Lemon-medium";
    font-size: 60px;
    font-weight: 700;
    line-height: 1;
    color: var(--white);
    user-select: none;
    text-transform: uppercase;
}
h3{
    width: fit-content;
    /* font-family: "Chakra-medium"; */
    font-family: "Lemon-medium";
    font-size: 50px;
    font-weight: 700;
    line-height: 1;
    color: var(--white);
}
h4{
    width: fit-content;
    /* font-family: "Chakra"; */
    font-family: "Lemon";
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    color: var(--white);
}
p{
    font-family: 'Urbanist', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: var(--white);
    line-height: 1.5;
}
p.label{
    font-size: 16px;
    font-weight: 400;
}
/* ---------------------------------------------------------------------- */

/* TRANSITION ----------------------------------------------------------- */
.transition-container{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 13;
    pointer-events: none;
}
.transition-container .ribbon-transition-horizontal{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: calc(100% / 3);
    background-color: var(--red-dark-1);
    transform-origin: right;
}
.transition-container .ho-2{
    top: calc(100% / 3);
}
.transition-container .ho-3{
    top: calc(100% / 3 * 2);
}
.transition-container .ribbon-transition-vertical{
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc(100% / 3);
    height: 100%;
    background-color: var(--red-dark-1);
    transform-origin: bottom;
    will-change: transform;
}
.transition-container .ve-2{
    left: calc(100% / 3);
}
.transition-container .ve-3{
    left: calc(100% / 3 * 2);
}
/* ---------------------------------------------------------------------- */

/* <1440px (+100px car 50px de padding) --------------------------------- */
@media screen and (max-width: 1540px){
    .container{
        max-width: unset;
        padding-left: 50px;
        padding-right: 50px;
    }
}
/* ---------------------------------------------------------------------- */