/* BesteStijltang: hero-animatie "stijltang glijdt over een golvende lok: krullend ervoor, glad erna" (BST_Motion::hero_svg). Alleen CSS, voorvoegsel bst-motion-.
   Cyclus 10 s: de tang glijdt in ca. 6,5 s van boven naar onder. De golvende lok (golfpaden, van onderaf getekend) verdwijnt boven de tang via stroke-dasharray,
   de gladde lok (rechte paden, van bovenaf) verschijnt er precies voor in de plaats. Onderaan blijft het beeld even staan, daarna vervaagt het en begint het opnieuw.
   De hero is donkerroze (#7A1040): haar in warme tinten, tang in lichtroze en wit. prefers-reduced-motion: alles stil, het haar is helemaal glad en de tang is er al voorbij. */
.bst-motion-hero { display: block; width: 100%; max-width: 360px; height: auto; margin-inline: auto; overflow: visible; }
.bst-motion-glow { fill: #fff; opacity: .1; }
.bst-motion-root { fill: #F4B6CF; }
.bst-motion-wavy, .bst-motion-flat { fill: none; stroke-width: 10; stroke-linecap: butt; stroke-linejoin: round; }
.bst-motion-hair1 { stroke: #E9B38E; } .bst-motion-hair2 { stroke: #D99872; } .bst-motion-hair3 { stroke: #F3C9A8; }
.bst-motion-wavy { stroke-dasharray: 50 200; animation: bst-motion-wavy 10s linear infinite; }
.bst-motion-flat { stroke-dasharray: 50 200; animation: bst-motion-flat 10s linear infinite; }
.bst-motion-tang { animation: bst-motion-tang 10s linear infinite; transform: translateY(165px); }
.bst-motion-scene { animation: bst-motion-scene 10s linear infinite; }
.bst-motion-arm { fill: #FDF3F7; stroke: #F4B6CF; stroke-width: 1.5; }
.bst-motion-plate { fill: #E0508F; }
.bst-motion-hinge { fill: #F4B6CF; stroke: #FDF3F7; stroke-width: 1.5; }
.bst-motion-grip { fill: #E0508F; stroke: #FDF3F7; stroke-width: 1.5; }
.bst-motion-btn { fill: #fff; stroke: #A3295F; stroke-width: 1.5; }
.bst-motion-led { fill: #FDF3F7; }
@keyframes bst-motion-tang { 0%, 8% { transform: translateY(0); animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 72%, 94% { transform: translateY(400px); } 95%, 100% { transform: translateY(0); } }
@keyframes bst-motion-wavy { 0%, 8% { stroke-dasharray: 92.5 200; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }  72%, 94% { stroke-dasharray: 0 200; } 95%, 100% { stroke-dasharray: 92.5 200; } }
@keyframes bst-motion-flat { 0%, 8% { stroke-dasharray: 7.5 200; animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 72%, 94% { stroke-dasharray: 100 200; } 95%, 100% { stroke-dasharray: 7.5 200; } }
@keyframes bst-motion-scene { 0%, 86% { opacity: 1; } 93%, 95% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.bst-motion-wavy, .bst-motion-flat, .bst-motion-tang, .bst-motion-scene { animation: none; }
	.bst-motion-wavy { stroke-dasharray: 0 200; }
	.bst-motion-flat { stroke-dasharray: 100 200; }
	.bst-motion-tang { transform: translateY(400px); }
}

/* Footer: dezelfde tekening als de hero, kleiner, op de donkere footerachtergrond, direct boven de footer. Zelfde animatie; geen horizontale strook of scroll-motion. */
.bst-motion-foot { display: block; width: 100%; margin: 0; padding: 1.4rem 0 .4rem; border: 0; background: var(--bst-id-ink, #7A1040); }
.bst-motion-foot__in { box-sizing: border-box; max-width: min(1152px, calc(100% - 32px)); margin: 0 auto; text-align: center; }
.bst-motion-foot .bst-motion-hero { display: inline-block; width: auto; max-width: 100%; height: 130px; margin: 0; }
@media (min-width: 900px) { .bst-motion-foot .bst-motion-hero { height: 170px; } }
.bst-js .bst-motion-foot:not(.is-on) .bst-motion-hero, .bst-js .bst-motion-foot:not(.is-on) .bst-motion-hero * { animation-play-state: paused; }
.bst-motion-foot + .ct-footer, .bst-motion-foot + #footer.ct-footer { margin-top: 0; border-top: 0; }
/* Footer-motion onder het adres in de kolom Juridisch */
.bst-motion-foot--col { background: transparent; padding: 1.2rem 0 0; margin: 0; }
.bst-motion-foot--col .bst-motion-foot__in { max-width: none; margin: 0; text-align: left; }
.bst-motion-foot--col .bst-motion-hero { height: 150px; }
@media (min-width: 900px) { .bst-motion-foot--col .bst-motion-hero { height: 190px; } }