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

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
   =================================================

   SPACE VANTA
   Dark Metallic Spatial Trace

   Material:
   - Deep Graphite
   - Obsidian Blue
   - Cold Steel reflection

   The text remains independently readable
   against the light mineral backing plate.

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

.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:
        10px;

    line-height:
        1;

    letter-spacing:
        .42em;

    font-weight:
        600;


    /*
    -----------------------------------------
    Dark metallic core
    -----------------------------------------
    */

    background:

        linear-gradient(105deg,

            #080D12 0%,
            #0C141C 15%,
            #111D27 30%,
            #172A3A 42%,
            #29485F 50%,
            #172A3A 58%,
            #111D27 70%,
            #0C141C 85%,
            #080D12 100%);


    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;


    /*
    -----------------------------------------
    Contrast / edge definition
    -----------------------------------------
    */

    text-shadow:

        0 0 1px rgba(4, 9, 13, .62),

        0 1px 2px rgba(4, 8, 12, .34),

        0 0 5px rgba(24, 48, 67, .10);


    opacity:
        0;

    filter:
        blur(.08px);


    transition:

        opacity .70s ease,
        letter-spacing .70s ease,
        filter .70s ease;

}


/* =================================================
   LIGHT MINERAL / METALLIC PLATE
   =================================================

   The plate carries the LIGHT side
   of the Space Vanta DNA.

   Main material:
   luminous mineral silver

   Reflection:
   cold blue / steel

   Accent:
   subtle warm mineral white

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

.sv-header__spatial-trace::before {

    content:
        "";

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        calc(100% + 18px);

    height:
        calc(100% + 9px);

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

    pointer-events:
        none;

    box-sizing:
        border-box;


    /*
    -----------------------------------------
    Light mineral body
    -----------------------------------------
    */

    background:

        linear-gradient(105deg,

            rgba(217, 225, 231, .88) 0%,

            rgba(239, 243, 246, .94) 16%,

            rgba(250, 251, 252, .97) 30%,

            rgba(222, 232, 240, .94) 43%,

            rgba(183, 207, 224, .86) 50%,

            rgba(222, 232, 240, .94) 57%,

            rgba(250, 251, 252, .97) 70%,

            rgba(239, 243, 246, .94) 84%,

            rgba(217, 225, 231, .88) 100%);


    /*
    -----------------------------------------
    Mineral metal reflection
    -----------------------------------------
    */

    box-shadow:

        inset 0 1px 0 rgba(255, 255, 255, .88),

        inset 0 -1px 0 rgba(86, 112, 132, .24),

        inset 0 0 7px rgba(101, 145, 178, .20),

        0 2px 9px rgba(30, 49, 65, .10);


    /*
    -----------------------------------------
    Metallic edge
    -----------------------------------------
    */

    border:
        1px solid rgba(146, 170, 188, .62);

    border-radius:
        999px;


    /*
    -----------------------------------------
    Soft spatial edge
    -----------------------------------------
    */

    -webkit-mask-image:

        linear-gradient(90deg,

            transparent 0%,

            rgba(0, 0, 0, .90) 8%,

            rgba(0, 0, 0, 1) 18%,

            rgba(0, 0, 0, 1) 82%,

            rgba(0, 0, 0, .90) 92%,

            transparent 100%);


    mask-image:

        linear-gradient(90deg,

            transparent 0%,

            rgba(0, 0, 0, .90) 8%,

            rgba(0, 0, 0, 1) 18%,

            rgba(0, 0, 0, 1) 82%,

            rgba(0, 0, 0, .90) 92%,

            transparent 100%);


    opacity:
        .96;

}


/* =================================================
   REST STATE
   ================================================= */

.sv-header[data-header-state="rest"] .sv-header__spatial-trace {

    opacity:
        1;

    letter-spacing:
        .48em;

    filter:
        blur(.02px);

}


.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;

}


/* =================================================
   FOLLOW SPACER
   ================================================= */

.sv-header-follow-spacer {

    display:
        block;

    width:
        100%;

    height:
        0;

    pointer-events:
        none;

}


/* =================================================
   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;

}


/* =================================================
   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;

    }

}