/* Estado inicial: Todos los elementos están ocultos o en sus posiciones iniciales */
.diana-group path,
.estado-inicial .diana-group path {
		transform-box: fill-box;
		transform-origin: center;
		transform: scale(0);
}

.dardo-group,
.estado-inicial .dardo-group {
		transform: rotate(20deg) translateX(100%);
		transform-origin: bottom left;
}

/* Animación de ida: Expansión de la diana y llegada del dardo */
.animacion-ida .diana-group path {
	animation: expand 0.5s ease-in-out forwards;
}
.animacion-ida .diana-group path:nth-child(1) {
	animation-delay: 0s;
}
	.animacion-ida .diana-group path:nth-child(2) {
	animation-delay: 0.2s;
}
.animacion-ida .diana-group path:nth-child(3) {
	animation-delay: 0.4s;
}
.animacion-ida .diana-group path:nth-child(4) {
	animation-delay: 0.6s;
}
.animacion-ida .diana-group path:nth-child(5) {
	animation-delay: 0.8s;
}

.animacion-ida .dardo-group {
	animation: throw-dart 0.2s ease-out 1.5s forwards;
}

/* Estado final de ida: Diana expandida y dardo en el centro */
.estado-final-ida .diana-group path {
	transform: scale(1);
}

.estado-final-ida .dardo-group {
	transform: translateX(0);
	animation: dardo-wobble 0.3s infinite alternate;
	animation-iteration-count: 1;
}

/* Animación de vuelta: Contracción de la diana y salida del dardo */
.animacion-vuelta .diana-group path {
	animation: reverse-expand 0.3s ease-out forwards;
	transform: scale(1);
}
.animacion-vuelta .diana-group path:nth-child(1) {
	animation-delay: 0s;
}
.animacion-vuelta .diana-group path:nth-child(2) {
	animation-delay: 0.1s;
}
.animacion-vuelta .diana-group path:nth-child(3) {
	animation-delay: 0.2s;
}
.animacion-vuelta .diana-group path:nth-child(4) {
	animation-delay: 0.3s;
}
.animacion-vuelta .diana-group path:nth-child(5) {
	animation-delay: 0.4s;
}

.animacion-vuelta .dardo-group {
	animation: reset-dart 0.2s ease-out forwards;
}

/* Keyframes */

/* Expansión de la diana */
@keyframes expand {
	0% {
		transform: scale(0);
	}
	80% {
		transform: scale(1.1);
	}
	90% {
		transform: scale(0.9);
	}
	100% {
		transform: scale(1);
	}
}

/* Contracción de la diana */
@keyframes reverse-expand {
	100% {
		transform: scale(0);
	}
	20% {
		transform: scale(1.1);
	}
	30% {
		transform: scale(1.2);
	}
	0% {
		transform: scale(1);
	}
}

/* Movimiento del dardo hacia el centro */
@keyframes throw-dart {
	from {
		transform: rotate(20deg) translateX(100%);
	}
	to {
		transform: rotate(0) translateX(0);
	}
}

/* Movimiento del dardo en wobble */
@keyframes dardo-wobble {
	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(1deg);
	}
	50% {
		transform: rotate(-1deg);
	}
	75% {
		transform: rotate(0.5deg);
	}
	100% {
		transform: rotate(-0.5deg);
	}
}

/* Retroceso del dardo */
@keyframes reset-dart {
	from {
		transform: rotate(0) translateX(0);
	}
	to {
		transform: rotate(20deg) translateX(100%);
	}
}