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

Space Vanta Theme 1.0

Module:
Bundle Preview Interaction

File:
public/bundle-template/bundle-hero/preview/interaction.css

Version:
1.0

Responsibility:
Preview CTA / Hover / Press / Added State

Interaction DNA:
PRESS / COMPRESS

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


/* =================================================
   1. Preview Add To Cart
================================================= */

.sv-bundle-preview-option__cart {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    min-height: 38px;

    padding:
        0 16px;

    border:
        1px solid transparent;

    border-radius: 999px;

    /*
   * Warm metallic base.
   *
   * This is intentionally different from
   * the colder Hero CTA.
   */
    background:
        linear-gradient(135deg,
            #fffdf9 0%,
            #e9e3da 24%,
            #c8bfb4 48%,
            #f3eee7 72%,
            #d3cbc1 100%) padding-box,

        linear-gradient(135deg,
            #aaa095,
            #ffffff 24%,
            #9d9388 52%,
            #f7f3ed 76%,
            #a99e92) border-box;

    color:
        #302b26;

    font-family:
        var(--sv-font-ui,
            var(--sv-font-brand));

    font-size: 9px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: 0.11em;

    text-transform: uppercase;

    cursor: pointer;

    box-shadow:
        0 5px 12px rgba(61, 48, 37, 0.09),

        0 2px 4px rgba(61, 48, 37, 0.06),

        inset 0 1px 0 rgba(255, 255, 255, 0.94),

        inset 0 -1px 0 rgba(108, 94, 80, 0.18);

    transform:
        translateY(0) scaleX(1) scaleY(1);

    transform-origin:
        center center;

    transition:
        color 240ms ease,

        background 360ms cubic-bezier(0.22, 1, 0.36, 1),

        box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),

        transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* =================================================
   2. Metallic Light Sweep
================================================= */

.sv-bundle-preview-option__cart::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        linear-gradient(108deg,
            transparent 12%,
            rgba(255, 255, 255, 0.12) 34%,
            rgba(255, 255, 255, 0.68) 48%,
            rgba(255, 255, 255, 0.10) 62%,
            transparent 84%);

    transform:
        translateX(-125%);

    transition:
        transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* =================================================
   3. Warm Compression Layer
================================================= */

.sv-bundle-preview-option__cart::after {

    content: "";

    position: absolute;

    inset: 1px;

    z-index: -2;

    border-radius: inherit;

    pointer-events: none;

    background:
        radial-gradient(ellipse at center,
            rgba(108, 88, 71, 0.20),
            rgba(108, 88, 71, 0.05) 48%,
            transparent 74%);

    opacity: 0;

    transform:
        scale(0.72);

    transition:
        opacity 180ms ease,
        transform 180ms ease;
}


/* =================================================
   4. Hover
================================================= */

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

    .sv-bundle-preview-option__cart:hover {

        background:
            linear-gradient(135deg,
                #fffdfa 0%,
                #e5ded4 25%,
                #c0b5a9 48%,
                #eee7de 72%,
                #c9beb3 100%) padding-box,

            linear-gradient(135deg,
                #a79c91,
                #ffffff 25%,
                #93877b 54%,
                #f3eee7 76%,
                #a09589) border-box;

        box-shadow:
            0 6px 14px rgba(61, 48, 37, 0.11),

            0 2px 5px rgba(61, 48, 37, 0.07),

            inset 0 1px 0 rgba(255, 255, 255, 0.96);

        transform:
            translateY(1px) scaleX(0.99) scaleY(0.985);
    }


    .sv-bundle-preview-option__cart:hover::before {

        transform:
            translateX(125%);
    }

}


/* =================================================
   5. Press / Compression
================================================= */

.sv-bundle-preview-option__cart:active {

    color:
        #f8f4ee;

    background:
        linear-gradient(145deg,
            #d0c5b9,
            #a59687 48%,
            #c3b6a9) padding-box,

        linear-gradient(145deg,
            #8e7e6f,
            #e5ddd3,
            #857565) border-box;

    box-shadow:
        inset 0 3px 8px rgba(67, 51, 38, 0.22),

        inset 0 1px 2px rgba(45, 34, 25, 0.10);

    /*
   * The object is being compressed inward.
   */
    transform:
        translateY(2px) scaleX(0.965) scaleY(0.93);
}


.sv-bundle-preview-option__cart:active::after {

    opacity: 1;

    transform:
        scale(1.12);
}


/* =================================================
   6. Loading State
================================================= */

.sv-bundle-preview-option__cart.is-loading {

    cursor: wait;

    pointer-events: none;

    color:
        #66594d;

    opacity: 0.78;

    transform:
        translateY(1px) scaleX(0.985) scaleY(0.96);
}


/* =================================================
   7. Added State
================================================= */

.sv-bundle-preview-option__cart.is-added {

    color:
        #f8f4ee;

    background:
        linear-gradient(135deg,
            #817262,
            #665444 52%,
            #817161) padding-box,

        linear-gradient(135deg,
            #a99886,
            #514238,
            #b0a08f) border-box;

    box-shadow:
        0 5px 12px rgba(74, 58, 45, 0.16),

        inset 0 1px 0 rgba(255, 255, 255, 0.24);

    transform:
        translateY(1px) scaleX(0.985) scaleY(0.96);
}


/* =================================================
   8. Added Compression Ripple
================================================= */

.sv-bundle-preview-option__cart.is-added::after {

    opacity: 0.72;

    transform:
        scale(1.08);
}


/* =================================================
   9. Focus
================================================= */

.sv-bundle-preview-option__cart:focus-visible {

    outline: none;

    box-shadow:
        0 0 0 2px rgba(107, 88, 72, 0.22),

        0 6px 14px rgba(61, 48, 37, 0.10),

        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}


/* =================================================
   10. Mobile
================================================= */

@media (max-width: 768px) {

    .sv-bundle-preview-option__cart {

        min-height: 36px;

        padding:
            0 14px;

        font-size: 9px;
    }

}


/* =================================================
   11. Reduced Motion
================================================= */

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

    .sv-bundle-preview-option__cart,
    .sv-bundle-preview-option__cart::before,
    .sv-bundle-preview-option__cart::after {

        transition: none;
    }

}