/* ==========================================================
   STUDIOGYM - STYLE PREMIUM
   Partie 1/2
========================================================== */

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#040608;

    color:white;

    overflow:hidden;

    height:100vh;

}

/* ========================================= */
/* FOND */
/* ========================================= */

#background{

    position:fixed;

    inset:0;

    z-index:-30;

    background:

    radial-gradient(circle at top,
    #0f4f7c 0%,
    #071019 40%,
    #040608 70%,
    #000000 100%);

}

#overlay{

    position:fixed;

    inset:0;

    z-index:-20;

    background:

    linear-gradient(

    135deg,

    rgba(0,160,255,.06),

    transparent 30%,

    rgba(255,215,0,.04),

    transparent 70%

    );

}

/* ========================================= */
/* LISERÉS DORÉS */
/* ========================================= */

.gold-line{

    position:fixed;

    left:0;

    width:100%;

    height:5px;

    background:

    linear-gradient(

    90deg,

    #6f5000,

    #FFD700,

    #fff6b5,

    #FFD700,

    #6f5000

    );

    box-shadow:

    0 0 10px gold,

    0 0 25px gold,

    0 0 40px rgba(255,215,0,.7);

    z-index:999;

}

.top{

    top:0;

}

.bottom{

    bottom:0;

}

/* ========================================= */
/* CONTENEUR */
/* ========================================= */

.container{

    position:relative;

    width:90%;

    max-width:900px;

    margin:auto;

    top:50%;

    transform:translateY(-50%);

    text-align:center;

    padding:45px;

    border-radius:25px;

    background:

    rgba(20,20,25,.35);

    backdrop-filter:blur(14px);

    border:1px solid rgba(0,212,255,.4);

    box-shadow:

    0 0 20px rgba(0,212,255,.4),

    0 0 60px rgba(0,212,255,.18),

    inset 0 0 25px rgba(255,255,255,.05);

}

/* Halo */

.container::before{

    content:"";

    position:absolute;

    inset:-30px;

    background:

    radial-gradient(circle,

    rgba(0,180,255,.25),

    transparent 70%);

    z-index:-1;

}

/* ========================================= */
/* TITRES */
/* ========================================= */

.logo h1{

    font-size:70px;

    letter-spacing:8px;

    color:#ffffff;

    text-shadow:

    0 0 8px white,

    0 0 20px #00d4ff,

    0 0 40px #00d4ff,

    0 0 70px #00d4ff;

}

.blue-bar{

    width:250px;

    height:5px;

    margin:20px auto;

    border-radius:10px;

    background:#00d4ff;

    box-shadow:

    0 0 10px #00d4ff,

    0 0 25px #00d4ff,

    0 0 50px #00d4ff;

}

h2{

    margin-top:25px;

    color:#00d4ff;

    font-size:34px;

    text-shadow:

    0 0 12px #00d4ff,

    0 0 25px #00d4ff;

}

p{

    margin-top:30px;

    font-size:22px;

    line-height:1.8;

    color:#efefef;

}

/* ========================================= */
/* GIF */
/* ========================================= */

.gif-container{

    margin-top:40px;

}

.gif-container img{

    width:260px;

    transition:.5s;

    filter:

    drop-shadow(0 0 20px #00d4ff)

    drop-shadow(0 0 50px rgba(0,212,255,.5));

}

.gif-container img:hover{

    transform:scale(1.08);

}

/* ========================================= */
/* RÉSEAUX SOCIAUX */
/* ========================================= */

.social{

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:45px;

}

.social a{

    color:#00d4ff;

    font-size:65px;

    transition:.4s;

}

.social a:hover{

    transform:

    translateY(-8px)

    scale(1.15);

    color:#FFD700;

    text-shadow:

    0 0 10px gold,

    0 0 20px gold,

    0 0 50px gold;

}

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

.footer{

    margin-top:45px;

    color:#777;

    font-size:14px;

    letter-spacing:3px;

}

/*====================================================
        ALVÉOLES MÉTALLIQUES 3D
====================================================*/

.hex{

    position:absolute;

    width:82px;
    height:94px;

    clip-path:polygon(
        25% 6%,
        75% 6%,
        100% 50%,
        75% 94%,
        25% 94%,
        0 50%
    );

    background:
    linear-gradient(
        135deg,
        #c8c8c8 0%,
        #8b8b8b 18%,
        #4b4b4b 40%,
        #2d2d2d 60%,
        #161616 100%
    );

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

    box-shadow:

        inset 2px 2px 4px rgba(255,255,255,.20),

        inset -8px -8px 12px rgba(0,0,0,.75),

        0 0 2px rgba(255,255,255,.10);

    transition:.7s;

}

.hex::before{

    content:"";

    position:absolute;

    inset:5px;

    clip-path:inherit;

    background:

    linear-gradient(

        135deg,

        rgba(255,255,255,.20),

        transparent 35%,

        rgba(0,0,0,.35)

    );

}

.hex.active{

    border:1px solid #00d4ff;

    box-shadow:

        0 0 8px #00d4ff,

        0 0 20px #00d4ff,

        0 0 40px #00d4ff,

        0 0 70px rgba(0,212,255,.4),

        inset 0 0 15px white;

}

/*====================================================
        CANVAS DES PARTICULES
====================================================*/

#particles{

    position:fixed;

    inset:0;

    z-index:-10;

    pointer-events:none;

}

/*====================================================
        ANIMATION D'APPARITION
====================================================*/

.container{

    animation:arrivee 2s ease;

}

@keyframes arrivee{

0%{

opacity:0;

transform:

translateY(-100px)

scale(.90);

}

100%{

opacity:1;

transform:

translateY(-50%)

scale(1);

}

}

/*====================================================
        TITRES
====================================================*/

.logo{

animation:logoGlow 4s infinite alternate;

}

@keyframes logoGlow{

0%{

filter:brightness(.9);

}

100%{

filter:brightness(1.3);

}

}

/*====================================================
        BOUTONS
====================================================*/

.social a{

position:relative;

}

.social a::after{

content:"";

position:absolute;

left:-12px;
top:-12px;

width:90px;
height:90px;

border-radius:50%;

background:

radial-gradient(

rgba(0,212,255,.25),

transparent 70%

);

opacity:0;

transition:.4s;

}

.social a:hover::after{

opacity:1;

}

/*====================================================
        TEXTE
====================================================*/

p{

animation:textGlow 5s infinite alternate;

}

@keyframes textGlow{

0%{

text-shadow:none;

}

100%{

text-shadow:

0 0 6px rgba(0,212,255,.3);

}

}

/*====================================================
        GIF
====================================================*/

.gif-container{

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

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}

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

@media(max-width:900px){

.logo h1{

font-size:46px;

letter-spacing:4px;

}

h2{

font-size:26px;

}

p{

font-size:18px;

}

.gif-container img{

width:190px;

}

.social a{

font-size:50px;

}

.container{

padding:30px;

}

}

@media(max-width:600px){

.logo h1{

font-size:34px;

}

.blue-bar{

width:180px;

}

h2{

font-size:22px;

}

p{

font-size:16px;

line-height:1.6;

}

.social{

gap:25px;

}

.social a{

font-size:42px;

}

.footer{

font-size:11px;

}

}