/* =====================================
   ACCESSIBILITY / SEO UTILITIES
===================================== */

.visually-hidden{

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}

/* =====================================
   RESET
===================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    width:100%;
    height:100vh;

    overflow:hidden;

    background:#000;

    font-family:'Inter',sans-serif;

    color:white;

}

/* =====================================
   VIDEO
===================================== */

#bgVideo{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100dvh;

    object-fit:cover;

    z-index:-3;

}

/* =====================================
   OVERLAY
===================================== */

.overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.18);

    z-index:-2;

    pointer-events:none;

}

/* =====================================
   HOME
===================================== */

#home{

    width:100%;

    height:100vh;

    position:relative;

    overflow:hidden;

}

/* =====================================
   LOGO
===================================== */

/* =====================================
   HERO LOGO
===================================== */

.heroLogo{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    z-index:20;

    pointer-events:none;

    opacity:0;

    animation:logoFade 2s ease forwards;

    animation-delay:.6s;

}

.heroLogo img{

    width:520px;

    max-width:90vw;

    height:auto;

    filter:drop-shadow(0 0 18px rgba(255,255,255,.15));

}

/* =====================================
   COMING SOON
===================================== */

.comingSoon{

    margin-top:28px;

    text-align:center;

    color:rgba(255,255,255,.92);

    font-size:18px;

    letter-spacing:10px;

    text-transform:uppercase;

    font-family:'Inter',sans-serif;

    opacity:0;

    animation:comingSoonFade 1.4s ease forwards;

    animation-delay:2.2s;

}

@keyframes logoFade{

    0%{

        opacity:0;

        transform:translate(-50%,-45%) scale(.85);

    }

    100%{

        opacity:1;

        transform:translate(-50%,-50%) scale(1);

    }

}
@keyframes comingSoonFade{

    0%{

        opacity:0;

        transform:translateY(18px);

    }

    100%{

        opacity:1;

        transform:translateY(0);

    }

}

/* =====================================
   SCROLL INDICATOR
===================================== */

.scrollIndicator{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

}

.scrollIndicator span{

    width:2px;

    height:55px;

    background:white;

    animation:scroll 2s infinite;

}

.scrollIndicator p{

    letter-spacing:4px;

    font-size:11px;

}

@keyframes scroll{

    0%{

        height:15px;

        opacity:.3;

    }

    50%{

        height:55px;

        opacity:1;

    }

    100%{

        height:15px;

        opacity:.3;

    }

}

/* =====================================
   MOBILE
===================================== */

@media(max-width:768px){

    .heroLogo img{

        width:330px;

    }

    .box{

        width:60px;

        height:60px;

        font-size:26px;

        border-radius:14px;

    }

    /* KEEPING YOUR PHONE VIDEO FIX */

    #bgVideo{

        position:fixed;

        top:50%;

        left:58%;

        width:auto;

        height:100dvh;

        min-width:100vw;

        min-height:100dvh;

        object-fit:cover;

        transform:translate(-58%,-50%);

    }
    .comingSoon{

    font-size:13px;

    letter-spacing:6px;

    margin-top:20px;

}
}

/* =====================================
   TOUCH SETTINGS
===================================== */

html,
body{

    touch-action:none;

    overflow:hidden;

    overscroll-behavior:none;

    -webkit-user-select:none;

    user-select:none;

    -webkit-tap-highlight-color:transparent;

}