/* ------- NAV --------*/

body.no-scroll {
    overflow: hidden;
}
/* LINES HANDLER */
.nav-soon,
.nav,
.lines-container {
    pointer-events: none;
}
.menu,
.twitter,
.logo,
.discord,
.skull,
.nav-cta {
    pointer-events: all;
}

.cream-y-l-line-1,
.cream-y-l-line-2,
.cream-y-r-line-1,
.cream-y-r-line-2 {
    top: 50%;
    transform: translateY(-50%);
    height: calc(100% - 13px);
}
.cream-x-t-line-1,
.cream-x-b-line-1 {
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 9px);
}
.cream-x-t-line-2,
.cream-x-b-line-2 {
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 18px);
}

@media screen and (max-width: 479px) {
    .cream-x-t-line-1, .cream-x-b-line-1 {
        left: 0;
        transform: inherit;
        width: 100%;
    }
    .cream-y-l-line-1, .cream-y-r-line-1 {
        top: 5px;
        transform: inherit;
        height: calc(100% - 5px);
    }
}
/* MENU HANDLER */
.menu .menu-line.middle{
     transition: opacity 350ms ease-in-out;
}
.menu .menu-line.first,
.menu .menu-line.last {
    left: 50%;
    transform: translate(-50%, 0) rotate(0deg);
    transition: all 350ms ease-in-out;
}
.menu.open .menu-line.first,
.menu.open .menu-line.last {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
.menu.open .menu-line.last {
    transform: translate(-50%, -50%) rotate(-45deg);
}
.menu.open .menu-line.middle{
     opacity: 0;
}

.nav.scrolled .logo {
    max-width: 244px;
}

.nav.open {
    pointer-events: all;
}
.nav.open .menu-container {
    opacity: 1;
}

.menu-item .menu-overlay,
.menu-item .menu-img {
    transform: scale(1);
    transition: all 400ms ease-in-out;
}

.menu-item:hover .menu-overlay,
.menu-item.swiper-slide-active .menu-overlay {
    opacity: 0;
}
.menu-item:hover .menu-img,
.menu-item.swiper-slide-active .menu-img {
    transform: scale(1.1);
}


.nav-soon{
    display:flex;
}

/* ------- CTA --------*/
.cta:before {
    content: '';
    background-color: #121413;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #e95359;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
}
.cta:after {
    content: '';
    background-color: #e95359;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 0;
    transform-origin: 0 100%;
    transition: all 3000ms ease-in-out;
}
.cta:hover:after {
    height: 100%;
}

.nav-cta {
    width: max-content;
}

/* SECTION GRADIENT*/
section{
    position: relative;
}
section::before {
    content: '';
    position: absolute;
    left: 0%;
    top: 0%;
    right: auto;
    bottom: auto;
    z-index: 1;
    width: 100%;
    height: 18vh;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(transparent));
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 1), transparent);
    pointer-events: none;
}

section::after {
    content: '';
    position: absolute;
    left: 0%;
    bottom: 0px;
    z-index: 1;
    width: 100%;
    height: 18.302vw;
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.75)), to(transparent));
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.75), transparent);
    pointer-events: none
}

/* TITLES */

.main-title:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 100px;
    height: 2px;
    background: #E95359;
    transform: translateX(-50%);
}

.main-title:after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 90px;
    height: 2px;
    background: #E95359;
    transform: translateX(-50%);
}

/* ROADMAP */

.roadmap-item.reverse .roadmap-item-container .roadmap-checkpoint {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: auto; 
    transform: translate(-50%, -50%) rotate(45deg);
}

.roadmap-item .roadmap-item-container .r-item-title ,
.roadmap-item .roadmap-item-container .r-item-description  {
    filter: blur(5px);
}
.roadmap-item.unblurred .roadmap-item-container .r-item-title ,
.roadmap-item.unblurred .roadmap-item-container .r-item-description  {
    filter: inherit;
}

.line1 {
  stroke: #FFC076;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 1, 20;
  stroke-dashoffset: 1;
}
.roadmap-item .line {
  overflow: hidden;
}
.roadmap-item.reverse .line {
    left: calc(60% - 5px);
    top: -20px;
    bottom: inherit;
}

/* FAQ */

.faq.open .faq-text-container {
    max-height: 1000px;
}


/* extra */ 

.scroll-text{
    animation: glow 1.5s alternate infinite;
}

.scroll-text.hide{
    opacity: 0 !important;
    animation:none;
}



@keyframes glow{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

.popin.hide{
    opacity: 0;
    pointer-events: none;
    display:flex;
}

.popin{
    display:flex;
}


.popin-content{
    transition:all .4s ease-in-out;
    transform: scale(1);
}


.hide .popin-content{
    transition:all .4s ease-in-out;
    transform: scale(1.1);
}

/* video */ 



@media (orientation: landscape) {
video{
    aspect-ratio: 1920/1080;
    width: auto;
}

.gradient {
    height: 100%;
    position: absolute;
    aspect-ratio: 1920/1080;
}

.gradient::before {
    content: '';
    position: absolute;

    z-index: 1;
    width: 10vw;
    height: 100vh;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 1), transparent);
    pointer-events: none;
}

.gradient::after {
    content: '';
    position: absolute;
    right:0;
    z-index: 1;
    width: 10vw;
    height: 100vh;
    background-image: linear-gradient(-90deg, rgba(0, 0, 0, 1), transparent);
    pointer-events: none;
}

.lines-container::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 21px;
    background: black;
    bottom: 0;
    z-index: 1;
}

.cream-x-b-line-1 {
    z-index: 10;
}

.cream-x-b-line-2 {
    z-index: 10;
}

}

@media (orientation: portrait) {


    html,body{
        position: fixed;
        width:100%;
        height:100%;
        overflow: hidden;
    }

    .main{
        overflow-y: scroll;
        width:100%;
        height:100%;
    }

    video{
    aspect-ratio: 1080/1920;
    height: auto;
}

.gradient {
    width: 100%;
    position: absolute;
    aspect-ratio: 1080/1920;
}

.gradient::before {
    content: '';
    position: absolute;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 35vh;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 1), transparent);
    pointer-events: none;
}

.gradient::after {
    content: '';
    position: absolute;
    bottom:0;
    z-index: 1;
    width: 100%;
    height: 25vh;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 1), transparent);
    pointer-events: none;
}

.intro-video{
    align-items: flex-end;
}

}