/**
 * First-visit festive intro.
 * The fixed, clipped layer never participates in page layout or pointer input.
 */

.zc-festive-intro {
	position: fixed;
	z-index: 800;
	top: var(--zc-intro-top, 0);
	left: 0;
	width: 100%;
	height: var(--zc-intro-height, 24rem);
	overflow: hidden;
	contain: layout paint style;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

.zc-festive-intro.is-active {
	opacity: 1;
	visibility: visible;
}

.zc-festive-intro__picture {
	display: block;
}

.zc-festive-intro__image {
	position: absolute;
	top: 2%;
	left: 0;
	display: block;
	width: min(72vw, 68.75rem);
	max-width: none;
	height: auto;
	opacity: 0;
	transform: translate3d(calc(-100% - 6vw), 12%, 0);
	will-change: transform, opacity;
}

.zc-festive-intro.is-active .zc-festive-intro__image {
  animation: zc-festive-flight 8s linear forwards;
}

@keyframes zc-festive-flight {
	0% {
		opacity: 0;
		transform: translate3d(calc(-100% - 6vw), 12%, 0);
	}

	10%,
	82% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translate3d(calc(100vw + 8vw), -16%, 0);
	}
}

@media (max-width: 559px) {
	.zc-festive-intro__image {
		top: 3%;
		width: min(92vw, 31.25rem);
		transform: translate3d(calc(-100% - 4vw), 5%, 0);
	}

	.zc-festive-intro.is-active .zc-festive-intro__image {
		animation-name: zc-festive-flight-mobile;
    animation-duration: 6s;
	}
}

@keyframes zc-festive-flight-mobile {
	0% {
		opacity: 0;
		transform: translate3d(calc(-100% - 4vw), 5%, 0);
	}

	12%,
	80% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translate3d(calc(100vw + 5vw), -8%, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.zc-festive-intro {
		display: none !important;
	}
}