/* 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');

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

@keyframes ribbonAnimation{
    0%{
        transform: translateY(-10rem) skewY(-5deg);
    }
    100%{
        transform: translateY(-10rem) 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;

    --size1: 1150px;
    --size2: 900px;
    --size3: 768px;
    --size4: 600px;
    --size5: 375px;
    
    font-size: 16px;
}
*::-webkit-scrollbar{
    display: none;
}
*{
    -ms-overflow-style: none;
    scrollbar-width: none;
}
body{
    background-color: var(--black);
}
body.no-scroll{
    overflow: hidden;
}
.overflow-deleter{
    position: relative;
    overflow-x: clip;
}
.container{
    width: 100%;
    max-width: 1316px;
    position: relative;
    margin: auto;
    padding: 0 2rem;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6{
    width: fit-content;
    font-family: "Lemon";
    color: var(--white);
    line-height: 1.3;
}
h1, .h1{
    font-size: 7rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-align: center;
    color: transparent;
    text-transform: uppercase;
    -webkit-text-stroke: 2px var(--white);
    width: 100%;
    user-select: none;
}
h2, .h2{
    font-size: 4rem;
    font-weight: 700;
    user-select: none;
    text-transform: uppercase;
}
h3, .h3{
    font-size: 3rem;
    font-weight: 700;
}
h4, .h4{
    font-size: 2rem;
    font-weight: 500;
}
p, label{
    font-family: 'Urbanist', sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--white);
    line-height: 1.5;
}
p.label{
    font-size: 1rem;
    font-weight: 300;
}
/* ---------------------------------------------------------------------- */

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

/* MEDIA QUERIES -------------------------------------------------------- */
@media screen and (max-width: 900px) {
    h1, .h1{
        font-size: 5rem;
    }
    h2, .h2{
        font-size: 2.5rem;
    }
    h3, .h3{
        font-size: 2rem;
    }
    h4, .h4{
        font-size: 1.5rem;
    }
    p{
        font-size: 1.125rem;
    }
    p.label{
        font-size: 1rem;
    }
}

@media screen and (max-width: 600px) {
    .container{
        padding: 0 1rem;
    }
    h1, .h1{
        font-size: 3.25rem;
    }
}
/* ---------------------------------------------------------------------- */