/* =====================================
   DARA AFFILIATION
   HERO PREMIUM FUTURISTE 3D
===================================== */


.hero{

    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
}



/* VIDEO */

.hero-video{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:-3;

    filter:brightness(.65);

}



/* OVERLAY */

.hero-overlay{

    position:absolute;
    inset:0;

    background:

    linear-gradient(
        90deg,
        rgba(3,8,20,.95),
        rgba(3,8,20,.70),
        rgba(0,102,255,.25)
    );

    z-index:-2;

}



/* LUMIERE */

.hero::before{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    right:-200px;
    top:15%;

    background:#008cff;

    filter:blur(180px);

    opacity:.25;

    animation:pulseLight 5s infinite alternate;

}


@keyframes pulseLight{

    from{
        opacity:.15;
        transform:scale(1);
    }

    to{
        opacity:.35;
        transform:scale(1.2);
    }

}



/* CONTAINER */

.hero-container{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:60px;

    padding-top:80px;

}



/* BADGE */

.hero-badge{

    display:inline-block;

    padding:10px 25px;

    border-radius:50px;

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

    backdrop-filter:blur(10px);

    color:#00c6ff;

    font-size:14px;

    font-weight:600;

    margin-bottom:25px;

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

    animation:fadeDown 1s ease;

}




/* TEXTE */

.hero-content{

    width:55%;

    animation:heroText 1.2s ease;

}



.hero-content h1{

    color:white;

    font-size:64px;

    line-height:1.15;

    font-weight:800;

    margin-bottom:25px;

}



.hero-content h1 span{

    display:block;

    color:#00c6ff;

    text-shadow:

    0 0 20px rgba(0,198,255,.7);

}



.hero-content p{

    color:#d0d8e8;

    font-size:19px;

    line-height:1.8;

    max-width:600px;

    margin-bottom:40px;

}



/* BOUTONS */

.hero-buttons{

    display:flex;

    gap:20px;

}



.hero .btn,
.hero .btn-outline{

    padding:16px 40px;

    border-radius:50px;

    font-weight:700;

    text-decoration:none;

    transition:.4s;

}



/* Bouton principal */

.hero .btn{

    color:white;

    background:

    linear-gradient(
        135deg,
        #0066ff,
        #00c6ff
    );


    box-shadow:

    0 0 25px rgba(0,198,255,.5);

}



.hero .btn:hover{

    transform:translateY(-8px);

    box-shadow:

    0 20px 45px rgba(0,198,255,.7);

}



/* Bouton secondaire */

.hero .btn-outline{

    color:white;

    border:2px solid #00c6ff;

}



.hero .btn-outline:hover{

    background:#00c6ff;

    color:#07101f;

    transform:translateY(-8px);

}



/* IMAGE 3D */

.hero-image{

    width:45%;

    display:flex;

    justify-content:center;

    position:relative;

}



.hero-image::before{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    background:#008cff;

    filter:blur(120px);

    opacity:.3;

}



.hero-image img{

    width:100%;

    max-width:520px;

    z-index:2;

    animation:floatHero 5s ease-in-out infinite;

}




@keyframes floatHero{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-25px);
    }

}



@keyframes heroText{

    from{

        opacity:0;

        transform:translateX(-80px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}



@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/* SCROLL INDICATOR */

.scroll-down{

    position:absolute;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    color:white;

    font-size:13px;

    opacity:.7;

}



.scroll-down span{

    display:block;

    width:2px;

    height:40px;

    background:#00c6ff;

    margin:auto;

    animation:scrollMove 2s infinite;

}


@keyframes scrollMove{

    0%{
        height:10px;
        opacity:0;
    }

    50%{
        height:40px;
        opacity:1;
    }

    100%{
        opacity:0;
    }

}



/* MOBILE */

@media(max-width:900px){


.hero-container{

    flex-direction:column;

    text-align:center;

}


.hero-content,
.hero-image{

    width:100%;

}


.hero-content h1{

    font-size:38px;

}


.hero-content p{

    font-size:16px;

}


.hero-buttons{

    justify-content:center;

    flex-wrap:wrap;

}


.hero-image img{

    max-width:350px;

}

}