/**
 * Capa de partículas compartida por animaciones y decoraciones (Fase 10).
 * Prefijo .wcrs-fx-*. Ver public/js/effects-base.js.
 */

.wcrs-fx-layer {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 5;
}

.wcrs-fx-particle {
	position: absolute;
	top: -10%;
	will-change: transform, opacity;
	line-height: 1;
	user-select: none;
}

@media (prefers-reduced-motion: no-preference) {
	.wcrs-fx-particle--fall {
		animation-name: wcrs-fx-fall;
		animation-timing-function: linear;
		animation-fill-mode: forwards;
	}
	.wcrs-fx-particle--float {
		bottom: -10%;
		top: auto;
		animation-name: wcrs-fx-float;
		animation-timing-function: ease-out;
		animation-fill-mode: forwards;
	}

	@keyframes wcrs-fx-fall {
		0% {
			transform: translateY(0) rotate(0deg);
			opacity: 1;
		}
		100% {
			transform: translateY(320px) rotate(var(--wcrs-fx-rotate, 20deg));
			opacity: 0;
		}
	}

	@keyframes wcrs-fx-float {
		0% {
			transform: translateY(0) scale(0.8);
			opacity: 0;
		}
		15% {
			opacity: 1;
		}
		100% {
			transform: translateY(-260px) scale(1.05);
			opacity: 0;
		}
	}
}

/* Sin animaciones de sistema activas: no se muestra ninguna partícula
   (defensa en profundidad; public/js/effects-base.js ya evita crearlas). */
@media (prefers-reduced-motion: reduce) {
	.wcrs-fx-particle {
		display: none;
	}
}