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

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

html,
body{
    width:100%;
    min-height:100%;
}

body{
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    background:#000;
    color:#fff;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}


/* ======================================
   BACKGROUND
====================================== */

.background{
    position:fixed;
    inset:0;
    background:url("assets/background.jpg") center center/cover no-repeat;
    transform:scale(1.05);
    z-index:-2;
}

.overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:-1;
}


/* ======================================
   PAGE
====================================== */

.page{
    opacity:0;
    transform:translateY(20px);
}


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

.hero{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:70px 20px;
}


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

.logo{
    width:520px;
    max-width:90vw;
    margin-bottom:40px;
    user-select:none;
    animation:floatLogo 6s ease-in-out infinite;
}


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

.video-section{
    width:100%;
    display:flex;
    justify-content:center;
}

.video-container{

    width:min(1200px,90vw);
    aspect-ratio:16/9;

    overflow:hidden;

    border-radius:18px;

    background:#000;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
        0 20px 60px rgba(0,0,0,.45);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.video-container:hover{

    transform:translateY(-3px);

    box-shadow:
        0 30px 80px rgba(0,0,0,.6);

}

.video-container iframe{

    width:100%;
    height:100%;
    display:block;
    border:0;

}


/* ======================================
   SOCIALS
====================================== */

.socials{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:40px;
    flex-wrap:wrap;

    margin-top:35px;

}

.socials a{

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

    text-decoration:none;

    font-size:11px;
    font-weight:600;
    letter-spacing:.22em;

    transition:.25s;

}

.socials a:hover{

    color:#fff;

}


/* ======================================
   CONTACT
====================================== */

.contact{

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:10px;

    margin-top:20px;

}

.contact-row{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;

}

.contact a,
.contact span{

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

    text-decoration:none;

    font-size:11px;
    font-weight:600;
    letter-spacing:.22em;

    transition:.25s;

}

.contact a:hover{

    color:#fff;

}

.contact span{

    opacity:.35;

}


/* ======================================
   ANIMATIONS
====================================== */

@keyframes floatLogo{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-7px);

    }

}


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

@media (max-width:900px){

.hero{

    padding:45px 16px;

}

.logo{

    width:340px;
    margin-bottom:25px;

}

.video-container{

    width:95vw;
    border-radius:12px;

}

.socials{

    gap:20px;

}

.socials a,
.contact a,
.contact span{

    font-size:10px;
    letter-spacing:.16em;

}

.contact-row{

    gap:10px;

}

}