.hnia-site-header {
    --header-progress: 0;

    position: fixed;
    top: 0;
    left: 0;

    z-index: 1000;

    width: 100%;

    padding:
        calc(var(--header-progress) * 14px)
        calc(5vw + (var(--header-progress) * 10px))
        0;

    pointer-events: none;
}

.hnia-site-header__shell {
    width: 100%;

    max-width:
        calc(
            100vw
            - (var(--header-progress) * 300px)
        );

    min-height:
        calc(
            88px
            - (var(--header-progress) * 20px)
        );

    margin: 0 auto;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            calc(var(--header-progress) * 0.12)
        );

    border-radius:
        calc(
            var(--header-progress) * 24px
        );

    background:
        rgba(
            18,
            12,
            9,
            calc(var(--header-progress) * 0.94)
        );

    box-shadow:
        0
        calc(var(--header-progress) * 18px)
        calc(var(--header-progress) * 55px)
        rgba(
            0,
            0,
            0,
            calc(var(--header-progress) * 0.24)
        );

    color: #fffdf9;

    pointer-events: auto;

    transition:
        background-color 180ms ease,
        border-color 180ms ease;
}

.hnia-site-header__inner {
    min-height: inherit;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    gap:
        calc(
            40px
            - (var(--header-progress) * 8px)
        );

    padding:
        0
        calc(
            5vw
            - (var(--header-progress) * 2vw)
        );
}


/* BRAND */

.hnia-site-header__brand {
    justify-self: start;

    color: inherit;
    text-decoration: none;

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size:
        calc(
            25px
            - (var(--header-progress) * 2px)
        );

    font-weight: 500;
    line-height: 1;

    letter-spacing: 0.08em;

    white-space: nowrap;

    transition:
        color 300ms ease,
        opacity 300ms ease;
}


/* NAV */

.hnia-site-header__nav {
    display: flex;
    align-items: center;
    justify-content: center;

    gap:
        calc(
            34px
            - (var(--header-progress) * 6px)
        );
}

.hnia-site-header__nav a {
    position: relative;

    padding: 10px 0;

    color: rgba(255, 253, 249, 0.74);

    font-family: "Manrope", Arial, sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;

    letter-spacing: 0.14em;
    text-transform: uppercase;

    text-decoration: none;

    transition:
        color 280ms ease,
        transform 280ms ease;
}

.hnia-site-header__nav a::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;

    height: 1px;

    background: #c18b58;

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

    transition:
        transform 350ms cubic-bezier(.16, 1, .3, 1);
}

.hnia-site-header__nav a:hover {
    color: #fffdf9;
    transform: translateY(-1px);
}

.hnia-site-header__nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}


/* ACTIONS */

.hnia-site-header__actions {
    justify-self: end;

    display: flex;
    align-items: center;

    gap:
        calc(
            20px
            - (var(--header-progress) * 4px)
        );
}

.hnia-header-action {
    position: relative;

    display: grid;
    place-items: center;

    width: 24px;
    height: 24px;

    padding: 0;

    border: 0;
    background: transparent;

    color: #fffdf9;

    text-decoration: none;
    cursor: pointer;

    transition:
        color 250ms ease,
        transform 250ms ease;
}

.hnia-header-action:hover {
    color: #d0a06d;
    transform: translateY(-1px);
}

.hnia-header-action svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hnia-cart-count {
    position: absolute;

    top: -6px;
    right: -8px;

    min-width: 15px;
    height: 15px;

    padding: 0 4px;

    display: grid;
    place-items: center;

    border-radius: 999px;

    background: #c18b58;
    color: #fffdf9;

    font-size: 8px;
    line-height: 1;
}