/* ============ cookiemelding ============
   Een zwevende kaart onderin, met de raket uit ons logo die er net overheen kijkt.
   Bij "Alles accepteren" telt de raket af, ontsteekt en vertrekt echt.
   Alles met eigen namen (bog-ck-) zodat het niets op de pagina raakt. */
.bog-ck{position:fixed;left:0;right:0;bottom:0;z-index:9999;padding:0 16px 16px;
 display:flex;justify-content:flex-start;pointer-events:none;
 font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;}
.bog-ck[hidden]{display:none;}

/* De raket zit naast de kaart en niet erin. Zat hij erin, dan zakte hij mee
   omlaag zodra de kaart wegschuift en leek de lancering niet te gebeuren. */
/* Linksonder en smal. Een brede kaart in het midden ging voor de tekst van de
   pagina staan; zo blijft het midden van het scherm vrij. */
.bog-ck-in{position:relative;width:100%;max-width:320px;pointer-events:none;}

.bog-ck-kaart{position:relative;z-index:1;pointer-events:auto;width:100%;
 background:#fff;border:1px solid rgba(36,26,74,.08);border-radius:20px;
 box-shadow:0 26px 60px -22px rgba(36,26,74,.45);padding:17px 19px 16px;
 transform:translateY(0);opacity:1;
 transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .4s ease;}
.bog-ck.weg .bog-ck-kaart{transform:translateY(130%);opacity:0;}

/* ---------- het lanceerplatform ----------
   Eén doosje boven de rechterhoek van de kaart, precies zo breed als de raket
   zelf, zodat alles wat eraan hangt op procenten van de tekening kan staan.
   Daarin: de vlieger (raket plus uitlaatstraal, die samen omhooggaan) en de
   grond, met alles wat achterblijft: flits, ringen, rook, vonken, snippers. */
.bog-ck-vlucht{position:absolute;left:20px;bottom:100%;width:58px;height:103px;
 margin-bottom:-6px;pointer-events:none;z-index:2;}
.bog-ck-vlieger{position:absolute;inset:0;will-change:transform;
 animation:bogCkZweef 4.5s ease-in-out infinite;}
.bog-ck-raket{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
 filter:drop-shadow(0 12px 20px rgba(20,25,70,.32));}
@keyframes bogCkZweef{0%,100%{transform:translate3d(0,0,0) rotate(0deg);}
 50%{transform:translate3d(0,-9px,0) rotate(-4deg);}}

/* ---------- de vlucht zelf ----------
   Eerst trillen op het platform, dan even door de knieën, dan pas weg. Een
   raket die meteen vertrekt leest niet als een lancering maar als een sprongetje. */
.bog-ck.lanceer .bog-ck-vlieger{animation:bogCkVlucht 2.2s cubic-bezier(.34,0,.72,.2) forwards;}
@keyframes bogCkVlucht{
 0%  {transform:translate3d(0,0,0) rotate(0deg);}
 4%  {transform:translate3d(-2px,1px,0) rotate(1.3deg);}
 8%  {transform:translate3d(2px,2px,0) rotate(-1.5deg);}
 12% {transform:translate3d(-2px,3px,0) rotate(1.1deg);}
 16% {transform:translate3d(2px,3px,0) rotate(-1.2deg);}
 20% {transform:translate3d(-1px,5px,0) rotate(.9deg);}
 23% {transform:translate3d(0,7px,0) rotate(0deg);}
 27% {transform:translate3d(0,-14px,0) rotate(-1.5deg);}
 38% {transform:translate3d(5px,-20vh,0) rotate(4deg);}
 62% {transform:translate3d(16px,-62vh,0) rotate(10deg);}
 100%{transform:translate3d(38px,-165vh,0) rotate(17deg);}}

/* De vlam hoort aan de straalpijp vast te blijven zitten. Die zit op 71 procent
   van de breedte en vlak onder de bovenrand van de vlam zelf: daar draait alles
   omheen, anders schiet de vlam los van de raket. */
.bog-ck-vlamgroei,.bog-ck-vlamflik,.bog-ck-vlamkern{transform-box:fill-box;transform-origin:71% 2%;}
.bog-ck-vlamkern{opacity:0;transform:scale(.62,.7);}
.bog-ck.lanceer .bog-ck-vlamgroei{animation:bogCkVlamGroei 2.2s cubic-bezier(.3,0,.2,1) forwards;}
@keyframes bogCkVlamGroei{
 0%{transform:scale(1,1);} 18%{transform:scale(1.1,1.45);}
 27%{transform:scale(1.3,2.2);} 45%{transform:scale(1.2,2.6);}
 100%{transform:scale(1.12,2.3);}}
.bog-ck.lanceer .bog-ck-vlamflik{animation:bogCkFlik .09s steps(1,end) infinite;}
@keyframes bogCkFlik{0%{transform:scale(1,1);}34%{transform:scale(1.07,.9);}
 67%{transform:scale(.94,1.1);}}
.bog-ck.lanceer .bog-ck-vlamkern{animation:bogCkKern 2.2s ease-out forwards;}
@keyframes bogCkKern{0%,14%{opacity:0;}27%{opacity:.95;}100%{opacity:.82;}}

/* de uitlaatstraal hangt aan de straalpijp en rekt uit tijdens het stijgen.
   Zestien graden, want zo scheef staat de raket in het logo. */
.bog-ck-spoor{position:absolute;left:41%;top:70%;width:22px;height:60px;margin-left:-11px;
 border-radius:50% 50% 46% 46%/64% 64% 36% 36%;opacity:0;
 transform-origin:top center;transform:rotate(16deg) scaleY(.1);
 background:linear-gradient(180deg,rgba(255,206,120,.95),rgba(253,120,110,.6) 30%,
  rgba(160,100,215,.3) 62%,rgba(160,100,215,0));
 filter:blur(5px);}
.bog-ck.lanceer .bog-ck-spoor{animation:bogCkSpoor 2.2s cubic-bezier(.3,0,.2,1) forwards;}
@keyframes bogCkSpoor{
 0%,17%{opacity:0;transform:rotate(16deg) scaleY(.1) scaleX(.8);}
 27%{opacity:.95;transform:rotate(16deg) scaleY(2.6) scaleX(1.2);}
 45%{opacity:.9;transform:rotate(16deg) scaleY(11) scaleX(1);}
 76%{opacity:.5;transform:rotate(16deg) scaleY(26) scaleX(.7);}
 100%{opacity:0;transform:rotate(16deg) scaleY(34) scaleX(.5);}}

/* ---------- wat op de grond achterblijft ---------- */
.bog-ck-grond{position:absolute;left:41%;right:0;bottom:6px;width:0;height:0;}
.bog-ck-flits{position:absolute;left:0;bottom:-30px;width:190px;height:190px;margin-left:-95px;
 border-radius:50%;opacity:0;transform:scale(.25);
 background:radial-gradient(circle,rgba(255,232,168,.95),rgba(255,146,92,.45) 36%,rgba(255,146,92,0) 70%);}
.bog-ck.lanceer .bog-ck-flits{animation:bogCkFlits .8s .46s ease-out forwards;}
@keyframes bogCkFlits{0%{opacity:0;transform:scale(.25);}
 16%{opacity:1;transform:scale(1.15);}100%{opacity:0;transform:scale(1.8);}}
.bog-ck-ring{position:absolute;left:0;bottom:-14px;width:36px;height:36px;margin-left:-18px;
 border-radius:50%;border:2px solid rgba(94,132,246,.6);opacity:0;transform:scale(.3);}
.bog-ck.lanceer .bog-ck-ring{animation:bogCkRing .9s ease-out forwards;animation-delay:var(--d,.48s);}
@keyframes bogCkRing{0%{opacity:.85;transform:scale(.3);}100%{opacity:0;transform:scale(5.6);}}
.bog-ck-rook{position:absolute;left:0;bottom:-12px;width:32px;height:32px;margin-left:-16px;
 border-radius:50%;background:rgba(226,224,242,.9);filter:blur(7px);opacity:0;}
.bog-ck.lanceer .bog-ck-rook{animation:bogCkRook 1.7s ease-out forwards;animation-delay:var(--d);}
@keyframes bogCkRook{0%{opacity:0;transform:translate(0,0) scale(.35);}
 14%{opacity:.85;}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(var(--s));}}
.bog-ck-vonk{position:absolute;left:0;bottom:-8px;width:var(--g);height:var(--g);
 margin-left:calc(var(--g) / -2);border-radius:50%;background:var(--k);
 box-shadow:0 0 9px var(--k);opacity:0;}
.bog-ck.lanceer .bog-ck-vonk{animation:bogCkVonk 1.3s cubic-bezier(.12,.62,.3,1) forwards;
 animation-delay:var(--d);}
@keyframes bogCkVonk{
 0%{opacity:1;transform:translate(0,0) scale(1);}
 55%{opacity:1;transform:translate(calc(var(--x) * .78),var(--y)) scale(.85);}
 100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 110px)) scale(.15);}}
.bog-ck-snipper{position:absolute;left:0;bottom:-4px;width:7px;height:11px;margin-left:-3px;
 border-radius:2px;background:var(--k);opacity:0;}
.bog-ck.lanceer .bog-ck-snipper{animation:bogCkSnipper 1.9s cubic-bezier(.12,.62,.3,1) forwards;
 animation-delay:var(--d);}
@keyframes bogCkSnipper{
 0%{opacity:1;transform:translate(0,0) rotate(0deg);}
 50%{opacity:1;transform:translate(calc(var(--x) * .8),var(--y)) rotate(var(--r));}
 100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 170px)) rotate(calc(var(--r) * 2.4));}}

/* de kaart voelt de motor en gaat daarna pas weg */
.bog-ck.lanceer .bog-ck-kaart{animation:bogCkKaartWeg 2.2s cubic-bezier(.4,0,.2,1) forwards;}
@keyframes bogCkKaartWeg{
 0%{transform:translate3d(0,0,0);opacity:1;}
 5%{transform:translate3d(-2px,1px,0);}
 10%{transform:translate3d(2px,-1px,0);}
 15%{transform:translate3d(-2px,2px,0);}
 20%{transform:translate3d(2px,1px,0);}
 24%{transform:translate3d(0,3px,0);opacity:1;}
 30%{transform:translate3d(0,-5px,0);opacity:1;}
 62%{transform:translate3d(0,140%,0);opacity:0;}
 100%{transform:translate3d(0,140%,0);opacity:0;}}

.bog-ck-kop{margin:0 0 5px;font-size:15.5px;font-weight:800;color:#241a4a;letter-spacing:-.01em;
 font-family:'Plus Jakarta Sans',system-ui,sans-serif;}
.bog-ck-txt{margin:0 0 12px;font-size:13px;line-height:1.55;color:#5b5772;}
.bog-ck-txt a{color:#4a35b8;font-weight:700;text-decoration:underline;text-underline-offset:2px;}
.bog-ck-knoppen{display:flex;flex-wrap:wrap;gap:10px;}
.bog-ck-knop{flex:1 1 100%;min-height:42px;padding:10px 18px;border:0;border-radius:50px;
 font-family:inherit;font-size:13.5px;font-weight:800;cursor:pointer;
 transition:transform .15s ease,box-shadow .15s ease;}
.bog-ck-knop:hover{transform:translateY(-2px);}
.bog-ck-knop:focus-visible{outline:3px solid #8a5cc8;outline-offset:2px;}
.bog-ck-ja{color:#fff;background:linear-gradient(135deg,#3a6fe0,#4a7bf0);
 box-shadow:0 12px 26px -8px rgba(58,111,224,.6);}
.bog-ck-nee{color:#241a4a;background:#eceaf6;}
.bog-ck-nee:hover{background:#e3e0f1;}
.bog-ck-terug{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:0;
 font:inherit;font-size:12.5px;color:#8a87a3;cursor:pointer;text-decoration:underline;}
.bog-ck-terug:hover{color:#4a35b8;}

@media(max-width:560px){
 .bog-ck{padding:0 10px 10px;}
 .bog-ck-kaart{padding:20px 18px 18px;border-radius:20px;}
 .bog-ck-vlucht{width:52px;height:93px;left:16px;margin-bottom:-6px;}
 .bog-ck-knop{flex:1 1 100%;}
}
@media (prefers-reduced-motion: reduce){
 .bog-ck-vlieger,.bog-ck-kaart{animation:none !important;transition:none;}
 .bog-ck-spoor,.bog-ck-flits,.bog-ck-ring,.bog-ck-rook,.bog-ck-vonk,.bog-ck-snipper,
 .bog-ck-vlamgroei,.bog-ck-vlamflik,.bog-ck-vlamkern{animation:none !important;}
 .bog-ck.lanceer .bog-ck-vlucht{opacity:0;transition:opacity .3s ease;}
}

/* plek van een kaart die nog toestemming nodig heeft */
.bog-ck-plek{position:relative;display:flex;flex-direction:column;align-items:center;
 justify-content:center;gap:12px;text-align:center;min-height:260px;padding:28px 24px;
 background:#f3f2fa;border:1px dashed rgba(36,26,74,.18);border-radius:18px;
 font-family:'Inter',system-ui,sans-serif;}
.bog-ck-plek p{margin:0;font-size:14px;line-height:1.6;color:#5b5772;max-width:44ch;}
.bog-ck-plek strong{display:block;font-size:15.5px;color:#241a4a;margin-bottom:4px;}
.bog-ck-plek button{min-height:44px;padding:11px 22px;border:0;border-radius:50px;
 font-family:inherit;font-size:14px;font-weight:800;color:#fff;cursor:pointer;
 background:linear-gradient(135deg,#3a6fe0,#4a7bf0);}