/* Gladiator Protein — motion-laag.
   Alles hier is een aanvulling op de bestaande huisstijl: geen nieuwe kleuren, geen nieuwe
   lettertypes, alleen beweging. Progressive enhancement: de regels werken alleen als motion.js
   de klasse .gp-motion-ready op <html> zet, en zonder JS blijft de site exact zoals voorheen.
   Alleen opacity/transform worden geanimeerd (geen layout shifts). */

/* ---------- 1. HERO: korte loopvideo + beweging op de bestaande afbeelding ---------- */

/* De video ligt als laag over de bestaande hero-afbeelding. De afbeelding blijft staan als
   LCP-beeld en als fallback wanneer de video niet geladen wordt (mobiel, spaarstand, reduced motion). */
.hero .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 54%;z-index:-3;opacity:0;transition:opacity .9s ease}
.hero .hero-video.is-ready{opacity:1}

/* Zolang er geen video actief is, krijgt de hero-afbeelding een zeer langzame zoom/pan. */
html.gp-motion-ready .hero-photo{animation:gp-kenburns 26s ease-in-out infinite alternate;will-change:transform}
html.gp-motion-ready .hero.has-video .hero-photo{animation:none}
@keyframes gp-kenburns{
  from{transform:scale(1.015) translate3d(0,0,0)}
  to{transform:scale(1.085) translate3d(-1.2%,-.9%,0)}
}

/* ---------- 2. PRODUCTKAARTEN: hover-lift, zoom, zachte glow, knop-animatie ---------- */

html.gp-motion-ready .product-card{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
html.gp-motion-ready .product-card:hover{transform:translateY(-6px)}
html.gp-motion-ready .product-card:hover .product-picture{
  box-shadow:0 24px 48px #000000a8,0 0 30px #a30f1830
}
html.gp-motion-ready .product-card:hover .product-picture img{
  transform:translateY(-8px) rotate(-2.5deg) scale(1.07)
}
html.gp-motion-ready .product-picture img{transition:transform .55s cubic-bezier(.22,.61,.36,1)}
html.gp-motion-ready .round-arrow{
  transition:transform .3s cubic-bezier(.22,.61,.36,1),background .3s,color .3s
}
html.gp-motion-ready .product-card:hover .round-arrow{background:var(--bright);color:#fff;transform:translate(3px,-3px)}
html.gp-motion-ready .product-card>.text-link{transition:color .25s,border-color .25s,transform .25s cubic-bezier(.22,.61,.36,1)}
html.gp-motion-ready .product-card:hover>.text-link{transform:translateY(-2px)}

/* Tweede productfoto (indien aanwezig) wisselt vloeiend bij hover. */
html.gp-motion-ready .product-picture{overflow:hidden}
html.gp-motion-ready .product-picture .gp-alt-image{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#101010;
  opacity:0;transition:opacity .45s cubic-bezier(.22,.61,.36,1)
}
html.gp-motion-ready .product-card:hover .product-picture .gp-alt-image{opacity:1}

/* ---------- 3. SCROLL REVEAL: fade-in + kleine beweging, eenmalig, met stagger ---------- */

html.gp-motion-ready .will-reveal{
  transition:opacity .56s cubic-bezier(.22,.61,.36,1),transform .56s cubic-bezier(.22,.61,.36,1)
}
html.gp-motion-ready .gp-motion-item{will-change:opacity,transform}
html.gp-motion-ready .gp-motion-item.visible{will-change:auto}

/* ---------- 4. PACKS: het pakket wordt zichtbaar opgebouwd ---------- */

html.gp-motion-ready .starter-stack.gp-building .stack-products img{
  opacity:0;transform:translateY(26px) scale(.96);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)
}
html.gp-motion-ready .starter-stack.gp-building .stack-products img:nth-child(1){transition-delay:.05s}
html.gp-motion-ready .starter-stack.gp-building .stack-products img:nth-child(2){transition-delay:.22s}
html.gp-motion-ready .starter-stack.gp-building .stack-products img:nth-child(3){transition-delay:.39s}
html.gp-motion-ready .starter-stack.gp-building .stack-price{
  opacity:0;transform:translateY(18px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay:.6s
}
html.gp-motion-ready .starter-stack.gp-building .stack-copy .button{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1);
  transition-delay:.78s
}
html.gp-motion-ready .starter-stack.gp-building.is-built .stack-products img,
html.gp-motion-ready .starter-stack.gp-building.is-built .stack-price,
html.gp-motion-ready .starter-stack.gp-building.is-built .stack-copy .button{opacity:1;transform:none}

/* ---------- 5. BUILT DIFFERENT: rustig bewegende achtergrond ---------- */

html.gp-motion-ready .gp-brand-note{position:relative;overflow:hidden;isolation:isolate}
html.gp-motion-ready .gp-brand-note::before{
  content:'';position:absolute;inset:-25%;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 24% 30%,#a30f1824 0 220px,transparent 520px),
    radial-gradient(circle at 76% 72%,#ffffff12 0 190px,transparent 480px);
  animation:gp-drift 26s ease-in-out infinite alternate
}
html.gp-motion-ready .gp-brand-note>*{position:relative;z-index:1}
@keyframes gp-drift{
  from{transform:translate3d(-2%,-1.4%,0) scale(1)}
  to{transform:translate3d(2%,1.6%,0) scale(1.07)}
}

/* ---------- 6. PREMIUM PRODUCT SHOWCASE (Whey-sectie) ---------- */

/* De pot blijft centraal en houdt zijn bestaande float-animatie; de gloed erachter ademt. */
html.gp-motion-ready .feature-visual:before{animation:gp-breathe 14s ease-in-out infinite alternate}
@keyframes gp-breathe{
  from{transform:scale(.95) translateY(0);opacity:.13}
  to{transform:scale(1.09) translateY(-12px);opacity:.2}
}
html.gp-motion-ready .feature-visual .giant-outline{will-change:transform}

/* ---------- 7. MICRO-ANIMATIES: buttons, navigatie, links, iconen ---------- */

html.gp-motion-ready .button{
  transition:background .2s,color .2s,border-color .2s,
             transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s cubic-bezier(.22,.61,.36,1)
}
html.gp-motion-ready .button:active{transform:translateY(0) scale(.985)}
html.gp-motion-ready .button>span{display:inline-block;transition:transform .25s cubic-bezier(.22,.61,.36,1)}
html.gp-motion-ready .button:hover>span{transform:translate(3px,-3px)}
/* Glow alleen op de eigen merk-knoppen, niet op WooCommerce-knoppen in de shop. */
html.gp-motion-ready .hero-actions .button:hover,
html.gp-motion-ready .stack-copy .button:hover,
html.gp-motion-ready .buy-row .button:hover,
html.gp-motion-ready .tool-card .button:hover{box-shadow:0 14px 30px #a30f1840}

/* Navigatie: zachte underline-animatie (alleen de desktopnav; mobiel is een uitklapmenu). */
@media(min-width:961px){
  html.gp-motion-ready .site-header #main-nav a{position:relative}
  html.gp-motion-ready .site-header #main-nav a::after{
    content:'';position:absolute;left:0;right:0;bottom:26px;height:2px;background:var(--bright);
    transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,.61,.36,1)
  }
  html.gp-motion-ready .site-header #main-nav a:hover::after,
  html.gp-motion-ready .site-header #main-nav a:focus-visible::after{transform:scaleX(1)}
}

html.gp-motion-ready a{transition:color .25s}
html.gp-motion-ready .text-link{transition:color .25s,border-color .25s,transform .25s cubic-bezier(.22,.61,.36,1)}
html.gp-motion-ready .gp-account-panel>a{transition:color .25s,padding-left .25s}
html.gp-motion-ready .gp-account-panel>a:hover{padding-left:4px}

/* Iconen komen kort tot leven zodra hun kaart in beeld verschijnt. */
@keyframes gp-pop{
  0%{transform:scale(.72);opacity:0}
  60%{transform:scale(1.09);opacity:1}
  100%{transform:scale(1);opacity:1}
}
html.gp-motion-ready .category-card.visible .category-image b,
html.gp-motion-ready .gp-motion-item.visible .round-arrow{animation:gp-pop .5s cubic-bezier(.22,.61,.36,1) .12s both}

/* ---------- 8. MOBIEL / LICHT ---------- */

@media(max-width:760px){
  html.gp-motion-ready .hero-video{display:none}
  html.gp-motion-ready .gp-brand-note::before{animation:none}
  html.gp-motion-ready .feature-visual:before{animation:none}
  html.gp-motion-ready .hero-photo{animation-duration:34s}
  html.gp-motion-ready .product-card:hover{transform:none}
}

/* ---------- 9. ACCESSIBILITY ---------- */

@media(prefers-reduced-motion:reduce){
  .hero .hero-video{display:none}
  html.gp-motion-ready .hero-photo,
  html.gp-motion-ready .gp-brand-note::before,
  html.gp-motion-ready .feature-visual:before,
  html.gp-motion-ready .category-card.visible .category-image b,
  html.gp-motion-ready .gp-motion-item.visible .round-arrow{animation:none!important}
  html.gp-motion-ready .product-card:hover,
  html.gp-motion-ready .product-card:hover .product-picture img,
  html.gp-motion-ready .product-card:hover>.text-link,
  html.gp-motion-ready .product-card:hover .round-arrow{transform:none}
  html.gp-motion-ready .starter-stack.gp-building .stack-products img,
  html.gp-motion-ready .starter-stack.gp-building .stack-price,
  html.gp-motion-ready .starter-stack.gp-building .stack-copy .button{opacity:1!important;transform:none!important}
}