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

Space Vanta Theme 1.0

Module:
Bundle Preview Interaction

File:
public/brand/bundle/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;
  }

}