@import url("https://fonts.googleapis.com/css2?family=Caudex:ital,wght@0,400;0,700;1,400;1,700&display=swap");

html,
body {
    margin: 0;
    padding: 0;
}


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

.wdm-cyber-hero,
.wdm-cyber-hero * {
    box-sizing: border-box;
}

.wdm-cyber-hero {
    position: relative;

    width: 100%;
    height: 100vh;
    min-height: 760px;

    overflow: hidden;

    background: #f5f5f7;

    color: #111111;
}


/* =========================================================
   SCÈNE 3D
   ========================================================= */

.wdm-cyber-hero__scene {
    position: absolute;

    inset: 0;

    z-index: 1;
}

.wdm-cyber-hero__scene canvas {
    display: block;

    width: 100% !important;
    height: 100% !important;
}


/* =========================================================
   GRAIN
   ========================================================= */

.wdm-cyber-hero__noise {
    position: absolute;

    inset: 0;

    z-index: 3;

    opacity: 0.018;

    pointer-events: none;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.8'/%3E%3C/svg%3E");
}


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

.wdm-cyber-hero__content {
    position: absolute;

    z-index: 4;

    left: 2vw;
    top: 50%;

    transform: translateY(-50%);

    width: min(760px, 46vw);

    pointer-events: none;
}


/* =========================================================
   LABEL
   ========================================================= */

.wdm-cyber-hero__label {
    margin: 0 0 24px 0;

    width: 100%;

    font-size: 11px;
    font-weight: 500;

    letter-spacing: 0.32em;

    text-align: left;

    color: rgba(0, 0, 0, 0.52);
}


/* =========================================================
   TITRE
   ========================================================= */

.wdm-cyber-hero__title {
    margin: 0;

    width: 100%;
    max-width: 100%;

    font-size: clamp(
        68px,
        6.15vw,
        116px
    );

    line-height: 0.82;

    letter-spacing: -0.065em;

    font-weight: 700;

    text-align: left;

    color: #111111;
}


/* =========================================================
   SOUS-TITRE
   ========================================================= */

.wdm-cyber-hero__subtitle {
    margin: 18px 0 0 0;

    width: 100%;
    max-width: 100%;

    font-size: 14px;

    line-height: 1.5;

    font-weight: 400;

    text-align: left;

    color: rgba(0, 0, 0, 0.66);
}


/* =========================================================
   MENU - DESKTOP
   ========================================================= */

.wdm-cyber-hero__nav {
    position: absolute !important;

    top: 38px !important;
    right: 70px !important;

    z-index: 99999 !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: auto !important;
    height: auto !important;

    overflow: visible !important;

    font-family: "Caudex", serif;

    pointer-events: auto !important;
}

.wdm-cyber-hero__nav-links {
    position: static !important;

    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    flex-direction: row !important;
    align-items: center !important;

    gap: 38px;

    width: auto !important;
    height: auto !important;

    transform: none !important;

    overflow: visible !important;
}

.wdm-cyber-hero__nav-links a {
    position: relative;

    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;

    padding: 4px 0;

    color: #111111 !important;

    font-family: "Caudex", serif !important;
    font-size: 16px;
    font-weight: 700;

    line-height: 1;

    text-decoration: none;

    white-space: nowrap;

    outline: none !important;
    border: none !important;
    box-shadow: none !important;

    -webkit-tap-highlight-color: transparent !important;

    transition:
        color 0.25s ease,
        opacity 0.25s ease;
}

.wdm-cyber-hero__nav-links a:hover {
    color: #444444 !important;
}

.wdm-cyber-hero__nav-links a:focus,
.wdm-cyber-hero__nav-links a:active,
.wdm-cyber-hero__nav-links a:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}


/* =========================================================
   SOULIGNEMENT ÉLECTRIQUE
   ========================================================= */

.wdm-cyber-hero__nav-links a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -6px;

    width: 100%;
    height: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #00aaff 18%,
            #7fe8ff 42%,
            #ffffff 50%,
            #36cfff 58%,
            #0077ff 82%,
            transparent 100%
        );

    opacity: 0;

    transform: scaleX(0);
    transform-origin: left center;

    filter:
        drop-shadow(0 0 3px rgba(0, 170, 255, 0.95))
        drop-shadow(0 0 7px rgba(0, 119, 255, 0.65));

    pointer-events: none;
}

.wdm-cyber-hero__nav-links a.is-clicked::after {
    animation:
        wdm-electric-underline
        0.7s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;
}

@keyframes wdm-electric-underline {

    0% {
        transform: scaleX(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    55% {
        transform: scaleX(1);
        opacity: 1;
    }

    75% {
        transform: scaleX(1);
        opacity: 0.85;
    }

    100% {
        transform: scaleX(1);
        opacity: 0;
    }

}


/* =========================================================
   BURGER - CACHÉ PAR DÉFAUT
   ========================================================= */

.wdm-cyber-hero__burger {
    display: none !important;

    width: 42px;
    height: 42px;

    padding: 0;

    background: transparent;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent !important;
}

.wdm-cyber-hero__burger span {
    display: block;

    width: 24px;
    height: 1.5px;

    margin: 5px auto;

    background: #111111;

    transition:
        transform 0.28s ease,
        opacity 0.28s ease;
}


/* =========================================================
   COMPTEURS - DESKTOP UNIQUEMENT
   ========================================================= */

.wdm-cyber-hero__stats {
    position: absolute;

    left: 2.5vw;
    bottom: 10.5vh;

    z-index: 5;

    display: flex;
    align-items: flex-start;

    gap: 55px;

    pointer-events: none;
}

.wdm-stat {
    width: 190px;

    text-align: center;
}

.wdm-stat__number {
    font-family: "Caudex", serif;

    font-size: clamp(
        48px,
        4.2vw,
        72px
    );

    font-weight: 700;

    line-height: 1;

    color: #050505;

    text-shadow:
        0 3px 7px rgba(0, 0, 0, 0.18);

    opacity: 0;

    transform: translateY(12px);

    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}

.wdm-stat__label {
    margin-top: 12px;

    font-family: "Caudex", serif;

    font-size: 15px;

    font-weight: 700;

    font-style: italic;

    line-height: 1.2;

    color: #111111;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.12);

    white-space: nowrap;

    opacity: 0;

    transform: translateY(8px);

    transition:
        opacity 0.7s ease 0.15s,
        transform 0.7s ease 0.15s;
}

.wdm-cyber-hero__stats.is-visible
.wdm-stat__number,

.wdm-cyber-hero__stats.is-visible
.wdm-stat__label {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   TABLETTE
   769px -> 1200px
   ========================================================= */

@media screen and (min-width: 769px) and (max-width: 1200px) {

    .wdm-cyber-hero {
        height: 100vh;
        min-height: 720px;
    }


    /* Menu toujours visible */

    .wdm-cyber-hero__nav {
        top: 26px !important;
        right: 24px !important;
    }

    .wdm-cyber-hero__nav-links {
        gap: 18px !important;
    }

    .wdm-cyber-hero__nav-links a {
        font-size: 13px !important;
    }

    .wdm-cyber-hero__burger {
        display: none !important;
    }


    /* Texte */

    .wdm-cyber-hero__content {
        left: 3vw;
        top: 47%;

        width: 46vw;

        transform: translateY(-50%);
    }

    .wdm-cyber-hero__label {
        margin-bottom: 18px;

        font-size: 9px;
    }

    .wdm-cyber-hero__title {
        font-size: clamp(
            48px,
            6.3vw,
            76px
        );

        line-height: 0.85;
    }

    .wdm-cyber-hero__subtitle {
        font-size: 12px;

        max-width: 95%;
    }


    /* Compteurs masqués tablette */

    .wdm-cyber-hero__stats {
        display: none !important;
    }

}


/* =========================================================
   MOBILE
   <= 768px
   ========================================================= */

@media screen and (max-width: 768px) {

    .wdm-cyber-hero {
        height: 100svh;

        min-height: 680px;
    }


    /* =====================================================
       MENU MOBILE
       ===================================================== */

    .wdm-cyber-hero__nav {
        top: 16px !important;
        right: 16px !important;

        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: auto !important;

        overflow: visible !important;
    }


    .wdm-cyber-hero__burger {
        position: relative;

        z-index: 100001;

        display: block !important;
    }


    .wdm-cyber-hero__nav-links {
        position: absolute !important;

        top: 52px !important;
        right: 0 !important;

        width: 210px !important;
        height: auto !important;

        padding: 18px 20px;

        display: flex !important;

        flex-direction: column !important;
        align-items: flex-start !important;

        gap: 16px !important;

        background:
            rgba(245, 245, 247, 0.96);

        border:
            1px solid rgba(0, 0, 0, 0.07);

        border-radius: 12px;

        box-shadow:
            0 12px 40px rgba(0, 0, 0, 0.08);

        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);

        opacity: 0 !important;
        visibility: hidden !important;

        transform: translateY(-8px) !important;

        transition:
            opacity 0.25s ease,
            visibility 0.25s ease,
            transform 0.25s ease;
    }


    .wdm-cyber-hero__nav-links a {
        display: block !important;

        width: 100% !important;

        font-size: 15px !important;
    }


    /*
    Menu ouvert
    */

    .wdm-cyber-hero__nav.is-open
    .wdm-cyber-hero__nav-links {
        opacity: 1 !important;
        visibility: visible !important;

        transform: translateY(0) !important;
    }


    /*
    Burger -> croix
    */

    .wdm-cyber-hero__nav.is-open
    .wdm-cyber-hero__burger span:nth-child(1) {
        transform:
            translateY(6.5px)
            rotate(45deg);
    }

    .wdm-cyber-hero__nav.is-open
    .wdm-cyber-hero__burger span:nth-child(2) {
        opacity: 0;
    }

    .wdm-cyber-hero__nav.is-open
    .wdm-cyber-hero__burger span:nth-child(3) {
        transform:
            translateY(-6.5px)
            rotate(-45deg);
    }


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

    .wdm-cyber-hero__content {
        top: 9%;

        left: 22px;

        width: calc(100% - 44px);

        transform: none;
    }


    .wdm-cyber-hero__label {
        margin-bottom: 16px;

        font-size: 9px;

        letter-spacing: 0.28em;
    }


    .wdm-cyber-hero__title {
        font-size: clamp(
            44px,
            12.5vw,
            66px
        );

        line-height: 0.87;

        letter-spacing: -0.055em;
    }


    .wdm-cyber-hero__subtitle {
        margin-top: 14px;

        max-width: 92%;

        font-size: 13px;

        line-height: 1.45;
    }


    /* Compteurs masqués mobile */

    .wdm-cyber-hero__stats {
        display: none !important;
    }

}


/* =========================================================
   PETITS MOBILES
   ========================================================= */

@media screen and (max-width: 480px) {

    .wdm-cyber-hero__content {
        left: 18px;

        width: calc(100% - 36px);
    }


    .wdm-cyber-hero__title {
        font-size: clamp(
            40px,
            12.5vw,
            56px
        );
    }


    .wdm-cyber-hero__subtitle {
        font-size: 12px;
    }


    .wdm-cyber-hero__nav {
        top: 12px !important;
        right: 12px !important;
    }

}