.christmas-party {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9998;
	height: 240px;
	pointer-events: none;
	overflow: hidden;
}

.christmas-party__water {
	position: absolute;
	right: 0;
	bottom: -10px;
	left: 0;
	height: 110px;
	background: url('../images/animation-weihnachtsmann/water_seamless.png') repeat-x center bottom;
	background-size: 886px 110px;
	animation: christmas-party-water 20s linear infinite;
}

.christmas-party__santa {
	position: absolute;
	bottom: 35px;
	width: min(500px, 35vw);
	aspect-ratio: 800 / 342;
	will-change: transform;
}

.christmas-party__mobile-santa {
	display: none;
}

a.christmas-party__santa {
	pointer-events: auto;
	cursor: pointer;
}

.christmas-party__santa--left-to-right {
	left: 0;
	transform: translateX(-100%);
}

.christmas-party__santa--right-to-left {
	right: 0;
	transform: translateX(100%);
}

.christmas-party__frame {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
}

.christmas-party__frame:first-child {
	opacity: 1;
}

.christmas-party__santa.is-riding .christmas-party__frame:nth-child(1) {
	animation: christmas-party-frame-1 0.96s steps(1, end) infinite;
}

.christmas-party__santa.is-riding .christmas-party__frame:nth-child(2) {
	animation: christmas-party-frame-2 0.96s steps(1, end) infinite;
}

.christmas-party__santa.is-riding .christmas-party__frame:nth-child(3) {
	animation: christmas-party-frame-3 0.96s steps(1, end) infinite;
}

.christmas-party__santa.is-riding .christmas-party__frame:nth-child(4) {
	animation: christmas-party-frame-4 0.96s steps(1, end) infinite;
}

.christmas-party__santa--left-to-right.is-riding {
	animation: christmas-party-left-to-right 16s linear forwards;
}

.christmas-party__santa--right-to-left.is-riding {
	animation: christmas-party-right-to-left 16s linear forwards;
}

@keyframes christmas-party-left-to-right {
	from {
		transform: translateX(-100%);
	}

	to {
		transform: translateX(calc(100vw + 100%));
	}
}

@keyframes christmas-party-right-to-left {
	from {
		transform: translateX(100%);
	}

	to {
		transform: translateX(calc(-100vw - 100%));
	}
}

@keyframes christmas-party-water {
	from {
		background-position: 0 bottom;
	}

	to {
		background-position: 886px bottom;
	}
}

@keyframes christmas-party-frame-1 {
	0%, 24.99% { opacity: 1; }
	25%, 100% { opacity: 0; }
}

@keyframes christmas-party-frame-2 {
	0%, 24.99% { opacity: 0; }
	25%, 49.99% { opacity: 1; }
	50%, 100% { opacity: 0; }
}

@keyframes christmas-party-frame-3 {
	0%, 49.99% { opacity: 0; }
	50%, 74.99% { opacity: 1; }
	75%, 100% { opacity: 0; }
}

@keyframes christmas-party-frame-4 {
	0%, 74.99% { opacity: 0; }
	75%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.christmas-party__water {
		animation: none;
	}

	.christmas-party__santa {
		display: none;
	}
}