/*
 * Corazones que suben como globos (corazones.js), compartidos por la pila
 * del hero y la pantalla de gracias del formulario. La capa se crea dentro
 * de un contenedor posicionado; sin JS no existe.
 */

.helenasunday-corazones {
	position: absolute;
	inset: 0;
	z-index: 6;
	pointer-events: none;
	/* Los corazones suben por encima de la pila: no se recortan. */
	overflow: visible;
}

.helenasunday-corazon {
	--helenasunday-corazon-escala: 1;
	position: absolute;
	display: block;
	/* 1em del tamaño x-large del tema, escalado al azar por el JS. */
	width: calc(1em * var(--helenasunday-corazon-escala));
	height: calc(1em * var(--helenasunday-corazon-escala));
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--primary-container);
	/* Una sombra suave para que se lean igual sobre la foto que sobre el
	   fondo claro de la página. */
	filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--wp--preset--color--on-surface) 28%, transparent));
	opacity: 0;
	will-change: transform, opacity;
}

.helenasunday-corazon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.helenasunday-corazon--magenta {
	color: var(--wp--preset--color--primary);
}

.helenasunday-corazon--naranja {
	color: var(--wp--preset--color--tertiary-container);
}

@media (prefers-reduced-motion: reduce) {
	.helenasunday-corazones {
		display: none;
	}
}