/* BesteRobotstofzuigers: beweging, alleen CSS, voorvoegsel brs-motion-. Geen afhankelijkheden. Alleen in de hero en in de footer-strook.
   1) Hero (BRS_Motion::hero_svg): een robotstofzuiger (bovenaanzicht) rijdt in 9 s rustig over een vloer met stof en laat een schoon, stofvrij spoor achter.
      Robot (translateX 0 naar 190) en schoon spoor (scaleX .27 naar 1, rechterrand = middelpunt van de robot) delen dezelfde easing, dus lopen gelijk.
   2) Footer-strook (BRS_Motion::print_foot): trage doorgang van 19 s van de robotstofzuiger (zijaanzicht) over een lichte vloerstrook; het stof verdwijnt achter hem.
   De koopbalk (brs-sticky) heeft bewust geen beweging. prefers-reduced-motion: alles statisch. */

/* De robotstofzuiger (hero en footer delen deze klassen) */
.brs-motion-body { fill: #F4F8F9; stroke: #9DB8BE; stroke-width: 2; }
.brs-motion-deck { fill: #E3EDEF; }
.brs-motion-bumper { fill: none; stroke: #0A4E57; stroke-width: 4; stroke-linecap: round; }
.brs-motion-lidar { fill: #0A4E57; }
.brs-motion-lidar-in { fill: #2FA3B0; }
.brs-motion-led { fill: #2FA3B0; stroke: #2FA3B0; stroke-width: 3; stroke-linecap: round; }
.brs-motion-brush { fill: none; stroke: #5B7A80; stroke-width: 2; stroke-linecap: round; }
.brs-motion-wheel { fill: #5B7A80; }
path.brs-motion-led { fill: none; }

/* Hero */
.brs-motion-hero { display: block; width: 100%; max-width: 360px; height: auto; margin-inline: auto; overflow: visible; }
.brs-motion-floor { fill: #D5E1E3; }
.brs-motion-dust-p { fill: none; stroke: #6F8388; stroke-width: 2.2; stroke-linecap: round; opacity: .8; }
.brs-motion-smooth-h { fill: #F7FBFB; transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(.27); opacity: 0; animation: brs-motion-hsmooth 9s linear infinite; }
.brs-motion-sh { opacity: 0; animation: brs-motion-hsh 9s linear infinite; }
@keyframes brs-motion-hsh {
	0% { opacity: 0; transform: translateX(0); }
	4% { opacity: 1; transform: translateX(0); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
	70% { opacity: 1; transform: translateX(190px); }
	88% { opacity: 1; transform: translateX(190px); }
	95% { opacity: 0; transform: translateX(190px); }
	100% { opacity: 0; transform: translateX(0); }
}
@keyframes brs-motion-hsmooth {
	0% { opacity: 0; transform: scaleX(.27); }
	4% { opacity: 1; transform: scaleX(.27); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
	70% { opacity: 1; transform: scaleX(1); }
	88% { opacity: 1; transform: scaleX(1); }
	98% { opacity: 0; transform: scaleX(1); }
	100% { opacity: 0; transform: scaleX(.27); }
}

/* Footer-strook: direct tegen de footer, geen rand of marge ertussen */
.brs-motion-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.brs-motion-foot { display: block; width: 100%; overflow: hidden; background: transparent; border: 0; margin: 0; padding: 0; }
.brs-motion-foot + .ct-footer, .brs-motion-foot + #footer.ct-footer { margin-top: 0; border-top: 0; }
.brs-motion-strip { position: relative; height: 56px; overflow: hidden; }
.brs-motion-stub, .brs-motion-smooth { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; width: 100%; }
.brs-motion-stub { display: block; background: #DDE8EA; }
.brs-motion-stub path { fill: none; stroke: #6F8388; stroke-width: 1.6; stroke-linecap: round; }
.brs-motion-smooth { left: -3%; width: 106%; right: auto; background: #F7FBFB; transform-origin: 0 50%; transform: scaleX(0); animation: brs-motion-fsmooth 19s linear infinite; }
.brs-motion-sw { position: absolute; bottom: 8px; left: -3%; width: 72px; height: 30px; margin-left: -36px; opacity: 0; animation: brs-motion-fsh 19s linear infinite; }
.brs-motion-rbv { display: block; width: 100%; height: 100%; overflow: visible; }
.brs-js .brs-motion-foot:not(.is-on) .brs-motion-strip *, .brs-js .brs-motion-foot:not(.is-on) .brs-motion-strip { animation-play-state: paused; }
@keyframes brs-motion-fsh {
	0% { opacity: 0; left: -3%; }
	4% { opacity: 1; left: -3%; animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
	80% { opacity: 1; left: 103%; }
	82% { opacity: 0; left: 103%; }
	100% { opacity: 0; left: -3%; }
}
@keyframes brs-motion-fsmooth {
	0% { opacity: 0; transform: scaleX(0); }
	4% { opacity: 1; transform: scaleX(0); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
	80% { opacity: 1; transform: scaleX(1); }
	90% { opacity: 1; transform: scaleX(1); }
	98% { opacity: 0; transform: scaleX(1); }
	100% { opacity: 0; transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.brs-motion-sh, .brs-motion-smooth-h, .brs-motion-smooth, .brs-motion-sw { animation: none !important; }
	.brs-motion-sh { opacity: 1; transform: translateX(95px); }
	.brs-motion-smooth-h { opacity: 1; transform: scaleX(.635); }
	.brs-motion-smooth { opacity: 1; transform: scaleX(.5); }
	.brs-motion-sw { opacity: 1; left: 50%; }
}