/* Geanimeerde visuals op de workshoppagina's ([ace_ws_visual], inc/workshop-visuals.php). */

.ace-wsv { position: relative; width: 100%; max-width: var(--wsv-breed, 460px); margin: 0 auto; aspect-ratio: var(--wsv-ratio, 1); }
.ace-wsv canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.ace-wsv.is-actief canvas { display: block; }
.ace-wsv noscript img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

/* Labels: tekst in de HTML, door het script op hun plek gezet. */
.ace-wsv-label {
	position: absolute; display: none; white-space: nowrap; pointer-events: none;
	font: 600 10px/1.3 Inter, sans-serif; font-size: max(8.5px, calc(10px * var(--wsv-u, 1))); letter-spacing: .12em; text-transform: uppercase; color: var(--awb-color6);
	opacity: 0; transition: opacity .6s .9s;
}
.ace-wsv.is-actief .ace-wsv-label { display: block; }
.ace-wsv.is-klein .ace-wsv-label { display: none; }
.ace-wsv.is-gestart .ace-wsv-label { opacity: 1; }
.ace-wsv.is-stil .ace-wsv-label { transition: none; }
.ace-wsv-label[data-anker="l"] { transform: translate(0, -50%); }
.ace-wsv-label[data-anker="r"] { transform: translate(-100%, -50%); }
.ace-wsv-label b { font-weight: 600; color: var(--awb-color8); margin-right: .5em; }
.ace-wsv-label strong { font-weight: 600; color: var(--awb-color2); }

@media (prefers-reduced-motion: reduce) {
	.ace-wsv-label { transition: none; }
}