/*
================================================================
Space Vanta Theme 2.0
Module: DNA button system
Path: public/sv-ui/buttons.css
Version: SVUI-BUTTONS-001

One look for every primary / secondary button the new modules draw:
cart preview, cart page, PDP purchase, phone docks.

  Layer 0  plate   metal, offset down-right, blue edge on its rim
  Layer 1  face    the part: blue (primary) or silver (secondary),
                   chamfered corners, one fracture line across it
  Motion   hover   the face lifts off the plate (plate stays put),
                   the fracture line slides
           press   the face docks onto the plate
           busy    a light runs along the face

Loaded after the module stylesheets so it only refines them.
Nothing here touches the header or other templates' buttons.
Off with prefers-reduced-motion and <html data-sv-motion="calm">.
================================================================
*/

:root {
  --svb-blue: var(--sv-blue, #1d6bff);
  --svb-blue-hi: var(--sv-blue-2, #4d8dff);
  --svb-blue-lo: #1458e0;
  --svb-metal: linear-gradient(135deg, #f7f8fa 0%, #c9cbd1 26%, #eef0f4 50%, #b9c1ce 76%, #f4f5f8 100%);
  --svb-cut: 12px;
  --svb-off: 9px;
}

/* ---------- wrapper = the plate ---------- */

html .svcp__ctawrap,
html .svpg__ctawrap,
html .sv-product-purchase-add-to-cart__plate,
html .sv-product-purchase-shop-now__plate {
  position: relative;
  padding: 0 var(--svb-off) var(--svb-off) 0;
}

html .svcp__ctawrap::before,
html .svpg__ctawrap::before,
html .sv-product-purchase-add-to-cart__plate::before,
html .sv-product-purchase-shop-now__plate::before {
  left: var(--svb-off);
  top: var(--svb-off);
  background:
    repeating-linear-gradient(135deg, rgba(37, 35, 33, 0.1) 0 1px, rgba(37, 35, 33, 0) 1px 5px),
    var(--svb-metal);
  box-shadow: inset -1.5px -1.5px 0 var(--svb-blue);
  clip-path: polygon(var(--svb-cut) 0, 100% 0, 100% calc(100% - var(--svb-cut)), calc(100% - var(--svb-cut)) 100%, 0 100%, 0 var(--svb-cut));
}

/* a small blue shard that sits off the top-right corner of the face */
html .svcp__ctawrap,
html .svpg__ctawrap,
html .sv-product-purchase-add-to-cart__plate {
  background:
    linear-gradient(225deg, var(--svb-blue) 0 50%, rgba(29, 107, 255, 0) 50%) top right / var(--svb-off) var(--svb-off) no-repeat;
}

/* ---------- primary face ---------- */

html .svcp__cta,
html .svpg__cta,
html .sv-product-purchase-add-to-cart__button {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0) 0 66%, rgba(255, 255, 255, 0.34) 66% 66.6%, rgba(255, 255, 255, 0) 66.6% 69%, rgba(255, 255, 255, 0.12) 69% 78%, rgba(255, 255, 255, 0) 78%) 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, #2678ff 0%, var(--svb-blue) 52%, var(--svb-blue-lo) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(8, 40, 120, 0.35);
  letter-spacing: 0.04em;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), background-position 0.5s ease, filter 0.2s ease;
}

html .svcp__ctawrap:hover .svcp__cta,
html .svpg__ctawrap:hover .svpg__cta,
html .sv-product-purchase-add-to-cart__plate:hover .sv-product-purchase-add-to-cart__button {
  transform: translate(-4px, -4px);
  background-position: 6% 0, 0 0;
}
html .svcp__ctawrap:active .svcp__cta,
html .svpg__ctawrap:active .svpg__cta,
html .sv-product-purchase-add-to-cart__plate:active .sv-product-purchase-add-to-cart__button {
  transform: translate(3px, 3px);
  transition-duration: 0.08s;
}

/* ---------- secondary face (silver) ---------- */

html .sv-product-purchase-shop-now__button {
  background: linear-gradient(180deg, #ffffff 0%, #eceff3 100%);
  box-shadow: inset 0 0 0 1.5px #aeb6c2, inset 0 -1px 0 rgba(120, 130, 146, 0.35);
  letter-spacing: 0.08em;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease, color 0.2s ease;
}
html .sv-product-purchase-shop-now__plate:hover .sv-product-purchase-shop-now__button { transform: translate(-4px, -4px); }
html .sv-product-purchase-shop-now__plate:active .sv-product-purchase-shop-now__button { transform: translate(3px, 3px); transition-duration: 0.08s; }
html .sv-product-purchase-shop-now__button:hover { box-shadow: inset 0 0 0 1.5px var(--svb-blue); color: var(--svb-blue); }

/* ---------- quiet link ---------- */

html .svcp__link:hover,
html .svpg__link:hover { color: var(--svb-blue); }

/* ---------- busy: a light runs along the face ---------- */

html .svcp__cta[aria-busy="true"],
html .svpg__cta[aria-busy="true"] { filter: saturate(0.75); cursor: progress; }

/* ---------- motion off ---------- */

html[data-sv-motion="calm"] .svcp__cta,
html[data-sv-motion="calm"] .svpg__cta,
html[data-sv-motion="calm"] .sv-product-purchase-add-to-cart__button,
html[data-sv-motion="calm"] .sv-product-purchase-shop-now__button { transition: none !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .svcp__cta, .svpg__cta,
  .sv-product-purchase-add-to-cart__button,
  .sv-product-purchase-shop-now__button { transition: none !important; transform: none !important; }
}