/* BesteScheerapparaat: beweging, alleen CSS, voorvoegsel bsa-motion-. Geen afhankelijkheden.
   1) Hero (BSA_Motion::hero_svg): een folie-scheerapparaat glijdt in 9 s over een stoppelige wang en laat een gladde streep achter.
      Scheerapparaat (translateX 0 naar 190) en gladde streep (scaleX .27 naar 1, rechterrand = midden van de scheerkop) delen dezelfde easing, dus lopen gelijk.
   2) Footer-strook (BSA_Motion::print_foot): trage doorgang van 19 s over een lichte strook; de stoppels verdwijnen achter de scheerkop.
   De koopbalk (bsa-sticky) heeft bewust geen beweging. prefers-reduced-motion: alles statisch. */

/* Het scheerapparaat (hero en footer delen deze klassen) */
.bsa-motion-body { fill: #F3F7FA; stroke: #9FB6C8; stroke-width: 2; }
.bsa-motion-bodyshine { fill: #fff; opacity: .85; }
.bsa-motion-panel { fill: #E1EAF1; }
.bsa-motion-btn { fill: #0B2E4F; }
.bsa-motion-btn-in { fill: var(--bsa-accent, #0E9AA7); }
.bsa-motion-led { fill: var(--bsa-accent, #0E9AA7); }
.bsa-motion-collar { fill: #C9D2DB; stroke: #7C8B99; stroke-width: 1.5; }
.bsa-motion-head { fill: #0B2E4F; stroke: #9FB6C8; stroke-width: 1.5; }
.bsa-motion-foil { fill: #DCE4EB; stroke: #fff; stroke-width: 1.2; }
.bsa-motion-slit { fill: none; stroke: #5B6E80; stroke-width: 1.5; stroke-linecap: round; }

/* Hero */
.bsa-motion-hero { display: block; width: 100%; max-width: 360px; height: auto; margin-inline: auto; overflow: visible; }
.bsa-motion-cheek { fill: #E3B896; }
.bsa-motion-stubble { fill: none; stroke: #6B4F3C; stroke-width: 1.2; stroke-linecap: round; opacity: .85; }
.bsa-motion-smooth-h { fill: #F6DEC9; transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(.27); opacity: 0; animation: bsa-motion-hsmooth 9s linear infinite; }
.bsa-motion-sh { opacity: 0; animation: bsa-motion-hsh 9s linear infinite; }
@keyframes bsa-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 bsa-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 */
.bsa-motion-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.bsa-motion-foot { display: block; width: 100%; overflow: hidden; background: transparent; border: 0; margin: 0; padding: 0; }
.bsa-motion-foot + .ct-footer, .bsa-motion-foot + #footer.ct-footer { margin-top: 0; border-top: 0; }
.bsa-motion-strip { position: relative; height: 112px; overflow: hidden; }
.bsa-motion-stub, .bsa-motion-smooth { position: absolute; left: 0; right: 0; bottom: 0; height: 28px; width: 100%; }
.bsa-motion-stub { display: block; background: #EBD6C3; }
.bsa-motion-stub path { fill: none; stroke: #7A5C45; stroke-width: 1; stroke-linecap: round; }
.bsa-motion-smooth { left: -3%; width: 106%; right: auto; background: #F9EFE6; transform-origin: 0 50%; transform: scaleX(0); animation: bsa-motion-fsmooth 19s linear infinite; }
.bsa-motion-sw { position: absolute; bottom: 0; left: -3%; width: 54px; height: 112px; margin-left: -27px; opacity: 0; animation: bsa-motion-fsh 19s linear infinite; }
.bsa-motion-shv { display: block; width: 100%; height: 100%; overflow: visible; }
.bsa-js .bsa-motion-foot:not(.is-on) .bsa-motion-strip *, .bsa-js .bsa-motion-foot:not(.is-on) .bsa-motion-strip { animation-play-state: paused; }
@keyframes bsa-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 bsa-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) {
	.bsa-motion-sh, .bsa-motion-smooth-h, .bsa-motion-smooth, .bsa-motion-sw { animation: none !important; }
	.bsa-motion-sh { opacity: 1; transform: translateX(95px); }
	.bsa-motion-smooth-h { opacity: 1; transform: scaleX(.635); }
	.bsa-motion-smooth { opacity: 1; transform: scaleX(.5); }
	.bsa-motion-sw { opacity: 1; left: 50%; }
}