<div class="container">
	<form>
		<input type="radio" id="step-one" name="step" checked />
		<input type="radio" id="step-two" name="step" />
		<input type="radio" id="step-three" name="step" />
		<input type="radio" id="step-four" name="step" />
		<input type="radio" id="step-five" name="step" />
		<div id="dialog-one" class="dialog">
			<span>Vamos a ver un truco de magia</span>
			<label for="step-two">Comenzamos</label>
		</div>
		<div id="dialog-two" class="dialog">
			<span>Os voy a mostrar 6 cartas</span>
			<label for="step-three">Mostrar</label>
		</div>
		<div id="dialog-three" class="dialog">
			<div>Elige una carta pero no me la digas</div>
			<label for="step-four">Ocultar</label>
		</div>
		<div id="dialog-four" class="dialog">
			<div>Piensa muy fuerte en tu carta!!</div>
			<label for="step-five">Resultado</label>
		</div>
		<div id="dialog-five" class="dialog">
			<div>He enviado tu carta al cementerio</div>
			<input type="reset" value="Comienza de nuevo!" id="reset" />
		</div>
		<div class="cards" id="cards-one">
		</div>
		<div class="cards" id="cards-two">
		</div>
		<div class="cards" id="cards-three">
		</div>
	</form>
</div>

<div class="box">
    <div>
        <span aria-label="Biznaga" style="--i:1;"></span>
        <!-- Repite para los demás elementos, cambiando el valor de --i -->
    </div>
</div>

@media (prefers-reduced-motion: reduce) {
    .box div {
        animation: none;
    }
}