/* ===== Tilroy fx: gekozen interacties ===== */
:root{--fxE:cubic-bezier(.16,1,.3,1)}
/* Lift en druk */
.btn.a,.btn.k{transition:transform .25s var(--fxE),box-shadow .25s var(--fxE),background .2s,filter .2s}
.btn.a:hover{transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(0,133,66,.65)}
.btn.k:hover{transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(10,42,24,.55)}
.btn:active{transform:translateY(1px) scale(.98)!important;box-shadow:0 4px 10px -6px rgba(0,133,66,.6)!important;transition-duration:.08s!important}
/* Pijl schuift */
.btn .ic:not(.ic-s),.lnk .ic:not(.ic-s){transition:transform .3s var(--fxE)}
.btn:hover .ic:not(.ic-s),a:hover>.lnk .ic:not(.ic-s),.lnk:hover .ic:not(.ic-s),a.card:hover .lnk .ic:not(.ic-s){transform:translateX(4px)}
/* Glijdende pill in het hoofdmenu */
.hx nav[aria-label="Hoofdmenu"]{position:relative;gap:2px!important}
.hx nav[aria-label="Hoofdmenu"]>a{position:relative;z-index:1;border-bottom:0!important;margin-bottom:0!important;padding:9px 14px;border-radius:999px;transition:color .25s}
.hx nav[aria-label="Hoofdmenu"]>a:hover,.hx nav[aria-label="Hoofdmenu"]>a.fx-on{color:#0A2A18}
.hx nav[aria-label="Hoofdmenu"] .fx-ind{position:absolute;z-index:0;top:50%;height:38px;margin-top:-19px;left:0;width:0;background:#E6F6EE;border-radius:999px;opacity:0;transition:left .45s var(--fxE),width .45s var(--fxE),opacity .25s;pointer-events:none}
.hx nav[aria-label="Hoofdmenu"] .fx-ind.on{opacity:1}
/* Lift + zachte schaduw, beeld zoomt */
a.card{transition:transform .35s var(--fxE),box-shadow .35s var(--fxE)!important}
a.card:hover{transform:translateY(-4px)!important;box-shadow:0 0 0 1px #CFE5D7,0 26px 44px -28px rgba(10,42,24,.45)!important}
.fx-imw{display:block;overflow:hidden}
.fx-imw>img{transition:transform .8s var(--fxE)}
a.card:hover .fx-imw>img{transform:scale(1.05)}
/* Spotlight-rand op donkere kaarten */
.fx-spot-host{position:relative}
.fx-spot{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;opacity:0;transition:opacity .3s;padding:1.5px;
 background:radial-gradient(260px circle at var(--x,50%) var(--y,0%),rgba(0,212,84,.95),rgba(0,212,84,.18) 40%,rgba(230,246,238,.1) 70%);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.fx-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(320px circle at var(--x,50%) var(--y,0%),rgba(0,212,84,.10),transparent 60%)}
.fx-spot-host:hover>.fx-spot{opacity:1}
/* Bijschrift schuift op */
.hvp{overflow:hidden;border-radius:32px}
.hvp>img{transition:transform .8s var(--fxE)}
.hvp:hover>img{transform:scale(1.03)}
.fx-cap{position:absolute;z-index:3;left:16px;right:16px;bottom:16px;max-width:460px;background:rgba(255,255,255,.95);border-radius:16px;padding:12px 16px;font:500 14px/1.45 Roboto,system-ui,sans-serif;color:#2b3a37;transform:translateY(calc(100% + 24px));transition:transform .45s var(--fxE);pointer-events:none}
.hvp:hover>.fx-cap{transform:none}
/* Opkomen in volgorde */
.fxjs .fx-rv{opacity:0;transform:translateY(14px)}
.fxjs .fx-rv.in{opacity:1;transform:none;transition:opacity .6s var(--fxE),transform .7s var(--fxE)}
/* Connectiegrid + gloed volgt */
.fx-cg{position:absolute!important;inset:0;z-index:1!important;pointer-events:none;border-radius:inherit}
.hero .hc>*:not(.fx-cg):not(.orb):not(.cf){position:relative;z-index:3}
.close,.ts.tdk{isolation:isolate}
.fx-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(520px circle at var(--x,50%) var(--y,30%),rgba(0,212,84,.20),transparent 62%);opacity:0;transition:opacity .6s}
.fx-glow.on{opacity:1}
/* Accent tekent zich */
.fxjs .ul.fx-ul{background-repeat:no-repeat;background-size:0% 100%}
.fxjs .ul.fx-ul.in{background-size:100% 100%;transition:background-size .9s var(--fxE) .2s}
/* Drijvende gloed + zwevende vormen */
.orb{animation:fxDrift 18s ease-in-out infinite alternate}
@keyframes fxDrift{to{translate:-90px -50px;scale:1.15}}
.cf{animation:fxFloat 9s ease-in-out infinite alternate}
.cf:nth-of-type(2n){animation-duration:11s;animation-delay:-3s}
.cf:nth-of-type(3n){animation-duration:13s;animation-delay:-6s}
@keyframes fxFloat{to{translate:0 -14px;rotate:6deg}}
/* Verloop in beweging (slotband) */
.close{background:linear-gradient(120deg,#0A2A18,#0E4A2A,#0A2A18,#06331C)!important;background-size:300% 300%!important;animation:fxMesh 16s ease-in-out infinite}
@keyframes fxMesh{50%{background-position:100% 50%}}
/* Nummer kopiëren + Verstuurd! */
.fx-toast{position:fixed;z-index:9999;transform:translate(-50%,6px);background:#0A2A18;color:#fff;font:600 12px Poppins,sans-serif;padding:7px 12px;border-radius:999px;opacity:0;transition:opacity .2s,transform .3s var(--fxE);pointer-events:none;white-space:nowrap}
.fx-toast.on{opacity:1;transform:translate(-50%,0)}
.btn.fx-sent{background:#0A2A18!important;color:#00D454!important;justify-content:center;transition:width .45s var(--fxE),padding .45s var(--fxE),background .3s!important}
.fx-burst{position:fixed;z-index:9999;width:0;height:0;pointer-events:none}
.fx-burst i{position:absolute;width:12px;height:10px}
/* Minder beweging */
@media (prefers-reduced-motion:reduce){
 .orb,.cf,.close{animation:none!important}
 .fxjs .fx-rv{opacity:1!important;transform:none!important}
 .fxjs .ul.fx-ul{background-size:100% 100%}
 a.card:hover,.btn:hover{transform:none!important}
 a.card:hover .fx-imw>img,.hvp:hover>img{transform:none}
}