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

.hero {
    position: relative;

    /* On annule volontairement les dimensions
       génériques de "section" */
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;

    box-sizing: border-box;
    padding: var(--gap-l);

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
    border-radius: 0;

    background-image: linear-gradient(180deg, var(--color-dark), var(--color-1));
}


/* CONTENU PRINCIPAL */

.hero-content {
    position: relative;
    z-index: 2;

    width: min(90%, 1000px);

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

    text-align: center;
}


/* LOGO */

.hero-logo {
    display: block;

    width: clamp(18rem, 25vw, 40rem);
    height: auto;

    margin-bottom: var(--gap-m);

    filter:
        drop-shadow(0 0 0.8rem rgba(255, 12, 117, 0.35))
        drop-shadow(0 0 2rem rgba(99, 2, 121, 0.35));
}


/* MÉTIER */

.hero-job {
    margin: 0;

    color: var(--color-light);

    font-size: clamp(2.5rem, 4vw, 5rem);
    font-weight: 700;
    line-height: 1.1;

    text-shadow:
        0 0 0.8rem rgba(255, 252, 106, 0.18),
        0 0 2rem rgba(255, 12, 117, 0.25);
}


/* PETITE DESCRIPTION */

.hero-description {
    margin: var(--gap-s) 0 0;

    color: white;

    font-size: clamp(1.6rem, 2vw, 2rem);
    font-weight: 400;

    opacity: 0.8;
}


/* ACTIONS */

.hero-actions {
    margin-top: var(--gap-l);

    display: flex;
    align-items: center;
    justify-content: center;

    gap: var(--gap-m);
}


/* LIEN "DÉCOUVRIR" */

.hero-scroll {
    display: flex;
    align-items: center;
    gap: var(--gap-s);

    padding: 1.5rem;

    color: var(--color-light);

    font-size: 1.5rem;
}


/* FLÈCHE */

.hero-arrow {
    font-size: 2.5rem;
    line-height: 1;
}


/* BOUTON CONTACT */

.hero-contact {
    color: var(--color-dark);
}


/* ==========================================================
   FORMES DÉCORATIVES
   ========================================================== */

/* ==========================================================
   DECORATION SYNTHWAVE
   ========================================================== */

/* Halo derrière le contenu */

.hero-glow {
    position: absolute;

    left: 50%;
    top: 50%;

    width: min(80vw, 90rem);
    height: min(60vw, 50rem);

    transform: translate(-50%, -50%);

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 12, 117, 0.22) 0%,
            rgba(99, 2, 121, 0.15) 35%,
            transparent 70%
        );

    pointer-events: none;
}


/* ==========================================================
   GRILLE BASSE
   ========================================================== */

.hero-grid {
    position: absolute;

    left: 0;
    right: 0;
    bottom: -1px;

    height: 100%;

    overflow: hidden;

    opacity: 0.28;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255, 12, 117, 0.8) 4px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 147, 254, 0.7) 4px,
            transparent 1px
        );

    background-size:
        5rem 3rem,
        5rem 3rem;

    transform-origin: bottom;
    transform: perspective(25rem) rotateX(40deg) scale(1.4);
}


/* Fondu de la grille vers le haut */
.hero-grid::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            var(--color-dark),
            transparent 70%
        );
}


/* ==========================================================
   LIGNES NEON
   ========================================================== */

.hero-line {
    position: absolute;

    height: 2px;

    width: clamp(10rem, 22vw, 30rem);

    background-color: var(--color-2);

    box-shadow:
        0 0 0.8rem var(--color-2),
        0 0 1.8rem var(--color-2);

    opacity: 0.65;

    pointer-events: none;
}


.hero-line-left {
    left: 0;
    top: 30%;
}


.hero-line-right {
    right: 0;
    bottom: 28%;

    background-color: var(--color-5);

    box-shadow:
        0 0 0.8rem var(--color-5),
        0 0 1.8rem var(--color-5);
}


/* HERO MOBILE */
@media screen and (max-width: 600xp) {
    .hero {
        width: 100%;
        min-height: 100vh;
        min-height: 100svh;
    
        padding: var(--gap-m);
    
        border-radius: 0;
    }
    
    .hero-content {
        width: 100%;
    }
    
    .hero-logo {
        width: clamp(20rem, 55vw, 30rem);
    }
    
    .hero-job {
        max-width: 35rem;
    }
    
    .hero-description {
        max-width: 30rem;
    }
    
    .hero-actions {
        flex-direction: column;
        gap: var(--gap-s);
    }
    
    .hero-scroll {
        order: 2;
    }
    
    .hero-contact {
        order: 1;
    }
}