/* ==================================================

	Winner splash

	Covers the page on load at the winner milestone: sprinkles rain through, then the two halves part and fade (js/winner.js). Positions are the desktop frame's in design px, times --u, which shrinks the scene to fit a narrow or short viewport.

	@related stacking_order

================================================== */

.winner-splash {
	--u: min(1px, calc((100vw - 32px) / 654), calc(100vh / 840));
	--u: min(1px, calc((100vw - 32px) / 654), calc(100dvh / 840));
	--shift: 0px;

	/* @match winner_fall_vars - custom properties that time the sprinkle rain */
	--fall-delay:     .3s;
	--fall-time:      3s;
	--leave-time:     1.2s;
	--leave-overlap:  .75s;
	--failsafe-delay: 6s;

	position: fixed;
	inset: 0;
	z-index: var(--z-winner-splash);

	display: none;

	overflow: hidden;

	/* the hold is a timer: winner.js starts the exit when it ends. Delays survive the reduced-motion rule where durations don't, so the splash holds for the same beat either way. The failsafe clears it for a visitor without the script */
	animation:
		winner-splash-hold 1ms linear calc(var(--fall-delay) + var(--fall-time) - var(--leave-overlap)) both,
		winner-splash-failsafe 1ms linear var(--failsafe-delay) forwards;
}

html[data-milestone="winner"] .winner-splash {
	display: block;
}

/* winner.js holds the page still until the halves start to part; the gutter stays so nothing shifts when the scrollbar comes back */
html.is-scroll-locked {
	overflow: hidden;
	scrollbar-gutter: stable;
}

.winner-splash.is-leaving {
	pointer-events: none;
}

.winner-splash__bg {
	position: absolute;
	inset: 0;

	background-color: var(--mint);
}

/* -------------------------------------
	=Top half
------------------------------------- */

.winner-splash__top,
.winner-splash__bottom {
	position: absolute;
	left: 0;
	right: 0;
}

.winner-splash__top {
	top: var(--shift);
}

.winner-splash__title {
	position: absolute;
	top:  calc(49.907 * var(--u));
	left: calc(50% - 286.297 * var(--u));

	/* @match winner_title_w - the title's drawn width in design px; the sprinkles scale with the scene through it */
	width:  calc(572.588 * var(--u));
	height: auto;
	max-width: none;
}

/* -------------------------------------
	=Bottom half

	The cloud widens past its drawn size on wide screens so its edges never show; the text keeps the scene's scale.
------------------------------------- */

.winner-splash__bottom {
	--cloud-w: max(calc(1736.583 * var(--u)), 120.6vw);

	top: calc(var(--shift) + 531.682 * var(--u));

	height: 100vh;
}

.winner-splash__bottom::after {
	content: '';

	position: absolute;
	top: calc(var(--cloud-w) * 0.7839 - 1px); /* 1361.318 / 1736.583 */
	left: 0;
	right: 0;

	height: 100vh;

	background-color: var(--sky);
}

.winner-splash__cloud {
	position: absolute;
	top: 0;
	left: calc(50% - var(--cloud-w) / 2 + 7.6 * var(--u));

	width: var(--cloud-w);
	height: auto;
	max-width: none;
}

.winner-splash__congrats {
	position: absolute;
	top:  calc(92.711 * var(--u));
	left: calc(50% - 329.08 * var(--u));

	width:  calc(653.762 * var(--u));
	height: auto;
	max-width: none;
}

/* -------------------------------------
	=Sprinkles

	Drawn by js/winner.js.
------------------------------------- */

.winner-splash__sprinkles,
.winner-splash__confetti {
	position: absolute;
	inset: 0;
}

.winner-splash__confetti {
	width:  100%;
	height: 100%;
}

/* -------------------------------------
	=Exit
------------------------------------- */

.winner-splash.is-leaving .winner-splash__bg,
.winner-splash.is-leaving .winner-splash__sprinkles {
	animation: winner-splash-fade var(--leave-time) linear both;
}

.winner-splash.is-leaving .winner-splash__top {
	animation: winner-splash-rise var(--leave-time) ease-in-out both;
}

.winner-splash.is-leaving .winner-splash__bottom {
	animation: winner-splash-sink var(--leave-time) ease-in-out both;
}

/* -------------------------------------
	=Keyframes
------------------------------------- */

/* @match winner_splash_keyframes - keyframe names the script waits on */
@keyframes winner-splash-hold {
	to {
		opacity: 1;
	}
}

@keyframes winner-splash-failsafe {
	to {
		visibility: hidden;
	}
}

/* @match winner_splash_keyframes - keyframe names the script waits on */
@keyframes winner-splash-fade {
	30% {
		opacity: .75;
	}
	70% {
		opacity: .1;
	}
	to {
		opacity: 0;
	}
}

@keyframes winner-splash-rise {
	to {
		transform: translateY(calc(-480 * var(--u)));
		opacity: 0;
	}
}

@keyframes winner-splash-sink {
	to {
		transform: translateY(calc(720 * var(--u)));
		opacity: 0;
	}
}

/* -------------------------------------
	=Mobile

	No mobile frame: the scene centers in a tall screen instead of hugging the top.
------------------------------------- */

@media ( max-width: 1076px ) {

	.winner-splash {
		--shift: max(0px, calc((100vh - 725 * var(--u)) / 2 - 50 * var(--u)));
		--shift: max(0px, calc((100dvh - 725 * var(--u)) / 2 - 50 * var(--u)));
	}

}