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

Space Vanta Theme 1.0

Module:
Header

File:
public/header/header.css

Version:
HEADER-FOLLOW-008-FINAL-DNA-SPLIT

Purpose:
Global Header Structure
Spatial Metallic Floating Follow Surface

Responsibilities:
- Header container
- Header global visual state
- Desktop Header visibility
- Desktop brand row
- Desktop navigation
- Desktop dropdown
- Header divider
- Desktop three-level structure
- Global header compression state
- Spatial metallic follow surface
- SPACE VANTA spatial trace

Does NOT handle:
- Mobile Header Core layout
- Mobile Featured Functions layout
- Mobile Header spacing
- Mobile Menu internal layout
- Find Cube geometry
- Find Cube material
- Find interaction logic
- Vision Aperture geometry
- Vision interaction logic
- Featured Functions global interaction
- Search icon geometry
- Cart icon geometry

Mobile-specific layout remains in:
public/header/mobile.css

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


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

.sv-header {

    position:
        fixed;

    top:
        0;

    left:
        0;

    right:
        0;

    z-index:
        800;

    width:
        100%;

    background:
        var(--sv-bg);

    color:
        var(--sv-text);

    border-bottom:
        1px solid var(--sv-border);

    box-sizing:
        border-box;

    transform:
        translateY(0);

    transition:
        background-color .42s ease,
        border-color .42s ease,
        box-shadow .42s ease,
        transform .34s cubic-bezier(.22, .72, .24, 1);

}


/* =================================================
   SPATIAL METALLIC FLOATING SURFACE
   =================================================

   Three spatial density zones:

   ZONE 1
   SPACE VANTA
   Strongest material / blur

   ZONE 2
   Left + Right
   Moderate material / blur

   ZONE 3
   Outer edges
   Almost transparent / floating membrane

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

.sv-header[data-header-state="blur"],
.sv-header[data-header-state="rest"] {

    /*
    -----------------------------------------
    Three-zone mineral density
    -----------------------------------------
    */

    background:

        linear-gradient(90deg,

            rgba(226, 232, 236, .004) 0%,
            rgba(226, 232, 236, .008) 8%,

            rgba(188, 199, 207, .018) 14%,
            rgba(137, 151, 162, .028) 24%,

            rgba(181, 193, 202, .044) 34%,
            rgba(204, 213, 220, .068) 42%,

            rgba(221, 228, 233, .088) 47%,
            rgba(226, 232, 236, .100) 50%,
            rgba(221, 228, 233, .088) 53%,

            rgba(204, 213, 220, .068) 58%,
            rgba(181, 193, 202, .044) 66%,

            rgba(137, 151, 162, .028) 76%,
            rgba(188, 199, 207, .018) 86%,

            rgba(226, 232, 236, .008) 92%,
            rgba(226, 232, 236, .004) 100%),

        /*
        -----------------------------------------
        Metallic silver reflection
        -----------------------------------------
        */

        linear-gradient(116deg,

            transparent 0%,
            transparent 22%,

            rgba(226, 232, 237, .010) 31%,
            rgba(242, 246, 248, .028) 39%,
            rgba(250, 251, 252, .052) 45%,
            rgba(235, 241, 245, .038) 50%,
            rgba(250, 251, 252, .052) 55%,
            rgba(242, 246, 248, .028) 61%,
            rgba(226, 232, 237, .010) 69%,

            transparent 78%,
            transparent 100%),

        /*
        -----------------------------------------
        Cold spatial blue
        -----------------------------------------
        */

        linear-gradient(108deg,

            transparent 30%,
            transparent 42%,

            rgba(40, 82, 130, .008) 47%,
            rgba(55, 101, 154, .018) 51%,
            rgba(75, 125, 176, .028) 55%,
            rgba(55, 101, 154, .018) 59%,
            rgba(40, 82, 130, .008) 63%,

            transparent 68%,
            transparent 100%);


    border-bottom:
        1px solid rgba(211, 219, 225, .13);


    box-shadow:
        0 1px 0 rgba(235, 240, 244, .055),
        0 12px 34px rgba(10, 17, 24, .028);


    /*
    IMPORTANT

    Blur is no longer applied to the
    entire Header.

    The localized blur is now owned
    by ::before.

    This is what creates the floating
    membrane effect.
    */

    backdrop-filter:
        none;

    -webkit-backdrop-filter:
        none;

}


/* =================================================
   CENTRAL SPATIAL BLUR FIELD
   =================================================

   Three-zone mask:

   Zone 1:
   40–60%
   strongest

   Zone 2:
   approximately 15–40%
   approximately 60–85%
   moderate

   Zone 3:
   outer edges
   almost transparent

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

.sv-header[data-header-state="blur"]::before,
.sv-header[data-header-state="rest"]::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;


    background:

        radial-gradient(ellipse 38% 125% at 50% 50%,

            rgba(238, 243, 246, .070) 0%,
            rgba(230, 237, 241, .055) 28%,
            rgba(222, 230, 235, .035) 48%,
            rgba(214, 223, 229, .018) 68%,
            transparent 100%);


    backdrop-filter:
        blur(9px) saturate(.90);

    -webkit-backdrop-filter:
        blur(9px) saturate(.90);


    /*
    -----------------------------------------
    Floating three-zone mask
    -----------------------------------------
    */

    -webkit-mask-image:

        linear-gradient(90deg,

            rgba(0, 0, 0, .015) 0%,
            rgba(0, 0, 0, .025) 8%,

            rgba(0, 0, 0, .080) 14%,
            rgba(0, 0, 0, .180) 22%,

            rgba(0, 0, 0, .340) 31%,
            rgba(0, 0, 0, .500) 40%,

            rgba(0, 0, 0, .660) 46%,
            rgba(0, 0, 0, .740) 50%,
            rgba(0, 0, 0, .660) 54%,

            rgba(0, 0, 0, .500) 60%,
            rgba(0, 0, 0, .340) 69%,

            rgba(0, 0, 0, .180) 78%,
            rgba(0, 0, 0, .080) 86%,

            rgba(0, 0, 0, .025) 92%,
            rgba(0, 0, 0, .015) 100%);

    mask-image:

        linear-gradient(90deg,

            rgba(0, 0, 0, .015) 0%,
            rgba(0, 0, 0, .025) 8%,

            rgba(0, 0, 0, .080) 14%,
            rgba(0, 0, 0, .180) 22%,

            rgba(0, 0, 0, .340) 31%,
            rgba(0, 0, 0, .500) 40%,

            rgba(0, 0, 0, .660) 46%,
            rgba(0, 0, 0, .740) 50%,
            rgba(0, 0, 0, .660) 54%,

            rgba(0, 0, 0, .500) 60%,
            rgba(0, 0, 0, .340) 69%,

            rgba(0, 0, 0, .180) 78%,
            rgba(0, 0, 0, .080) 86%,

            rgba(0, 0, 0, .025) 92%,
            rgba(0, 0, 0, .015) 100%);

}


/* =================================================
   METALLIC MIRROR REFLECTION
   ================================================= */

.sv-header[data-header-state="blur"]::after,
.sv-header[data-header-state="rest"]::after {

    content:
        "";

    position:
        absolute;

    top:
        -12%;

    left:
        0;

    right:
        0;

    bottom:
        -12%;

    pointer-events:
        none;


    background:

        linear-gradient(116deg,

            transparent 0%,
            transparent 23%,

            rgba(205, 215, 222, .008) 31%,
            rgba(233, 239, 243, .020) 38%,
            rgba(249, 250, 251, .050) 44%,
            rgba(238, 244, 247, .034) 50%,
            rgba(249, 250, 251, .050) 56%,
            rgba(233, 239, 243, .020) 62%,
            rgba(205, 215, 222, .008) 69%,

            transparent 77%,
            transparent 100%),

        linear-gradient(104deg,

            transparent 12%,
            transparent 34%,

            rgba(198, 209, 218, .008) 42%,
            rgba(228, 235, 240, .020) 47%,
            rgba(245, 248, 250, .032) 50%,
            rgba(228, 235, 240, .020) 53%,
            rgba(198, 209, 218, .008) 58%,

            transparent 66%,
            transparent 88%),

        linear-gradient(108deg,

            transparent 30%,
            transparent 43%,

            rgba(42, 84, 132, .006) 49%,
            rgba(57, 103, 158, .015) 53%,
            rgba(82, 128, 180, .026) 57%,
            rgba(57, 103, 158, .015) 61%,
            rgba(42, 84, 132, .006) 66%,

            transparent 73%,
            transparent 100%);


    opacity:
        .92;

    mix-blend-mode:
        screen;

}


/* =================================================
   RESTING BRAND TRACE  (enhanced contrast)
   ================================================= */

.sv-header__spatial-trace {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
    white-space: nowrap;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;          /* was 10px */
    line-height: 1;
    letter-spacing: .38em;    /* tighter for stronger presence */
    font-weight: 700;         /* was 600 */

    /* Darker metallic core for better contrast on light mineral surface */
    background:
        linear-gradient(105deg,
            #05080C 0%,
            #0A121A 12%,
            #101C28 28%,
            #1A2F42 42%,
            #2A4A66 50%,
            #1A2F42 58%,
            #101C28 72%,
            #0A121A 88%,
            #05080C 100%);

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Stronger edge definition */
    text-shadow:
        0 0 1.5px rgba(4, 9, 13, .78),
        0 1px 3px rgba(4, 8, 12, .48),
        0 0 8px rgba(24, 48, 67, .18);

    opacity: 0;
    filter: blur(.04px);

    transition:
        opacity .70s ease,
        letter-spacing .70s ease,
        filter .70s ease;
}

/* REST STATE — higher presence */
.sv-header[data-header-state="rest"] .sv-header__spatial-trace {
    opacity: 1;
    letter-spacing: .42em;
    filter: blur(0);
}

.sv-header[data-header-state="rest"] .sv-header__spatial-trace::before {
    opacity: 1;
}

/* FULL STATE */
.sv-header[data-header-state="full"] .sv-header__spatial-trace {
    opacity: 0;
}


/* =================================================
   GLOBAL SPATIAL COMPRESSION
   ================================================= */

.sv-header[data-header-state="blur"] .sv-header__desktop,
.sv-header[data-header-state="blur"] .sv-header__navigation,
.sv-header[data-header-state="blur"] .sv-header__mobile,

.sv-header[data-header-state="rest"] .sv-header__desktop,
.sv-header[data-header-state="rest"] .sv-header__navigation,
.sv-header[data-header-state="rest"] .sv-header__mobile {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* FULL STATE — force restore interaction (critical for mobile upward reveal) */
.sv-header[data-header-state="full"] .sv-header__desktop,
.sv-header[data-header-state="full"] .sv-header__navigation,
.sv-header[data-header-state="full"] .sv-header__mobile {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.sv-header[data-header-state="full"] .sv-header__mobile-action,
.sv-header[data-header-state="full"] .sv-featured-trigger,
.sv-header[data-header-state="full"] .sv-mobile-menu,
.sv-header[data-header-state="full"] a,
.sv-header[data-header-state="full"] button {
    pointer-events: auto !important;
}


/* =================================================
   DESKTOP BRAND ROW
   ================================================= */

.sv-header__desktop {

    display:
        none;

    min-height:
        104px;

    padding:
        0 var(--sv-desktop-padding);

    box-sizing:
        border-box;

}


/* =================================================
   DESKTOP NAVIGATION
   ================================================= */

.sv-header__navigation {

    display:
        none;

}


/* =================================================
   DESKTOP UTILITY ZONE
   ================================================= */

.sv-header__desktop .sv-header__utility {

    justify-self:
        end;

}


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

.sv-header__mobile {

    display:
        block;

}


/* =================================================
   DESKTOP
   ================================================= */

@media (min-width: 768px) {

    .sv-header__desktop {

        display:
            grid;

        grid-template-columns:
            minmax(0, 1fr) auto minmax(0, 1fr);

        grid-template-rows:
            64px 40px;

        align-items:
            center;

        min-height:
            104px;

    }


    .sv-header__mobile {

        display:
            none;

    }


    .sv-header__navigation {

        position:
            relative;

        display:
            block;

    }


    .sv-header__logo {

        grid-column:
            1;

        grid-row:
            1;

    }


    .sv-header__wordmark {

        grid-column:
            2;

        grid-row:
            1;

    }


    .sv-header__locale {

        grid-column:
            1;

        grid-row:
            2;

        width:
            0;

        height:
            0;

        overflow:
            visible;

    }


    .plugin-isv-multiLanguage {

        grid-column:
            1;

        grid-row:
            2;

        justify-self:
            start;

        width:
            max-content;

    }


    .sv-header__utility {

        grid-column:
            3;

        grid-row:
            2;

        justify-self:
            end;

    }


    .sv-header__navigation::before {

        content:
            "";

        position:
            absolute;

        top:
            0;

        left:
            var(--sv-desktop-padding);

        right:
            var(--sv-desktop-padding);

        height:
            2px;

        background:
            linear-gradient(90deg,

                transparent 0%,
                rgba(175, 182, 190, .07) 8%,
                rgba(195, 201, 208, .20) 25%,
                rgba(220, 224, 229, .34) 50%,
                rgba(195, 201, 208, .20) 75%,
                rgba(175, 182, 190, .07) 92%,
                transparent 100%);

        filter:
            blur(.35px);

        opacity:
            .88;

        pointer-events:
            none;

    }


    .sv-header__navigation::after {

        content:
            "";

        position:
            absolute;

        top:
            0;

        left:
            24%;

        right:
            24%;

        height:
            1px;

        background:
            linear-gradient(90deg,

                transparent 0%,
                rgba(225, 229, 233, .12) 20%,
                rgba(245, 247, 249, .34) 50%,
                rgba(225, 229, 233, .12) 80%,
                transparent 100%);

        filter:
            blur(.25px);

        opacity:
            .82;

        pointer-events:
            none;

    }


    .sv-header__nav {

        width:
            100%;

    }


    .sv-header__nav>ul {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            28px;

    }


    .sv-header__nav-item {

        position:
            relative;

        padding:
            16px 0;

    }


    .sv-header__nav-item>a {

        display:
            block;

        font-size:
            13px;

        line-height:
            1.4;

        white-space:
            nowrap;

    }


    .sv-header__dropdown {

        position:
            absolute;

        left:
            50%;

        top:
            100%;

        min-width:
            260px;

        padding:
            22px;

        transform:
            translateX(-50%);

        background:
            var(--sv-surface);

        border:
            1px solid var(--sv-border);

        opacity:
            0;

        visibility:
            hidden;

        transition:
            opacity .18s ease,
            visibility .18s ease;

    }


    .sv-header__nav-item:hover>.sv-header__dropdown {

        opacity:
            1;

        visibility:
            visible;

    }


    .sv-header__dropdown>ul>li+li {

        margin-top:
            12px;

    }


    .sv-header__dropdown a {

        font-size:
            13px;

    }


    .sv-header__level-3 {

        margin-top:
            8px;

        margin-left:
            14px;

    }


    .sv-header__level-3 li+li {

        margin-top:
            7px;

    }

}


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

@media (max-width: 767px) {

    .sv-header__desktop {

        display:
            none;

    }


    .sv-header__navigation {

        display:
            none;

    }


    .sv-header__spatial-trace::before {

        width:
            calc(100% + 20px);

        height:
            calc(100% + 10px);

        border-color:
            rgba(213, 222, 229, .20);

    }

}


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

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

    .sv-header {

        transition:
            none;

    }


    .sv-header__spatial-trace {

        transition:
            none;

    }

}