/* BesteBlenders: beweging, alleen CSS, voorvoegsel bbl-motion-. Geen afhankelijkheden. Alleen in de hero en in de footer-strook.
   1) Hero (BBL_Motion::hero_svg): een glazen blenderkan; aardbei, banaan, spinazie en blauwe bes draaien in een rustige werveling (ellipsbanen)
      en gaan in 14 s over in een gladde smoothie. Daarna begint de lus opnieuw met vers fruit.
   2) Footer-strook (BBL_Motion::print_foot): dezelfde blender als de hero, kleiner, op een lichte band (geen beweging van links naar rechts).
   De koopbalk (bbl-sticky) heeft bewust geen beweging. prefers-reduced-motion: alles statisch. */

/* Fruitkleuren (hero en footer delen deze klassen) */
.bbl-motion-f1 { fill: #D64550; }
.bbl-motion-f2 { fill: #F2CF5B; }
.bbl-motion-f3 { fill: #3E9B5A; }
.bbl-motion-f4 { fill: #4A5FB5; }
.bbl-motion-leaf { fill: #2F7D46; }
.bbl-motion-vein { fill: none; stroke: #2A7A44; stroke-width: 1.6; stroke-linecap: round; }
.bbl-motion-crown { fill: #2E3F85; }
.bbl-motion-base { fill: #14543F; }
.bbl-motion-lid { fill: #14543F; }
.bbl-motion-glass { fill: none; stroke: #8FB8A5; stroke-width: 3; stroke-linejoin: round; }
.bbl-motion-glass-in { fill: #F4FAF7; }
.bbl-motion-liquid { fill: #D9809A; }

/* Hero */
.bbl-motion-hero { display: block; width: 100%; max-width: 360px; height: auto; margin-inline: auto; overflow: visible; }
.bbl-motion-shadow { fill: #14543F; opacity: .12; }
.bbl-motion-knob { fill: #E2A33B; }
.bbl-motion-led { fill: #3E9A74; }
.bbl-motion-shine { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; opacity: .7; }
.bbl-motion-smoothie { fill: #D9809A; opacity: 0; animation: bbl-motion-hsm 14s linear infinite; }
.bbl-motion-swirl { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 16 14; opacity: 0; animation: bbl-motion-hsw 14s linear infinite, bbl-motion-hdash 3.5s linear infinite; }
.bbl-motion-blade { transform-box: fill-box; transform-origin: center; animation: bbl-motion-hbl 1.6s ease-in-out infinite alternate; }
.bbl-motion-blade ellipse, .bbl-motion-blade rect { fill: #9DB8AB; }
.bbl-motion-ox { animation: bbl-motion-hox 8s ease-in-out infinite alternate; }
.bbl-motion-oy { animation: bbl-motion-hoy 8s ease-in-out infinite alternate; }
.bbl-motion-pc, .bbl-motion-leaf, .bbl-motion-vein, .bbl-motion-crown { transform-box: fill-box; transform-origin: center; animation: bbl-motion-hpc 14s linear infinite; }
@keyframes bbl-motion-hox { from { transform: translateX(calc(var(--ax, 40px) * -1)); } to { transform: translateX(var(--ax, 40px)); } }
@keyframes bbl-motion-hoy { from { transform: translateY(calc(var(--ay, 16px) * -1)); } to { transform: translateY(var(--ay, 16px)); } }
@keyframes bbl-motion-hpc {
	0% { opacity: 0; transform: scale(1); }
	6%, 20% { opacity: 1; transform: scale(1); }
	68%, 100% { opacity: 0; transform: scale(.2); }
}
@keyframes bbl-motion-hsm {
	0%, 14% { opacity: 0; }
	68%, 90% { opacity: .95; }
	100% { opacity: 0; }
}
@keyframes bbl-motion-hsw {
	0%, 10% { opacity: 0; }
	35% { opacity: .5; }
	78%, 100% { opacity: 0; }
}
@keyframes bbl-motion-hdash { to { stroke-dashoffset: -60; } }
@keyframes bbl-motion-hbl { from { transform: scaleX(1); } to { transform: scaleX(.55); } }

/* Footer-strook: dezelfde blender als de hero, kleiner, op een lichte band direct tegen de footer */
.bbl-motion-foot { display: block; width: 100%; overflow: hidden; background: #EEF7F2; border: 0; margin: 0; padding: 0; }
.bbl-motion-foot + .ct-footer, .bbl-motion-foot + #footer.ct-footer { margin-top: 0; border-top: 0; }
.bbl-motion-strip { display: flex; justify-content: center; align-items: center; padding: 20px 16px 8px; }
.bbl-motion-foot .bbl-motion-hero { max-width: 120px; }
.bbl-js .bbl-motion-foot:not(.is-on) .bbl-motion-strip * { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
	.bbl-motion-smoothie, .bbl-motion-swirl, .bbl-motion-blade, .bbl-motion-ox, .bbl-motion-oy, .bbl-motion-pc, .bbl-motion-leaf, .bbl-motion-vein, .bbl-motion-crown,
	
	/* statisch beeld: het fruit ligt half gemengd, de smoothie staat er al deels */
	.bbl-motion-smoothie { opacity: .55; }
	.bbl-motion-swirl { opacity: .45; }
	.bbl-motion-ox { transform: translateX(calc(var(--ax, 40px) * -.4)); }
	.bbl-motion-oy { transform: translateY(calc(var(--ay, 16px) * .4)); }
	.bbl-motion-pc, .bbl-motion-leaf, .bbl-motion-vein, .bbl-motion-crown { opacity: .85; transform: scale(.7); }
}