/* BesteSteelstofzuiger: hero-animatie "steelstofzuiger poetst de vloer" (BSZ_Motion::hero_svg). Alleen CSS, voorvoegsel bsz-motion-.
   Cyclus 6 s: stofzuiger schuift van +20 naar -140 eenheden (0-3 s, naar links over het stof) en terug (3-6 s); stofdeeltje k1..k14 wordt kort aangezogen en verdwijnt als de zuigmond (linkerrand van de smalle mond) erlangs komt; a1..a3 reizen langs de steel naar de stofbak
   (tijden berekend met ease-in-out sinus), en verschijnt weer vlak voor het einde van de cyclus. Deeltjes kleuren op de donkerblauwe hero. */
.bsz-motion-hero { display: block; width: 100%; max-width: 360px; height: auto; margin-inline: auto; overflow: visible; }
.bsz-motion-glow { fill: #fff; opacity: .07; }
.bsz-motion-floor { fill: #fff; opacity: .75; }
.bsz-motion-shadow { fill: #000; opacity: .3; }
.bsz-motion-pole { fill: var(--bsz-accent, #0E9AA7); }
.bsz-motion-shine { fill: #fff; opacity: .45; }
.bsz-motion-motor { fill: var(--bsz-motion-deep, #061B30); stroke: rgba(255, 255, 255, .5); stroke-width: 1.5; }
.bsz-motion-bin { fill: rgba(14, 154, 167, .28); stroke: #7FD3DB; stroke-width: 1.5; }
.bsz-motion-bin-in { fill: #fff; opacity: .18; }
.bsz-motion-cap { fill: #0B2E4F; stroke: #9FE0E6; stroke-width: 2; }
.bsz-motion-cap-in { fill: #061B30; stroke: rgba(255, 255, 255, .45); stroke-width: 1; }
.bsz-motion-grille { fill: none; stroke: #7FD3DB; stroke-width: 1.4; stroke-linecap: round; }
.bsz-motion-grip { fill: none; stroke: #9FE0E6; stroke-width: 11; stroke-linecap: round; }
.bsz-motion-head { fill: var(--bsz-motion-deep, #061B30); stroke: rgba(255, 255, 255, .5); stroke-width: 1.5; }
.bsz-motion-neck { fill: #0B2E4F; stroke: rgba(255, 255, 255, .4); stroke-width: 1.2; }
.bsz-motion-brush { fill: var(--bsz-accent, #0E9AA7); }
.bsz-motion-joint { fill: #0B2E4F; stroke: #9FE0E6; stroke-width: 2; }
.bsz-motion-joint-in { fill: var(--bsz-accent, #0E9AA7); }
.bsz-motion-led { fill: #4CC3FF; }
.bsz-motion-led-glow { fill: #4CC3FF; opacity: .3; }
.bsz-motion-beige { fill: #E8D9BC; stroke: #E8D9BC; stroke-width: 1.5; stroke-linejoin: round; }
.bsz-motion-grey { fill: #C9D2DB; stroke: #C9D2DB; stroke-width: 1.5; stroke-linejoin: round; }
.bsz-motion-air { fill: none; stroke: #fff; stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 8 22; opacity: .35; animation: bsz-motion-flow 1.4s linear infinite; }
.bsz-motion-pt { fill: #BFF1F5; opacity: 0; }
.bsz-motion-d { transform-box: fill-box; transform-origin: center; animation: 6s linear infinite; }
.bsz-motion-vac { animation: bsz-motion-slide 6s cubic-bezier(.37, 0, .63, 1) infinite; }
.bsz-motion-up { transform-box: view-box; transform-origin: 285px 448px; animation: bsz-motion-lean 6s ease-in-out infinite; }
.bsz-motion-pt { animation: 6s linear infinite; }
@keyframes bsz-motion-slide { 0%, 100% { transform: translateX(20px); } 50% { transform: translateX(-140px); } }
@keyframes bsz-motion-lean { 0%, 50%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@keyframes bsz-motion-flow { to { stroke-dashoffset: -30; } }
.bsz-motion-k1{animation-name:bsz-motion-k1} .bsz-motion-k2{animation-name:bsz-motion-k2} .bsz-motion-k3{animation-name:bsz-motion-k3} .bsz-motion-k4{animation-name:bsz-motion-k4} .bsz-motion-k5{animation-name:bsz-motion-k5} .bsz-motion-k6{animation-name:bsz-motion-k6} .bsz-motion-k7{animation-name:bsz-motion-k7} .bsz-motion-k8{animation-name:bsz-motion-k8} .bsz-motion-k9{animation-name:bsz-motion-k9} .bsz-motion-k10{animation-name:bsz-motion-k10} .bsz-motion-k11{animation-name:bsz-motion-k11} .bsz-motion-k12{animation-name:bsz-motion-k12} .bsz-motion-k13{animation-name:bsz-motion-k13} .bsz-motion-k14{animation-name:bsz-motion-k14}
.bsz-motion-a1{animation-name:bsz-motion-a1} .bsz-motion-a2{animation-name:bsz-motion-a2} .bsz-motion-a3{animation-name:bsz-motion-a3}
@keyframes bsz-motion-k1{0%,32.7%{opacity:1;transform:none}35.5%{opacity:.9;transform:translate(5px,-5px) scale(.7)}38.2%,93%{opacity:0;transform:translate(9px,-9px) scale(0)}99%,100%{opacity:1;transform:none}}
@keyframes bsz-motion-k2{0%,30.3%{opacity:1;transform:none}32.9%{opacity:.9;transform:translate(5px,-5px) scale(.7)}35.2%,93%{opacity:0;transform:translate(9px,-9px) scale(0)}99%,100%{opacity:1;transform:none}}
@keyframes bsz-motion-k3{0%,27.8%{opacity:1;transform:none}30.3%{opacity:.9;transform:translate(5px,-5px) scale(.7)}32.4%,93%{opacity:0;transform:translate(9px,-9px) scale(0)}99%,100%{opacity:1;transform:none}}
@keyframes bsz-motion-k4{0%,25.6%{opacity:1;transform:none}28.0%{opacity:.9;transform:translate(5px,-5px) scale(.7)}30.1%,93%{opacity:0;transform:translate(9px,-9px) scale(0)}99%,100%{opacity:1;transform:none}}
@keyframes bsz-motion-k5{0%,23.4%{opacity:1;transform:none}25.8%{opacity:.9;transform:translate(5px,-5px) scale(.7)}27.8%,93%{opacity:0;transform:translate(9px,-9px) scale(0)}99%,100%{opacity:1;transform:none}}
@keyframes bsz-motion-k6{0%,21.4%{opacity:1;transform:none}23.8%{opacity:.9;transform:translate(5px,-5px) scale(.7)}25.8%,93%{opacity:0;transform:translate(9px,-9px) scale(0)}99%,100%{opacity:1;transform:none}}
@keyframes bsz-motion-k7{0%,19.3%{opacity:1;transform:none}21.8%{opacity:.9;transform:translate(5px,-5px) scale(.7)}23.8%,93%{opacity:0;transform:translate(9px,-9px) scale(0)}99%,100%{opacity:1;transform:none}}
@keyframes bsz-motion-k8{0%,17.1%{opacity:1;transform:none}19.7%{opacity:.9;transform:translate(5px,-5px) scale(.7)}21.8%,93%{opacity:0;transform:translate(9px,-9px) scale(0)}99%,100%{opacity:1;transform:none}}
@keyframes bsz-motion-k9{0%,14.8%{opacity:1;transform:none}17.6%{opacity:.9;transform:translate(5px,-5px) scale(.7)}19.7%,93%{opacity:0;transform:translate(9px,-9px) scale(0)}99%,100%{opacity:1;transform:none}}
@keyframes bsz-motion-k10{0%,12.4%{opacity:1;transform:none}15.5%{opacity:.9;transform:translate(5px,-5px) scale(.7)}17.8%,93%{opacity:0;transform:translate(9px,-9px) scale(0)}99%,100%{opacity:1;transform:none}}
@keyframes bsz-motion-k11{0%,9.9%{opacity:1;transform:none}13.5%{opacity:.9;transform:translate(5px,-5px) scale(.7)}16.0%,93%{opacity:0;transform:translate(9px,-9px) scale(0)}99%,100%{opacity:1;transform:none}}
@keyframes bsz-motion-k12{0%,7.2%{opacity:1;transform:none}11.5%{opacity:.9;transform:translate(5px,-5px) scale(.7)}14.3%,93%{opacity:0;transform:translate(9px,-9px) scale(0)}99%,100%{opacity:1;transform:none}}
@keyframes bsz-motion-k13{0%,3.6%{opacity:1;transform:none}9.6%{opacity:.9;transform:translate(5px,-5px) scale(.7)}12.7%,93%{opacity:0;transform:translate(9px,-9px) scale(0)}99%,100%{opacity:1;transform:none}}
@keyframes bsz-motion-k14{0%,0.7%{opacity:1;transform:none}7.6%{opacity:.9;transform:translate(5px,-5px) scale(.7)}11.2%,93%{opacity:0;transform:translate(9px,-9px) scale(0)}99%,100%{opacity:1;transform:none}}
@keyframes bsz-motion-a1{0%,30.1%{opacity:0;transform:translate(-25px,30px)}31.6%{opacity:.9}37.1%{transform:translate(0,-20px)}46.1%{opacity:.9;transform:translate(0,-262px)}52.1%,94%{opacity:.95;transform:translate(-36px,-290px)}100%{opacity:0;transform:translate(-36px,-290px)}}
@keyframes bsz-motion-a2{0%,21.8%{opacity:0;transform:translate(-25px,30px)}23.3%{opacity:.9}28.8%{transform:translate(0,-20px)}37.8%{opacity:.9;transform:translate(0,-262px)}43.8%,94%{opacity:.95;transform:translate(-31px,-297px)}100%{opacity:0;transform:translate(-31px,-297px)}}
@keyframes bsz-motion-a3{0%,14.3%{opacity:0;transform:translate(-25px,30px)}15.8%{opacity:.9}21.3%{transform:translate(0,-20px)}30.3%{opacity:.9;transform:translate(0,-262px)}36.3%,94%{opacity:.95;transform:translate(-41px,-299px)}100%{opacity:0;transform:translate(-41px,-299px)}}
@media (prefers-reduced-motion: reduce) {
	.bsz-motion-vac, .bsz-motion-up, .bsz-motion-d, .bsz-motion-air { animation: none; }
	.bsz-motion-d:not(.bsz-motion-s), .bsz-motion-pt, .bsz-motion-air { display: none; }
}

/* Spoor met gespiegelde steelstofzuiger: koopbalk (volgt scrollvoortgang --bsz-p) en footer-strip (rustige doorgang van 30 s). Zelfde tekening als de hero via <use>.
   --bsz-p = positie van de zuigmond (0 tot 1), --bsz-q = hoeveel stof al is opgezogen (bar: gelijk aan p; footer: loopt na de rustpauze terug naar 0 = stof fadet terug). */
@property --bsz-p { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --bsz-q { syntax: "<number>"; inherits: true; initial-value: 0; }
.bsz-motion-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.bsz-motion-track { --bsz-vh: 48px; --bsz-vw: calc(var(--bsz-vh) * .42); --bsz-q: var(--bsz-p, 0); --bsz-dust: #C9AE7C; --bsz-dust2: #8E9BA8; position: relative; height: 56px; overflow: hidden; container-type: inline-size; }
.bsz-motion-track::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 3px; background: var(--bsz-floor, rgba(11, 46, 79, .5)); }
.bsz-motion-vw { position: absolute; left: 0; bottom: 4px; width: var(--bsz-vw); height: var(--bsz-vh); transform: translateX(calc(var(--bsz-p, 0) * (100cqw - var(--bsz-vw)))); will-change: transform; }
.bsz-motion-vs { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; animation: bsz-motion-polish 2.4s ease-in-out infinite alternate; }
.bsz-motion-vsv { display: block; width: 100%; height: 100%; transform: scaleX(-1); }
.bsz-motion-binfill { fill: var(--bsz-dust); opacity: .9; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--bsz-q, 0)); }
.bsz-motion-aw { position: absolute; left: 100%; bottom: calc(var(--bsz-vh) * .03); width: calc(var(--bsz-vh) * .2); height: calc(var(--bsz-vh) * .25); fill: none; stroke: var(--bsz-accent, #0E9AA7); stroke-width: 1.3; stroke-linecap: round; overflow: visible; }
.bsz-motion-aw path { animation: bsz-motion-air 1s ease-in infinite; }
.bsz-motion-aw path:nth-child(2) { animation-delay: .3s; } .bsz-motion-aw path:nth-child(3) { animation-delay: .6s; }
.bsz-motion-dd { position: absolute; bottom: calc(5px + var(--y, 0px)); width: var(--s); height: var(--s); left: calc(var(--bsz-vw) + var(--t) * (100% - var(--bsz-vw)) - var(--s) / 2);
	--o: clamp(0, calc((var(--t) - var(--bsz-q)) * 40), 1); opacity: var(--o); fill: var(--bsz-dust); stroke: var(--bsz-dust); stroke-width: .6;
	transform: translate(calc((1 - var(--o)) * -14px), calc((1 - var(--o)) * var(--o) * -64px)) rotate(calc((1 - var(--o)) * 220deg)) scale(var(--o)); }
.bsz-motion-dd--2 { fill: var(--bsz-dust2); stroke: var(--bsz-dust2); }
.bsz-motion-foot { display: block; width: 100%; overflow: hidden; background: var(--bsz-bg, #F3F7FA); border-top: 1px solid var(--bsz-line, #D9E2EA); }
.bsz-motion-track--foot { --bsz-vh: 100px; height: 120px; background: var(--bsz-bg, #F3F7FA); animation: bsz-motion-runp 30s infinite, bsz-motion-runq 30s infinite; }
.bsz-motion-track--foot .bsz-motion-vw { animation: bsz-motion-vfade 30s linear infinite; }
.bsz-js .bsz-motion-foot:not(.is-on) .bsz-motion-track, .bsz-js .bsz-motion-foot:not(.is-on) .bsz-motion-track * { animation-play-state: paused; }
@keyframes bsz-motion-polish { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
@keyframes bsz-motion-air { 0% { opacity: 0; transform: translateX(6px); } 40% { opacity: .85; } 100% { opacity: 0; transform: translateX(-3px); } }
@keyframes bsz-motion-runp { 0%, 8% { --bsz-p: 0; animation-timing-function: cubic-bezier(.3, .1, .7, .9); } 72%, 86% { --bsz-p: 1; } 86.1%, 100% { --bsz-p: 0; } }
@keyframes bsz-motion-runq { 0%, 8% { --bsz-q: 0; animation-timing-function: cubic-bezier(.3, .1, .7, .9); } 72%, 86% { --bsz-q: 1; animation-timing-function: linear; } 96%, 100% { --bsz-q: 0; } }
@keyframes bsz-motion-vfade { 0%, 80% { opacity: 1; } 85%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.bsz-motion-track, .bsz-motion-track--foot { --bsz-p: 1; --bsz-q: 1; animation: none; }
	.bsz-motion-track *, .bsz-motion-track--foot .bsz-motion-vw { animation: none !important; }
	.bsz-motion-aw { display: none; }
}

/* Footer-strook zit direct tegen de footer: geen grijze marge en geen blauwe rand ertussen. */
.bsz-motion-foot + .ct-footer, .bsz-motion-foot + #footer.ct-footer { margin-top: 0; border-top: 0; }

/* Footer-strook: geen eigen achtergrond (de lichtblauwe paginakleur schijnt erdoor); vloerlijn en stofzuiger staan direct op de footer, zonder wit randje. */
.bsz-motion-foot { background: transparent; border: 0; margin: 0; padding: 0; }
.bsz-motion-foot .bsz-motion-track--foot { background: transparent; border: 0; margin: 0; }
.bsz-motion-foot .bsz-motion-track--foot::before { background: transparent; }
.bsz-motion-foot .bsz-motion-track--foot::after { bottom: 0; }
.bsz-motion-foot .bsz-motion-track--foot .bsz-motion-vw { bottom: 0; }
.bsz-motion-foot .bsz-motion-track--foot .bsz-motion-dd { bottom: 1px; }