/**
 * Annual Gala mock header — Donate Today floating heart hover effect.
 * Copied from Divi child crcc-donate-hearts.css for production (copperridge2).
 * Targets .crcc-header-donate. JS injects .crcc-header-donate__heart-layer.
 */

.crcc-header .et_pb_button_module_wrapper:has(.crcc-header-donate),
.crcc-header .crcc-header-donate {
	position: relative;
	overflow: visible !important;
}

.crcc-header .crcc-header-donate__heart-layer {
	position: absolute;
	inset: 0;
	overflow: visible;
	pointer-events: none;
	z-index: 2;
}

.crcc-header .crcc-header-donate .crcc-heart {
	position: absolute;
	top: 65%;
	width: var(--size, 16px);
	height: var(--size, 16px);
	opacity: 0;
	pointer-events: none;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
	animation: crcc-heart-float var(--dur, 1s) ease-out forwards;
	will-change: transform, opacity;
}

.crcc-header .crcc-header-donate .crcc-heart svg {
	display: block;
	width: 100%;
	height: 100%;
}

@keyframes crcc-heart-float {
	0% {
		opacity: 0;
		transform: translate(-50%, 0) scale(0) rotate(0deg);
	}

	25% {
		opacity: 1;
		transform: translate(-50%, calc(var(--dy) * 0.35)) scale(1) rotate(calc(var(--rot) * 0.4));
	}

	75% {
		opacity: 1;
		transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(1) rotate(var(--rot));
	}

	100% {
		opacity: 0;
		transform: translate(calc(-50% + var(--dx)), calc(var(--dy) - 8px)) scale(1) rotate(var(--rot));
	}
}

@media (prefers-reduced-motion: reduce) {
	.crcc-header .crcc-header-donate .crcc-heart {
		animation: none !important;
		display: none !important;
	}
}