/* Cosmoface premium motion v1 (2026-11-09)
   Additief: wijzigt geen functies, formulieren, prijzen of links.
   Alles zit onder .cfpm-* en wordt pas actief als cf-premium-motion.js de klasse cfpm-on op <html> zet. */

:root{
  --cfpm-gold:#d8b27a;
  --cfpm-gold-2:#f3dcb4;
  --cfpm-rose:#f2b8b8;
  --cfpm-ink:#1a1420;
  --cfpm-glass:rgba(255,255,255,.08);
  --cfpm-line:rgba(255,255,255,.18);
  --cfpm-ease:cubic-bezier(.22,.8,.24,1);
}

/* ---------- Hero: productpodium ---------- */
.cfpm-on .csmfxvr98214-layout.cfpm-two{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:48px;align-items:start}
.cfpm-stage{position:relative;display:none}
.cfpm-on .cfpm-two .cfpm-stage{display:block;margin-top:8px}
@media (max-width:1099px){
  .cfpm-on .csmfxvr98214-layout.cfpm-two{grid-template-columns:minmax(0,1fr)}
  .cfpm-on .cfpm-two .cfpm-stage{display:none}
}
.cfpm-stage-inner{position:relative;height:400px;perspective:1200px}
.cfpm-ring{position:absolute;inset:0;transform-style:preserve-3d}
.cfpm-slide{
  position:absolute;left:50%;top:50%;width:300px;margin:-180px 0 0 -150px;
  display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:22px;
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  border:1px solid var(--cfpm-line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 80px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.18);
  color:#fff;text-decoration:none;opacity:0;pointer-events:none;
  transform:translate3d(60px,0,-220px) rotateY(-18deg) scale(.86);
  transition:transform 1.1s var(--cfpm-ease),opacity .9s var(--cfpm-ease);
}
.cfpm-slide.is-prev{opacity:.0;transform:translate3d(-80px,0,-260px) rotateY(18deg) scale(.82)}
.cfpm-slide.is-next{opacity:.35;transform:translate3d(90px,20px,-300px) rotateY(-22deg) scale(.78)}
.cfpm-slide.is-active{opacity:1;pointer-events:auto;transform:translate3d(0,0,0) rotateY(0) scale(1)}
.cfpm-slide:focus-visible{outline:3px solid #fff;outline-offset:4px}
.cfpm-photo{position:relative;display:grid;place-items:center;height:250px;border-radius:16px;background:radial-gradient(120% 90% at 50% 20%,#fff 0%,#f6eef1 70%,#eadde2 100%);overflow:hidden}
.cfpm-photo img{max-width:86%;max-height:88%;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(40,20,30,.25))}
.cfpm-slide.is-active .cfpm-photo img{animation:cfpm-float 6s ease-in-out infinite}
.cfpm-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.65) 48%,transparent 62%);transform:translateX(-120%)}
.cfpm-slide.is-active .cfpm-photo::after{animation:cfpm-sheen 1.6s .35s var(--cfpm-ease) 1 both}
.cfpm-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cfpm-name{font:700 18px/1.25 Manrope,Inter,sans-serif;letter-spacing:-.01em}
.cfpm-cat{display:block;margin-top:4px;font:500 12px/1.3 Inter,sans-serif;color:rgba(255,255,255,.72);letter-spacing:.06em;text-transform:uppercase}
.cfpm-go{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--cfpm-rose);color:var(--cfpm-ink);font-weight:800;transition:transform .3s var(--cfpm-ease)}
.cfpm-slide:hover .cfpm-go{transform:translateX(4px)}
.cfpm-dots{position:absolute;left:0;right:0;bottom:4px;display:flex;justify-content:center;gap:8px}
.cfpm-dots button{width:8px;height:8px;padding:0;border:0;border-radius:8px;background:rgba(255,255,255,.35);cursor:pointer;transition:width .4s var(--cfpm-ease),background .4s}
.cfpm-dots button[aria-current="true"]{width:28px;background:var(--cfpm-gold-2)}
.cfpm-dots button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cfpm-halo{position:absolute;left:50%;top:46%;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(216,178,122,.0),rgba(216,178,122,.35),rgba(242,184,184,.25),rgba(216,178,122,0));
  filter:blur(40px);animation:cfpm-spin 18s linear infinite;pointer-events:none}

/* ---------- Badge "Meest gevraagd" ---------- */
.cfpm-badge{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  font:700 11px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#3a2614;
  background:linear-gradient(110deg,var(--cfpm-gold) 0%,var(--cfpm-gold-2) 40%,var(--cfpm-gold) 60%,#c99b5c 100%);background-size:220% 100%;
  box-shadow:0 6px 16px rgba(160,110,50,.28);animation:cfpm-shimmer 4.5s ease-in-out infinite}
.cfpm-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#3a2614;opacity:.7}
.cfpm-card-host{position:relative}

/* ---------- Kaarten: inschuiven + lift ---------- */
.cfpm-on .cfpm-reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--cfpm-ease),transform .8s var(--cfpm-ease);transition-delay:var(--cfpm-d,0ms)}
.cfpm-on .cfpm-reveal.is-in{opacity:1;transform:none}
.cfpm-on .cfpm-lift{transition:transform .45s var(--cfpm-ease),box-shadow .45s var(--cfpm-ease),border-color .3s}
.cfpm-on .cfpm-lift:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(74,37,53,.14)}
.cfpm-on .cfpm-lift img{transition:transform .7s var(--cfpm-ease)}
.cfpm-on .cfpm-lift:hover img{transform:scale(1.045)}

/* ---------- Volumesignaal ---------- */
.cfpm-vol{display:inline-flex;align-self:flex-start;width:max-content;max-width:100%;align-items:center;gap:6px;margin-top:8px;padding:3px 9px;border-radius:999px;border:1px solid rgba(201,155,92,.55);background:rgba(243,220,180,.28);color:#7a5426;font-size:12px;font-weight:700;letter-spacing:.01em;line-height:1.4;text-decoration:none}
.cfpm-vol::before{content:"";width:10px;height:10px;flex:0 0 auto;background:linear-gradient(#c99b5c,#c99b5c) 0 100%/3px 50% no-repeat,linear-gradient(#c99b5c,#c99b5c) 50% 100%/3px 75% no-repeat,linear-gradient(#c99b5c,#c99b5c) 100% 100%/3px 100% no-repeat}
.cfpm-volbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin:18px 0 4px;padding:14px 18px;border:1px solid rgba(201,155,92,.45);border-radius:14px;background:linear-gradient(110deg,rgba(243,220,180,.32),rgba(255,255,255,.6));color:#52213a;font-size:15px;line-height:1.5}
.cfpm-volbar a{flex:0 0 auto;padding:10px 16px;border-radius:10px;background:#52213a;color:#fff!important;font-weight:700;text-decoration:none;transition:transform .3s var(--cfpm-ease),box-shadow .3s var(--cfpm-ease)}
.cfpm-volbar a:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(82,33,58,.22)}
@media (max-width:600px){.cfpm-volbar{flex-direction:column;align-items:stretch}.cfpm-volbar a{text-align:center}}

/* ---------- Merkenband: rustige marquee ---------- */
.cfpm-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cfpm-marquee-track{display:flex;gap:48px;width:max-content;animation:cfpm-marquee 40s linear infinite}
.cfpm-marquee:hover .cfpm-marquee-track{animation-play-state:paused}

@keyframes cfpm-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-1.2deg)}}
@keyframes cfpm-sheen{to{transform:translateX(120%)}}
@keyframes cfpm-spin{to{transform:rotate(360deg)}}
@keyframes cfpm-shimmer{0%,100%{background-position:100% 0}50%{background-position:0 0}}
@keyframes cfpm-marquee{to{transform:translateX(-50%)}}

/* ---------- Toegankelijkheid: minder beweging ---------- */
@media (prefers-reduced-motion:reduce){
  .cfpm-slide,.cfpm-on .cfpm-reveal,.cfpm-on .cfpm-lift,.cfpm-on .cfpm-lift img{transition:none!important}
  .cfpm-on .cfpm-reveal{opacity:1;transform:none}
  .cfpm-photo img,.cfpm-photo::after,.cfpm-halo,.cfpm-badge,.cfpm-marquee-track{animation:none!important}
}