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

Space Vanta Theme 1.0

Module:
Header

File:
public/header/icons.css

Component:
Header Icons

Version:
HV-004 v2

Design Direction:
Geometric
Fragmented
Abstract
Cold Light
Accessible Premium

Responsibilities:
- Desktop utility icons
- Mobile utility icons
- Mobile menu icon
- Icon hover states
- Fragmented line details
- Cold blue light layer
- Cart quantity indicator
- Accessibility helper

Does NOT control:
- Header layout
- Wordmark
- Logo
- Navigation drawer structure
- Cart Add-to-Cart logic

Cart animation:
Prepared but FROZEN.
No JS event integration in this version.

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


/* =================================================
   ICON SYSTEM
   ================================================= */

.sv-header__utility-link {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 24px;

    height: 24px;

    color: #6B727C;

    text-decoration: none;

    flex: 0 0 24px;

    transition:
        transform .24s cubic-bezier(.22, .8, .25, 1),
        color .24s ease;

}


/* =================================================
   ICON SVG
   ================================================= */

.sv-header__icon {

    display: block;

    width: 21px;

    height: 21px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.65;

    stroke-linecap: round;

    stroke-linejoin: round;

    overflow: visible;

    transition:
        transform .24s cubic-bezier(.22, .8, .25, 1),
        opacity .24s ease,
        filter .24s ease;

}


/* =================================================
   FRAGMENT SYSTEM
   ================================================= */

.sv-header__icon-fragment {

    opacity: .62;

    stroke-width: 1.20;

}


/* =================================================
   COLD BLUE LIGHT LAYER
   ================================================= */

.sv-header__icon-glow {

    opacity: 0;

    stroke:
        rgba(32, 125, 255, .95);

    stroke-width: 1.05;

    pointer-events: none;

    transition:
        opacity .28s ease,
        filter .28s ease;

}


/* =================================================
   UTILITY HOVER
   ================================================= */

@media (hover: hover) and (pointer: fine) {

    .sv-header__utility-link:hover {
        color: #8F969F;
        transform: translateY(-1px);
    }

    .sv-header__utility-link:hover .sv-header__icon {
        filter:
            drop-shadow(0 0 1.5px rgba(180, 190, 202, .22));
    }

    .sv-header__utility-link:hover .sv-header__icon-glow {
        opacity: .28;
        filter:
            drop-shadow(0 0 1.5px rgba(105, 155, 205, .18));
    }

}


/* =================================================
   SEARCH
   ================================================= */

.sv-header__icon--search {

    width: 21px;

    height: 21px;

}


.sv-header__utility-link--search:hover .sv-header__icon {

    transform:
        translate(1px, -1px);

}


/* =================================================
   ACCOUNT
   ================================================= */

.sv-header__icon--account {

    width: 21px;

    height: 21px;

}


.sv-header__utility-link--account:hover .sv-header__icon {

    transform:
        translateY(-1px);

}


/* =================================================
   CART
   ================================================= */

.sv-header__cart-icon-wrap {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 24px;

    height: 24px;

}


.sv-header__icon--cart {

    width: 22px;

    height: 22px;

}


.sv-header__utility-link--cart:hover .sv-header__icon {

    transform:
        translateY(-1px);

}


/* =================================================
   CART COUNT
   ================================================= */

.sv-header__cart-count {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #565D66;
    color: var(--sv-bg);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    line-height: 1;
    font-weight: 500;
}

.sv-header__cart-count[hidden] {
    display: none;
}


/* =================================================
   CART ADD ANIMATION
   FROZEN — NO EVENT CONNECTION
   ================================================= */

.sv-header__utility-link--cart.is-cart-added .sv-header__icon--cart,
.sv-header__mobile-action--cart.is-cart-added .sv-header__icon--cart {
    animation:
        sv-cart-add .60s cubic-bezier(.22, .8, .25, 1);
}


.sv-header__utility-link--cart.is-cart-added .sv-header__cart-count,
.sv-header__mobile-action--cart.is-cart-added .sv-header__cart-count {
    animation:
        sv-cart-count .60s cubic-bezier(.22, .8, .25, 1);
}


@keyframes sv-cart-add {

    0% {

        transform:
            translateY(0) scale(1);

    }

    30% {

        transform:
            translateY(-3px) scale(1.08);

    }

    55% {

        transform:
            translateY(1px) scale(.96);

    }

    75% {

        transform:
            translateY(-1px) scale(1.03);

    }

    100% {

        transform:
            translateY(0) scale(1);

    }

}


@keyframes sv-cart-count {

    0% {

        opacity: .4;

        transform:
            scale(.72);

    }

    45% {

        opacity: 1;

        transform:
            scale(1.16);

    }

    70% {

        transform:
            scale(.94);

    }

    100% {

        transform:
            scale(1);

    }

}


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

.sv-header__mobile-menu-button {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 24px;

    height: 24px;

    color: #A7ADB5;

    cursor: pointer;

}


/* Hide native marker */

.sv-header__mobile-menu-button::-webkit-details-marker {

    display: none;

}


/* Remove text node visually */

.sv-header__mobile-menu-label {

    position: absolute;

    width: 1px;

    height: 1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

}


/* Menu geometry */

.sv-header__menu-icon {

    position: relative;

    display: block;

    width: 21px;

    height: 18px;

}


/* Main fragmented lines */

.sv-header__menu-icon::before,
.sv-header__menu-icon::after {

    content: "";

    position: absolute;

    left: 0;

    width: 21px;

    height: 1.5px;

    background: currentColor;

    transition:
        transform .24s ease,
        opacity .24s ease,
        box-shadow .24s ease;

}


.sv-header__menu-icon::before {

    top: 2px;

}


.sv-header__menu-icon::after {

    bottom: 2px;

}


/* Middle fragmented line */

.sv-header__menu-icon-line {

    position: absolute;

    top: 50%;

    left: 5px;

    width: 13px;

    height: 1.5px;

    background: currentColor;

    transform:
        translateY(-50%);

    transition:
        transform .24s ease,
        width .24s ease,
        box-shadow .24s ease;

}


/* =================================================
   MENU HOVER
   ================================================= */

.sv-header__mobile-menu-button:hover {

    color: #B9BEC5;

}


.sv-header__mobile-menu-button:hover .sv-header__menu-icon::before,
.sv-header__mobile-menu-button:hover .sv-header__menu-icon::after,
.sv-header__mobile-menu-button:hover .sv-header__menu-icon-line {

    box-shadow:
        0 0 3px rgba(105, 181, 255, .42);

}


/* =================================================
   MENU OPEN STATE
   ================================================= */

.sv-mobile-menu[open] .sv-header__menu-icon::before {

    transform:
        translateY(6px) rotate(45deg);

}


.sv-mobile-menu[open] .sv-header__menu-icon::after {

    transform:
        translateY(-6px) rotate(-45deg);

}


.sv-mobile-menu[open] .sv-header__menu-icon-line {

    width: 0;

    opacity: 0;

}


/* =================================================
   ACCESSIBILITY
   ================================================= */

.sv-header__sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}


/* =================================================
   MOBILE ICON SIZE
   ================================================= */

@media(max-width:767px) {

    .sv-header__utility-link {

        width: 23px;

        height: 23px;

        flex-basis: 23px;

    }


    .sv-header__icon {

        width: 20px;

        height: 20px;

    }


    .sv-header__icon--cart {

        width: 21px;

        height: 21px;

    }


    .sv-header__cart-icon-wrap {

        width: 23px;

        height: 23px;

    }


    .sv-header__cart-count {

        top: -6px;

        right: -8px;

    }

}

@media (hover: hover) and (pointer: fine) {

    .sv-header__mobile-action:hover {
        color: #8F969F;
        transform: translateY(-1px);
    }

    .sv-header__mobile-action:hover .sv-header__icon {
        filter:
            drop-shadow(0 0 1.5px rgba(180, 190, 202, .20));
    }

    .sv-header__mobile-action:hover .sv-header__icon-glow {
        opacity: .25;
        filter:
            drop-shadow(0 0 1.5px rgba(105, 155, 205, .16));
    }

}