/* Speelse laag bovenop de basisstijl (2026-09-25). Kleur blijft accent; tekst blijft grijs. */
:root{--spring:cubic-bezier(.34,1.56,.64,1);--tint-sage:color-mix(in oklab,var(--sage) 22%,var(--bone));--tint-gold:color-mix(in oklab,var(--gold) 18%,var(--bone));--tint-lilac:color-mix(in oklab,var(--lilac) 30%,var(--bone))}

/* Eyebrow: sterretje in plaats van streepje */
.eyebrow:before{content:"✦";width:auto;height:auto;background:none;color:var(--gold);font-size:.95rem;letter-spacing:0;line-height:1;animation:twinkle 3.2s ease-in-out infinite}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(.7) rotate(45deg);opacity:.6}}

/* Cursief accent in koppen krijgt een getekende onderstreping */
h1 em,h2 em{position:relative;display:inline-block}
h1 em:after,h2 em:after{content:"";position:absolute;left:2%;right:0;bottom:-.02em;height:.22em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C 40 4, 80 4, 110 11 S 170 18, 197 6' fill='none' stroke='%23dea74c' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;transform-origin:left;animation:draw 1.2s .4s var(--ease) both}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Knoppen: verend en levendig */
.btn{transition:background .25s var(--ease-soft),color .25s var(--ease-soft),transform .35s var(--spring),box-shadow .35s var(--ease-soft)}
.btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 14px 30px -14px color-mix(in oklab,var(--ink) 55%,transparent)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:hover .arrow{animation:nudge .6s var(--ease) infinite alternate}
@keyframes nudge{to{transform:translate(5px)}}

/* Hero: organische fotovorm die langzaam ademt */
.hero__photo,.page-hero__media{border-radius:46% 54% 42% 58%/38% 44% 56% 62%!important;overflow:hidden;animation:breathe 14s ease-in-out infinite alternate}
.hero__photo img,.page-hero__media img{border-radius:inherit}
@keyframes breathe{0%{border-radius:46% 54% 42% 58%/38% 44% 56% 62%}50%{border-radius:58% 42% 55% 45%/45% 58% 42% 55%}100%{border-radius:42% 58% 48% 52%/55% 40% 60% 45%}}
.hero__caption{transform:rotate(-3deg)}

/* Kaarten van de praktijken: boogvormige foto, zacht kantelen bij hover */
.practice.card{border-radius:28px;transition:transform .45s var(--spring),box-shadow .35s var(--ease-soft),border-color .25s}
.practice .practice__media{margin:12px 12px 0;border-radius:999px 999px 18px 18px;aspect-ratio:1/1}
.practice.card:nth-child(odd):hover{transform:translateY(-8px) rotate(-1.2deg)}
.practice.card:nth-child(even):hover{transform:translateY(-8px) rotate(1.2deg)}
.practice.card:hover{box-shadow:0 26px 50px -30px color-mix(in oklab,var(--ink) 60%,transparent);border-color:var(--gold)}
.practice__num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--tint-gold);color:var(--blush-deep)!important;letter-spacing:0;align-self:flex-start}
.practice.card:nth-child(3n+2) .practice__num{background:var(--tint-sage)!important;color:var(--sage-deep)!important}
.practice.card:nth-child(3n) .practice__num{background:var(--tint-lilac);color:var(--ink)!important}

/* Galerij: afwisselende vormen */
.gallery__item{transition:transform .5s var(--spring)}
.gallery__item:nth-child(3n+1){border-radius:999px 999px 24px 24px!important}
.gallery__item:nth-child(3n+2){border-radius:24px 80px 24px 80px!important}
.gallery__item:nth-child(3n){border-radius:40% 60% 55% 45%/50% 45% 55% 50%!important}
.gallery__item,.gallery__item img{overflow:hidden}
.gallery__item img{border-radius:inherit}
.gallery__item:hover{transform:scale(1.02) rotate(-.8deg)}

/* Ervaringen: zachte gekleurde briefjes, licht scheef */
.testimonials__grid blockquote,.quote{position:relative;border-radius:26px!important;transition:transform .45s var(--spring)}
.testimonials__grid > *:nth-child(3n+1),.quotes-grid > .quote:nth-child(3n+1){background:var(--tint-sage)!important;transform:rotate(-1deg)}
.testimonials__grid > *:nth-child(3n+2),.quotes-grid > .quote:nth-child(3n+2){background:var(--tint-gold)!important;transform:rotate(.8deg)}
.testimonials__grid > *:nth-child(3n),.quotes-grid > .quote:nth-child(3n){background:var(--tint-lilac)!important;transform:rotate(-.6deg)}
.testimonials__grid > *:hover,.quotes-grid > .quote:hover{transform:rotate(0) translateY(-4px)}

/* Uitnodiging onderaan: zwevende bolletjes */
.cta__card{position:relative;overflow:hidden;isolation:isolate}
.cta__card:before,.cta__card:after{content:"";position:absolute;border-radius:50%;z-index:-1;animation:float 9s ease-in-out infinite alternate}
.cta__card:before{width:180px;height:180px;left:-50px;bottom:-60px;background:color-mix(in oklab,var(--gold) 45%,transparent)}
.cta__card:after{width:110px;height:110px;right:8%;top:-40px;background:color-mix(in oklab,var(--bone) 55%,transparent);animation-duration:7s}
@keyframes float{to{transform:translate(24px,-18px) scale(1.08)}}

/* FAQ: plusje draait verend */
.faq__icon{transition:transform .45s var(--spring)}

/* Footer: golvende bovenrand */
.foot{position:relative}
.foot:before{content:"";position:absolute;left:0;right:0;top:-38px;height:40px;background:var(--ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40 V22 C 180 0, 360 0, 540 18 S 900 40, 1080 18 S 1320 0, 1440 16 V40 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40 V22 C 180 0, 360 0, 540 18 S 900 40, 1080 18 S 1320 0, 1440 16 V40 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}

/* Verschijnen met een klein veertje */
.reveal{transform:translateY(28px) scale(.98);transition:opacity .8s var(--ease-soft),transform .9s var(--spring)}

@media (max-width:640px){
  .practice.card:hover,.gallery__item:hover{transform:none}
  .testimonials__grid > *,.quotes-grid > .quote{transform:none!important}
}
@media (prefers-reduced-motion:reduce){
  .eyebrow:before,h1 em:after,h2 em:after,.hero__photo,.page-hero__media,.cta__card:before,.cta__card:after,.btn:hover .arrow{animation:none!important}
}