/* ==========================================
   HERMNET HERO
   Versión 2.1
========================================== */

:root{

    --primary:#11C4F4;
    --primary-light:#6BE8FF;

    --bg-top:#10396D;
    --bg-middle:#071728;
    --bg-bottom:#03070D;

    --white:#FFFFFF;
    --text:rgba(255,255,255,.88);

}


/*==========================================*/

#her-animation{

    position:relative;

    width:100%;

    min-height:100vh;

    overflow:hidden;

    background:
        radial-gradient(circle at top,
        var(--bg-top) 0%,
        var(--bg-middle) 45%,
        var(--bg-bottom) 100%);
        
    background-size: cover;          
    background-position: center;     
    background-attachment: fixed;
}


/*==========================================*/

#heroCanvas{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    z-index:1;

}


/*==========================================*/

.hero-overlay{

    position:absolute;

    inset:0;

    z-index:2;

    background:

        linear-gradient(
            rgba(0,0,0,.15),
            rgba(0,0,0,.45)
        );

}


/*==========================================*/

.hero-content{

    position:relative;

    z-index:3;

    max-width:1200px;

    height:100vh;

    margin:auto;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding: 100px 20px 40px 20px;

}


/*==========================================
   TITULO
==========================================*/

.hero-title{

    font-size:clamp(52px,6vw,82px);

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:3px;

    color:white;

    margin:0;

    text-shadow:
        0 0 12px rgba(17,196,244,.35),
        0 0 28px rgba(17,196,244,.25);


    animation:

        titleGlow 4s ease-in-out infinite,
        heroFadeUp .9s ease forwards;

}


/*==========================================
   EFECTO RESPIRACION TITULO
==========================================*/

@keyframes titleGlow{


    0%{

        text-shadow:
            0 0 10px rgba(17,196,244,.25),
            0 0 20px rgba(17,196,244,.15);

    }


    50%{

        text-shadow:
            0 0 22px rgba(17,196,244,.70),
            0 0 50px rgba(17,196,244,.40);

    }


    100%{

        text-shadow:
            0 0 10px rgba(17,196,244,.25),
            0 0 20px rgba(17,196,244,.15);

    }

}


/*==========================================
   SUBTITULO
==========================================*/

.hero-subtitle{

    max-width:820px;

    margin-top:30px;

    color:var(--text);

    font-size:clamp(18px,2vw,24px);

    line-height:1.8;


    opacity:0;

    animation:

        heroFadeUp 1s ease forwards;

    animation-delay:.35s;

}


/*==========================================
   BOTONES
==========================================*/

.hero-buttons{

    display:flex;

    gap:22px;

    margin-top:55px;

    flex-wrap:wrap;

    justify-content:center;


    opacity:0;

    animation:

        heroFadeUp 1s ease forwards;

    animation-delay:.7s;

}


/*==========================================
   ANIMACION ENTRADA
==========================================*/

@keyframes heroFadeUp{


    from{

        opacity:0;

        transform:translateY(35px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==========================================
   BOTONES
==========================================*/

.hero-button{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:210px;

    padding:18px 38px;

    border-radius:999px;

    text-decoration:none;

    font-weight:700;

    letter-spacing:.5px;

    transition:.35s;

}


.hero-button.primary{

    background:linear-gradient(
        135deg,
        #18d4ff,
        #009dd6
    );

    color:white;

    box-shadow:

        0 0 20px rgba(17,196,244,.35);

}


.hero-button.secondary{


    border:1px solid rgba(107,232,255,.35);

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

    backdrop-filter:blur(8px);

    color:white;

}



.hero-button:hover{

    transform:translateY(-5px);

}


.hero-button.primary:hover{

    box-shadow:

        0 0 35px rgba(17,196,244,.65);

}


.hero-button.secondary:hover{

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

    border-color:#6BE8FF;

    box-shadow:

        0 0 22px rgba(17,196,244,.35);

}


.hero-button.primary {
    animation: pulse-button 2s infinite;
}


@keyframes pulse-button {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(17, 196, 244, 0.4); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(17, 196, 244, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(17, 196, 244, 0); }
}


.hero-button.secondary {
    animation: pulse-button 2s infinite;
}


/*==========================================
   RESPONSIVE
==========================================*/

@media(max-width:768px){


    #her-animation {
        min-height: 100vh;
    }


    .hero-content{

        min-height: 100vh;
        
        padding-top: 80px;
        
        justify-content: center;

    }


    .hero-buttons{

        flex-direction:column;

        width:100%;

    }


    .hero-button{

        width:100%;

        max-width:340px;

    }


}