/* Gladiator Protein — motion-plus (GSAP-laag).
   Aanvulling op motion.css. Alles hangt aan html.gp-plus: die klasse zet motion-plus.js pas
   nadat GSAP en ScrollTrigger echt geladen zijn. Zonder JS of zonder GSAP verandert er dus niets.
   Alleen opacity/transform/clip-path; geen layout-eigenschappen. */

/* ---------- 1. HEADER: rustige overgang bij scrollen (de klasse .scrolled komt van main.js) -- */

html.gp-plus .site-header{will-change:background}
html.gp-plus .site-header.scrolled{box-shadow:0 14px 34px #000000a8;border-bottom-color:#ffffff1f}

/* ---------- 2. 3D-TILT op productkaarten (alleen desktop; JS bepaalt of het actief is) ------ */

/* Tijdens het kantelen mag de CSS-transitie niet met GSAP vechten. */
html.gp-plus .gp-tilting{transition:none!important}
html.gp-plus .series-track,html.gp-plus .woocommerce ul.products{perspective:1100px}
html.gp-plus .woocommerce ul.products li.product{transform-style:preserve-3d}
/* De hover-lift van .product-card blijft in CSS staan als vangnet voor toestellen zonder
   fijne pointer; op desktop neemt GSAP dezelfde -6px over, nu met een lichte tilt erbij. */

/* ---------- 3. ADD-TO-CART: micro-interactie, puur CSS ------------------------------------ */

html.gp-plus .single_add_to_cart_button{transition:background .2s,box-shadow .3s,transform .18s ease}
html.gp-plus .single_add_to_cart_button:hover{box-shadow:0 12px 28px #a30f1840}
html.gp-plus .single_add_to_cart_button:active{transform:translateY(1px) scale(.99)}
html.gp-plus .single_add_to_cart_button:focus-visible{box-shadow:0 0 0 3px #ed536055}

/* ---------- 4. TABS / ACCORDIONS: zachte overgang, geen functionele ingreep --------------- */

html.gp-plus .woocommerce-tabs .wc-tab{scroll-margin-top:140px}
html.gp-plus .woocommerce-tabs .panel>*{transition:opacity .35s ease}
html.gp-plus .gp-info-body>*{transition:opacity .35s ease}

/* ---------- 5. CLIP-PATH BEELD-REVEALS ---------------------------------------------------- */

html.gp-plus .gp-clip{will-change:clip-path;backface-visibility:hidden}

/* ---------- 6. MINDER EFFECT OP KLEINE SCHERMEN ------------------------------------------ */

@media(max-width:960px){
  html.gp-plus .series-track,html.gp-plus .woocommerce ul.products{perspective:none}
}
@media(max-width:760px){
  html.gp-plus .site-header.scrolled{backdrop-filter:blur(12px)}
}

/* ---------- 7. ACCESSIBILITY -------------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){
  html.gp-plus .site-header.scrolled{box-shadow:none}
  html.gp-plus .gp-clip{clip-path:none!important;will-change:auto}
  html.gp-plus .single_add_to_cart_button:active{transform:none}
  html.gp-plus .single_add_to_cart_button:hover{box-shadow:none}
}