/* ===========================================================
   AURORA CLUB
   style.css
=========================================================== */

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

html,
body{

    width:100%;
    min-height:100%;

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

    overflow-x:hidden;
    overflow-y:auto;

    background:#09090f;

    color:#ffffff;

}


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

.background{

    position:fixed;

    inset:0;

    background-image:url("assets/background.jpeg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    transform:scale(1);

    animation:kenburns 40s ease-in-out infinite alternate;

    z-index:-3;

}


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

.overlay{

    position:fixed;

    inset:0;

    background:
        linear-gradient(
            rgba(0,0,0,.72),
            rgba(0,0,0,.72)
        );

    backdrop-filter:blur(1px);

    z-index:-2;

}


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

.hero{

    width:100%;

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px 40px 60px;

}


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

.hero-logo img{

    width:220px;

    max-width:75vw;

    opacity:0;

    animation:fadeLogo 2s forwards;

}


/* ===========================================================
    TEXTOS
=========================================================== */

.hero-content{

    margin-top:45px;

}

.hero-content h1{

    font-size:58px;

    font-weight:300;

    letter-spacing:10px;

    text-transform:uppercase;

}

.hero-content p{

    margin-top:28px;

    line-height:34px;

    font-size:20px;

    color:#dddddd;

    font-weight:300;

}


/* ===========================================================
    BOTÃO
=========================================================== */

.hero-button{

    margin-top:60px;

}

.hero-button a{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:330px;

    height:68px;

    text-decoration:none;

    color:#ffffff;

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

    border-radius:8px;

    letter-spacing:3px;

    font-size:15px;

    font-weight:500;

    transition:.35s;

    backdrop-filter:blur(6px);

    background:rgba(255,255,255,.04);

}

.hero-button a:hover{

    background:#ffffff;

    color:#09090f;

    transform:translateY(-3px);

    box-shadow:
        0 0 25px rgba(255,255,255,.25);

}


/* ===========================================================
    RODAPÉ
=========================================================== */

.social{

    position:relative;

    width:100%;

    margin-top:90px;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.social span{

    display:block;

    margin-bottom:20px;

    color:#bbbbbb;

    letter-spacing:6px;

    font-size:12px;

    text-align:center;

}

.social-links{

    display:flex;

    gap:26px;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

}

.social-links a{

    color:#ffffff;

    text-decoration:none;

    font-size:15px;

    letter-spacing:2px;

    transition:.3s;

}

.social-links a:hover{

    color:#bbbbbb;

}

.divider{

    width:1px;

    height:18px;

    background:rgba(255,255,255,.30);

}


/* ===========================================================
    MENU FUTURO
=========================================================== */

.main-menu{

    display:none;

}


/* ===========================================================
    ANIMAÇÕES
=========================================================== */

@keyframes fadeLogo{

    from{

        opacity:0;

        transform:translateY(-20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes kenburns{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}

/* ===========================================================
    RESPONSIVO
=========================================================== */

@media(max-width:900px){

    .hero{

        padding:35px 35px 55px;

    }

    .hero-logo img{

        width:180px;

    }

    .hero-content h1{

        font-size:34px;

        letter-spacing:5px;

    }

    .hero-content p{

        font-size:16px;

        line-height:28px;

        padding:0 20px;

    }

    .hero-button a{

        width:280px;

        height:60px;

    }

    .social{

        margin-top:50px;

    }

}

@media(max-width:520px){

    .hero{

        padding:25px 20px 40px;

    }

    .hero-logo img{

        width:150px;

    }

    .hero-content{

        margin-top:35px;

    }

    .hero-content h1{

        font-size:26px;

        letter-spacing:4px;

    }

    .hero-content p{

        font-size:15px;

        line-height:24px;

    }

    .hero-button{

        margin-top:45px;

    }

    .hero-button a{

        width:100%;

        max-width:280px;

        height:58px;

    }

    .social{

        margin-top:45px;

    }

    .social span{

        margin-bottom:16px;

        letter-spacing:4px;

        font-size:11px;

    }

    .social-links{

        gap:18px;

        flex-wrap:wrap;

    }

    .social-links a{

        font-size:13px;

        letter-spacing:1px;

    }

}

@media(max-width:380px){

    .hero{

        padding:20px 18px 35px;

    }

    .hero-content h1{

        font-size:22px;

        letter-spacing:3px;

    }

    .hero-content p{

        font-size:14px;

        line-height:22px;

    }

    .hero-button a{

        height:54px;

        font-size:14px;

        letter-spacing:2px;

    }

    .social{

        margin-top:35px;

    }

    .social span{

        font-size:10px;

    }

    .social-links{

        gap:14px;

    }

    .social-links a{

        font-size:12px;

    }

}

/* =======================
   PRÓXIMOS EVENTOS
======================= */

.event-gallery{
    width:100%;
    max-width:1400px;

    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin:50px auto;
}

.event-gallery video{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    border-radius:12px;

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

    box-shadow:0 12px 35px rgba(0,0,0,.35);

}

@media(max-width:900px){

    .event-gallery{

        grid-template-columns:1fr;

    }

}