/* =========================================================
   ERABYTE – GLOBAL HEADER
   PERFORMANCE PASS

   Expensive rendering removed:
   - NO backdrop-filter
   - NO animated blur()
   - NO animated clip-path
   - NO :has()
   - NO collision scanning

   Main animations use:
   - opacity
   - transform
   ========================================================= */


/* =========================================================
   FULL PAGE MUTE
   ========================================================= */

.eb-header-page-mute {

    position:
        fixed !important;

    inset:
        0 !important;

    z-index:
        9985 !important;

    width:
        100vw !important;

    height:
        100dvh !important;

    margin:
        0 !important;

    padding:
        0 !important;

    pointer-events:
        none !important;

    visibility:
        hidden;

    opacity:
        0;


    /*
     * IMPORTANT:
     *
     * Plain translucent layer.
     * Extremely cheap compared with backdrop-filter.
     */

    background:
        rgba(
            3,
            6,
            15,
            0.72
        );


    /*
     * GPU-friendly.
     */

    will-change:
        opacity;


    transition:
        opacity
        110ms
        ease-out,

        visibility
        0s
        linear
        110ms;
}


.eb-header-page-mute.is-active {

    visibility:
        visible;

    opacity:
        1;


    transition:
        opacity
        125ms
        ease-out,

        visibility
        0s;
}


/* =========================================================
   HEADER
   ========================================================= */

.eb-site-header {

    --eb-header-text:
        rgba(255,255,255,.76);

    --eb-header-text-focus:
        rgba(255,255,255,1);

    --eb-header-text-muted:
        rgba(255,255,255,.18);

    --eb-header-sub:
        rgba(255,255,255,.64);

    --eb-header-sub-focus:
        rgba(255,255,255,1);

    --eb-header-sub-muted:
        rgba(255,255,255,.16);


    position:
        fixed;

    top:
        0;

    left:
        0;

    right:
        0;

    z-index:
        9990;


    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;


    width:
        100%;


    box-sizing:
        border-box;


    padding:
        clamp(
            22px,
            2.5vh,
            30px
        )
        clamp(
            30px,
            3vw,
            52px
        );


    background:
        transparent !important;


    border:
        0 !important;


    box-shadow:
        none !important;


    opacity:
        0;


    visibility:
        hidden;


    pointer-events:
        none;


    transform:
        translate3d(
            0,
            -15px,
            0
        );


    /*
     * Header itself is composited.
     */

    will-change:
        opacity,
        transform;


    transition:
        opacity
        220ms
        ease-out,

        transform
        260ms
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),

        visibility
        0s
        linear
        260ms;
}


.eb-site-header.is-visible {

    opacity:
        1;


    visibility:
        visible;


    pointer-events:
        auto;


    transform:
        translate3d(
            0,
            0,
            0
        );


    transition-delay:
        0s;
}


/* =========================================================
   BRAND
   ========================================================= */

.eb-header-brand-stack {

    position:
        relative;


    display:
        flex;


    flex-direction:
        column;


    align-items:
        flex-start;


    gap:
        10px;


    flex:
        0
        0
        auto;
}


.eb-site-header
.eb-header-brand,

.eb-site-header
.eb-header-brand:hover,

.eb-site-header
.eb-header-brand:focus,

.eb-site-header
.eb-header-brand:focus-visible,

.eb-site-header
.eb-header-brand:active {

    display:
        block;


    margin:
        0;


    padding:
        3px
        0;


    color:
        rgba(
            255,
            255,
            255,
            .98
        ) !important;


    background:
        transparent !important;


    border:
        0 !important;


    box-shadow:
        none !important;


    font-family:
        "Elnath",
        sans-serif !important;


    font-size:
        clamp(
            1.26rem,
            1.34vw,
            1.58rem
        ) !important;


    font-weight:
        400 !important;


    line-height:
        1 !important;


    letter-spacing:
        .30em !important;


    text-decoration:
        none !important;


    text-shadow:
        none !important;


    white-space:
        nowrap;
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.eb-header-breadcrumb {

    display:
        flex;


    align-items:
        center;


    max-width:
        min(
            45vw,
            720px
        );


    margin:
        0;


    padding:
        0;


    overflow:
        hidden;


    color:
        rgba(
            255,
            255,
            255,
            .30
        );


    font-family:
        "Saira",
        system-ui,
        sans-serif;


    font-size:
        clamp(
            .70rem,
            .72vw,
            .80rem
        );


    font-weight:
        500;


    line-height:
        1;


    letter-spacing:
        .05em;


    white-space:
        nowrap;
}


.eb-header-breadcrumb[hidden] {

    display:
        none !important;
}


.eb-header-breadcrumb__separator {

    margin:
        0
        2px;


    color:
        rgba(
            255,
            255,
            255,
            .17
        );
}


.eb-site-header
.eb-header-breadcrumb__link,

.eb-site-header
.eb-header-breadcrumb__link:hover,

.eb-site-header
.eb-header-breadcrumb__link:focus,

.eb-site-header
.eb-header-breadcrumb__link:focus-visible,

.eb-site-header
.eb-header-breadcrumb__link:active {

    display:
        block;


    margin:
        0;


    padding:
        0;


    color:
        rgba(
            255,
            255,
            255,
            .30
        ) !important;


    background:
        transparent !important;


    border:
        0 !important;


    box-shadow:
        none !important;


    font:
        inherit !important;


    text-decoration:
        none !important;


    text-shadow:
        none !important;


    transition:
        color
        140ms
        ease-out !important;
}


.eb-site-header
.eb-header-breadcrumb__link:hover,

.eb-site-header
.eb-header-breadcrumb__link:focus-visible {

    color:
        rgba(
            255,
            255,
            255,
            .78
        ) !important;
}


.eb-header-breadcrumb__current {

    color:
        rgba(
            255,
            255,
            255,
            .56
        );
}


/* =========================================================
   NAV
   ========================================================= */

.eb-header-nav {

    position:
        relative;


    display:
        flex;


    align-items:
        flex-start;


    justify-content:
        flex-end;


    gap:
        clamp(
            30px,
            2.9vw,
            52px
        );


    margin:
        0;


    padding:
        0;
}


/* =========================================================
   GROUP
   ========================================================= */

.eb-header-nav-group {

    position:
        relative;


    display:
        flex;


    flex-direction:
        column;


    align-items:
        center;


    min-width:
        max-content;


    margin:
        0;


    padding:
        0;
}


/* =========================================================
   MAIN LINK
   ========================================================= */

.eb-site-header
.eb-header-link,

.eb-site-header
.eb-header-link:hover,

.eb-site-header
.eb-header-link:focus,

.eb-site-header
.eb-header-link:focus-visible,

.eb-site-header
.eb-header-link:active {

    position:
        relative;


    display:
        block;


    margin:
        0;


    padding:
        4px
        0
        12px;


    color:
        var(
            --eb-header-text
        ) !important;


    background:
        transparent !important;


    border:
        0 !important;


    box-shadow:
        none !important;


    font-family:
        "Saira",
        system-ui,
        sans-serif !important;


    font-size:
        clamp(
            1.10rem,
            1.12vw,
            1.28rem
        ) !important;


    font-weight:
        500 !important;


    line-height:
        1 !important;


    letter-spacing:
        .065em !important;


    text-transform:
        uppercase;


    text-decoration:
        none !important;


    text-shadow:
        none !important;


    white-space:
        nowrap;


    transform:
        translateZ(0);


    transition:
        color
        130ms
        ease-out,

        opacity
        130ms
        ease-out !important;
}


/* =========================================================
   JS-DRIVEN NAV FOCUS
   ---------------------------------------------------------
   Avoids :has().
   ========================================================= */

.eb-site-header.is-nav-interacting
.eb-header-nav-group
>
.eb-header-link {

    color:
        var(
            --eb-header-text-muted
        ) !important;


    opacity:
        .56;
}


.eb-site-header.is-nav-interacting
.eb-header-nav-group.is-focus-target
>
.eb-header-link {

    color:
        var(
            --eb-header-text-focus
        ) !important;


    opacity:
        1;
}


/*
 * Current page remains visible when not interacting.
 */

.eb-site-header:not(
    .is-nav-interacting
)
.eb-header-nav-group.is-current
>
.eb-header-link {

    color:
        var(
            --eb-header-text-focus
        ) !important;
}


/* =========================================================
   SUBMENU
   ========================================================= */

.eb-header-submenu {

    position:
        absolute;


    top:
        calc(
            100% - 5px
        );


    left:
        50%;


    width:
        max-content;


    min-width:
        220px;


    padding:
        22px
        18px
        18px;


    box-sizing:
        border-box;


    visibility:
        hidden;


    pointer-events:
        none;


    /*
     * Parent does NOT animate.
     */

    transform:
        translate3d(
            -50%,
            0,
            0
        );


    background:
        transparent !important;


    border:
        0 !important;


    box-shadow:
        none !important;
}


.eb-header-nav-group.is-open
>
.eb-header-submenu {

    visibility:
        visible;


    pointer-events:
        auto;
}


/* =========================================================
   SUBMENU INNER
   ========================================================= */

.eb-header-submenu__inner {

    display:
        flex;


    flex-direction:
        column;


    align-items:
        center;


    gap:
        15px;


    min-width:
        100%;


    margin:
        0;


    padding:
        0;
}


/* =========================================================
   SUBMENU ITEM
   ---------------------------------------------------------
   PERFORMANCE:
   opacity + transform ONLY.
   ========================================================= */

.eb-header-submenu-item {

    position:
        relative;


    display:
        block;


    width:
        max-content;


    margin:
        0;


    padding:
        0;


    opacity:
        0;


    transform:
        translate3d(
            0,
            -12px,
            0
        );


    will-change:
        opacity,
        transform;


    transition:
        opacity
        180ms
        ease-out,

        transform
        230ms
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );


    transition-delay:
        calc(
            var(--eb-step)
            *
            85ms
        );
}


.eb-header-nav-group.is-open
.eb-header-submenu-item {

    opacity:
        1;


    transform:
        translate3d(
            0,
            0,
            0
        );
}


/* =========================================================
   SUBMENU LINKS
   ========================================================= */

.eb-site-header
.eb-header-submenu-link,

.eb-site-header
.eb-header-submenu-link:hover,

.eb-site-header
.eb-header-submenu-link:focus,

.eb-site-header
.eb-header-submenu-link:focus-visible,

.eb-site-header
.eb-header-submenu-link:active {

    display:
        block;


    width:
        max-content;


    margin:
        0;


    padding:
        0;


    color:
        var(
            --eb-header-sub
        ) !important;


    background:
        transparent !important;


    border:
        0 !important;


    box-shadow:
        none !important;


    font-family:
        "Saira",
        system-ui,
        sans-serif !important;


    font-size:
        clamp(
            .98rem,
            1vw,
            1.14rem
        ) !important;


    font-weight:
        400 !important;


    line-height:
        1.25 !important;


    letter-spacing:
        .012em !important;


    text-decoration:
        none !important;


    text-shadow:
        none !important;


    white-space:
        nowrap;


    transition:
        color
        130ms
        ease-out,

        opacity
        130ms
        ease-out !important;
}


/* =========================================================
   SUBMENU FOCUS
   ---------------------------------------------------------
   JS classes instead of :has().
   ========================================================= */

.eb-header-submenu__inner.is-submenu-focused
.eb-header-submenu-link {

    color:
        var(
            --eb-header-sub-muted
        ) !important;


    opacity:
        .54;
}


.eb-header-submenu__inner.is-submenu-focused
.eb-header-submenu-link.is-submenu-target {

    color:
        var(
            --eb-header-sub-focus
        ) !important;


    opacity:
        1;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (
    max-width:
    1150px
) {

    .eb-site-header {

        padding-inline:
            22px;
    }


    .eb-header-nav {

        gap:
            20px;
    }


    .eb-site-header
    .eb-header-brand {

        font-size:
            1.08rem !important;
    }


    .eb-site-header
    .eb-header-link {

        font-size:
            .88rem !important;
    }


    .eb-site-header
    .eb-header-submenu-link {

        font-size:
            .82rem !important;
    }

}


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

@media (
    max-width:
    760px
) {

    .eb-site-header {

        padding:
            15px;
    }


    .eb-site-header
    .eb-header-brand {

        font-size:
            .82rem !important;
    }


    .eb-header-breadcrumb {

        display:
            none !important;
    }


    .eb-header-nav {

        gap:
            10px;
    }


    .eb-site-header
    .eb-header-link {

        font-size:
            .65rem !important;
    }


    .eb-header-submenu {

        display:
            none !important;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    .eb-header-page-mute,
    .eb-site-header,
    .eb-header-link,
    .eb-header-submenu-item,
    .eb-header-submenu-link {

        transition:
            none !important;
    }


    .eb-header-nav-group.is-open
    .eb-header-submenu-item {

        opacity:
            1;


        transform:
            none;
    }

}