.jpod-ambient-effect {
	position: fixed;
	z-index: 50;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	contain: strict;
}

.jpod-ambient-effect__particle {
	--jpod-ambient-delay: 0ms;
	--jpod-ambient-drift: 0vw;
	--jpod-ambient-duration: 6500ms;
	--jpod-ambient-scale: 1;
	--jpod-ambient-spin: 540deg;
	--jpod-ambient-spin-28: 151deg;
	--jpod-ambient-spin-55: 297deg;
	--jpod-ambient-spin-78: 421deg;
	--jpod-ambient-sway: 4vw;
	--jpod-ambient-tilt: 0deg;
	--jpod-ambient-tilt-end: 0deg;
	--jpod-ambient-tilt-mid: 0deg;
	--jpod-ambient-x: 50vw;
	--jpod-ambient-y: 50vh;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	opacity: 0;
	will-change: transform, opacity;
	animation: jpod-ambient-fall var(--jpod-ambient-duration) linear var(--jpod-ambient-delay) both paused;
}

.jpod-ambient-effect.is-active .jpod-ambient-effect__particle {
	animation-play-state: running;
}

.jpod-ambient-effect__art {
	display: block;
	width: 24px;
	height: 30px;
	filter: drop-shadow(0 2px 1px rgb(0 0 0 / 18%));
}

.jpod-ambient-effect__particle--leaf .jpod-ambient-effect__art {
	width: 37px;
	height: 40px;
	background: url('../effects/autumn-maple-leaf.png') center / contain no-repeat;
}

.jpod-ambient-effect__particle--missile {
	animation-name: jpod-ambient-fly-right;
}

.jpod-ambient-effect__particle--missile .jpod-ambient-effect__art {
	width: 122px;
	height: 69px;
	background: url('../effects/flamingo-missile.png') center / contain no-repeat;
	filter: drop-shadow(0 3px 2px rgb(0 0 0 / 24%));
}

.jpod-ambient-effect__particle--snow .jpod-ambient-effect__art {
	width: 9px;
	height: 9px;
	background: var(--jpod-ambient-particle-color);
	border-radius: 50%;
	box-shadow: 0 0 7px rgb(255 255 255 / 65%);
}

.jpod-ambient-effect__particle--sale .jpod-ambient-effect__art {
	width: auto;
	height: auto;
	padding: 7px 10px;
	border: 2px solid var(--wp--preset--color--ink, #171717);
	border-radius: 2px;
	background: var(--jpod-ambient-particle-color);
	box-shadow: 4px 4px 0 rgb(23 23 23 / 28%);
	color: var(--wp--preset--color--ink, #171717);
	font-family: var(--wp--preset--font-family--display, sans-serif);
	font-size: 15px;
	font-weight: 750;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
}

@keyframes jpod-ambient-fall {
	0% {
		opacity: 0;
		transform: translate3d(var(--jpod-ambient-x), -12vh, 0) rotate(0deg) scale(var(--jpod-ambient-scale));
	}

	8% {
		opacity: 0.82;
	}

	28% {
		transform: translate3d(calc(var(--jpod-ambient-x) + var(--jpod-ambient-sway)), 24vh, 0) rotate(var(--jpod-ambient-spin-28)) scale(var(--jpod-ambient-scale));
	}

	55% {
		transform: translate3d(calc(var(--jpod-ambient-x) + var(--jpod-ambient-drift)), 54vh, 0) rotate(var(--jpod-ambient-spin-55)) scale(var(--jpod-ambient-scale));
	}

	78% {
		opacity: 0.75;
		transform: translate3d(calc(var(--jpod-ambient-x) + var(--jpod-ambient-drift) - var(--jpod-ambient-sway)), 80vh, 0) rotate(var(--jpod-ambient-spin-78)) scale(var(--jpod-ambient-scale));
	}

	100% {
		opacity: 0;
		transform: translate3d(calc(var(--jpod-ambient-x) + var(--jpod-ambient-drift)), 112vh, 0) rotate(var(--jpod-ambient-spin)) scale(var(--jpod-ambient-scale));
	}
}

@keyframes jpod-ambient-fly-right {
	0% {
		opacity: 0;
		transform: translate3d(-24vw, var(--jpod-ambient-y), 0) rotate(var(--jpod-ambient-tilt)) scale(var(--jpod-ambient-scale));
	}

	10% {
		opacity: 0.88;
	}

	35% {
		transform: translate3d(28vw, calc(var(--jpod-ambient-y) + var(--jpod-ambient-sway)), 0) rotate(var(--jpod-ambient-tilt-mid)) scale(var(--jpod-ambient-scale));
	}

	65% {
		transform: translate3d(72vw, calc(var(--jpod-ambient-y) + var(--jpod-ambient-drift)), 0) rotate(var(--jpod-ambient-tilt-end)) scale(var(--jpod-ambient-scale));
	}

	90% {
		opacity: 0.82;
	}

	100% {
		opacity: 0;
		transform: translate3d(124vw, calc(var(--jpod-ambient-y) + var(--jpod-ambient-drift) - var(--jpod-ambient-sway)), 0) rotate(var(--jpod-ambient-tilt)) scale(var(--jpod-ambient-scale));
	}
}

@media (prefers-reduced-motion: reduce) {
	.jpod-ambient-effect {
		display: none !important;
	}
}