/* Page-change animation: two sheets of metal, a cutting wheel, sparks.
   Everything here is a stand-in drawn in CSS, to be replaced by the 3D
   animation. What the artwork has to fit:

   .sheet--left / .sheet--right  one sheet each, meeting in the middle.
                                 Give them background-image (PNG/WebP with a
                                 transparent, cut edge) instead of the gradients.
   .cut__wheel / .cut__sparks    the wheel and the burst, riding down the seam.
                                 A video on black can replace them: put it in
                                 .cut and give it mix-blend-mode: screen.

   Times come from inc/transition.php (--t-close, --t-open, --t-short). */

.page-transition {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	overflow: hidden;
	pointer-events: none;
	contain: strict;
}

/* Shown only while a change of page is running. */
.mitr-entering .page-transition,
.mitr-leaving .page-transition { display: block; }
.mitr-leaving .page-transition { pointer-events: auto; } /* No second click mid-animation. */

/* ---------- The sheets ---------- */

.sheet {
	position: absolute;
	top: -2%;
	width: 51%;
	height: 104%;
	/* Rolled steel: a cool grey with the light running across it. */
	background:
		repeating-linear-gradient(92deg, rgba(255, 255, 255, .045) 0 2px, rgba(0, 0, 0, .05) 2px 5px),
		linear-gradient(104deg, #2b3641 0%, #55677a 18%, #8ea6b4 33%, #4d5f70 48%, #35424e 62%, #6d8496 80%, #2c3a47 100%),
		#333f4b;
	box-shadow: inset 0 0 120px rgba(0, 0, 0, .55);
}

.sheet--left {
	left: 0;
	transform: translate3d(-101%, 0, 0);
	/* The cut edge: torn, not straight. */
	clip-path: polygon(0 0, 97% 0, 99% 4%, 96% 9%, 99% 15%, 97% 21%, 100% 27%, 97% 33%, 99% 39%, 96% 45%, 99% 51%, 97% 57%, 100% 63%, 96% 69%, 99% 75%, 97% 81%, 100% 87%, 97% 93%, 99% 97%, 97% 100%, 0 100%);
}

.sheet--right {
	right: 0;
	transform: translate3d(101%, 0, 0);
	clip-path: polygon(100% 0, 3% 0, 1% 4%, 4% 9%, 1% 15%, 3% 21%, 0 27%, 3% 33%, 1% 39%, 4% 45%, 1% 51%, 3% 57%, 0 63%, 4% 69%, 1% 75%, 3% 81%, 0 87%, 3% 93%, 1% 97%, 3% 100%, 100% 100%);
	background-position: right;
}

/* Arriving on a new page: the sheets are already shut. */
.mitr-entering .sheet--left,
.mitr-entering .sheet--right { transform: translate3d(0, 0, 0); }

/* ---------- The cut: seam, wheel, sparks ---------- */

.cut {
	position: absolute;
	left: 50%;
	top: 0;
	width: 0;
	height: 100%;
	opacity: 0;
}

/* The glowing line the wheel leaves behind. */
.cut__seam {
	position: absolute;
	left: -3px;
	top: 0;
	width: 6px;
	height: 100%;
	background: linear-gradient(180deg, rgba(255, 176, 120, .95), rgba(255, 106, 60, .75) 60%, rgba(255, 60, 20, 0));
	filter: blur(2px);
	transform-origin: top;
	transform: scaleY(0);
}

/* What travels down the seam: the grinder, its disc and the burst ride on
   this, so the spinning of the disc never turns the direction it travels in.
   Hidden until the cut runs, otherwise the tool would sit parked at the top of
   the screen while the sheets close. */
.cut__runner {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	opacity: 0;
}

/* The wheel itself: it only spins. */
.cut__wheel {
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
	width: 84px;
	height: 84px;
	margin: -42px 0 0 -42px;
	border-radius: 50%;
	background:
		/* hub */
		radial-gradient(circle at 50% 50%, #e8eef1 0 7%, #8d9aa4 8% 13%, transparent 14%),
		/* hot rim where it bites */
		radial-gradient(circle at 50% 50%, transparent 0 88%, rgba(255, 190, 130, .9) 90%, rgba(255, 120, 60, .5) 97%, transparent 100%),
		/* worn abrasive face, blurred by the speed */
		conic-gradient(from 0deg, #59636c 0 6%, #6b757e 6% 12%, #59636c 12% 18%, #6b757e 18% 24%, #59636c 24% 30%, #6b757e 30% 36%, #59636c 36% 42%, #6b757e 42% 48%, #59636c 48% 54%, #6b757e 54% 60%, #59636c 60% 66%, #6b757e 66% 72%, #59636c 72% 78%, #6b757e 78% 84%, #59636c 84% 90%, #6b757e 90% 96%, #59636c 96% 100%);
	box-shadow: 0 0 30px 6px rgba(255, 138, 74, .5), 0 0 80px 26px rgba(255, 90, 40, .22);
	filter: blur(.3px);
}

/* ---------- The angle grinder ----------
   Everything sits at the runner's origin, which is the point where the disc
   meets the seam, and angles up to the right: body, rear grip, side handle,
   and the guard hood over the back of the disc. A 3D grinder replaces the
   whole .cut__tool block; nothing else needs to change. */

.cut__tool {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	transform: rotate(-32deg); /* The angle the tool is held at. */
	transform-origin: 0 0;
}

/* Motor housing. */
.cut__body {
	position: absolute;
	left: 46px;
	top: -30px;
	width: 148px;
	height: 60px;
	border-radius: 14px 30px 30px 14px;
	background:
		linear-gradient(180deg, #7a858d 0%, #4a545d 42%, #2f373e 100%);
	box-shadow: inset 0 -6px 12px rgba(0, 0, 0, .45), inset 0 5px 10px rgba(255, 255, 255, .16);
}
/* The band of air vents, in the theme's accent. */
.cut__body::after {
	content: "";
	position: absolute;
	left: 62px;
	top: 12px;
	width: 56px;
	height: 36px;
	border-radius: 6px;
	background: repeating-linear-gradient(90deg, rgba(232, 146, 125, .85) 0 3px, rgba(20, 24, 28, .6) 3px 9px);
}

/* Rear grip. */
.cut__grip {
	position: absolute;
	left: 186px;
	top: -22px;
	width: 62px;
	height: 44px;
	border-radius: 10px 18px 18px 10px;
	background: linear-gradient(180deg, #414a52, #22282e);
	box-shadow: inset 0 -4px 8px rgba(0, 0, 0, .5);
}

/* Side handle, gripped by the other hand. */
.cut__side {
	position: absolute;
	left: 60px;
	top: -86px;
	width: 22px;
	height: 62px;
	border-radius: 11px;
	background: linear-gradient(180deg, #2b3138, #4b555e);
	transform: rotate(18deg);
}

/* Guard hood: covers the back half of the disc, open towards the cut. */
.cut__guard {
	position: absolute;
	left: -58px;
	top: -58px;
	width: 116px;
	height: 116px;
	border-radius: 50%;
	background: linear-gradient(200deg, #6f7a83, #39424a 60%, #262d33);
	clip-path: polygon(50% 50%, 120% 0, 120% 120%, 50% 120%);
	box-shadow: inset -4px 0 10px rgba(0, 0, 0, .4);
}

/* The white-hot point of contact. */
.cut__runner::after {
	content: "";
	z-index: 3;
	position: absolute;
	left: -14px;
	top: -14px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: radial-gradient(circle, #fff 0 20%, rgba(255, 214, 160, .9) 35%, rgba(255, 130, 60, .5) 60%, transparent 75%);
}

/* The burst where the wheel bites. */
.cut__sparks {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
}
.cut__sparks i {
	position: absolute;
	z-index: 4;
	left: 0;
	top: 0;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #fff3d6;
	box-shadow: 0 0 7px 2px rgba(255, 150, 60, .95);
	opacity: 0;
}

/* ---------- Closing: the sheets come together ---------- */

.mitr-leaving .sheet--left { animation: sheet-in-left var(--t-close, 620ms) cubic-bezier(.4, 0, .2, 1) both; }
.mitr-leaving .sheet--right { animation: sheet-in-right var(--t-close, 620ms) cubic-bezier(.4, 0, .2, 1) both; }
.mitr-leaving .cut { opacity: 1; }
.mitr-leaving .cut__seam { animation: seam-flash var(--t-close, 620ms) ease-out both; }

@keyframes sheet-in-left {
	from { transform: translate3d(-101%, 0, 0); }
	to { transform: translate3d(0, 0, 0); }
}
@keyframes sheet-in-right {
	from { transform: translate3d(101%, 0, 0); }
	to { transform: translate3d(0, 0, 0); }
}
@keyframes seam-flash {
	0%, 74% { transform: scaleY(0); opacity: 0; }
	86% { transform: scaleY(1); opacity: .9; }
	100% { transform: scaleY(1); opacity: .45; }
}

/* ---------- Opening: the wheel cuts, the sheets part ---------- */

.mitr-opening .cut { animation: cut-fade var(--t-open, 1150ms) linear both; }
.mitr-opening .cut__seam { animation: seam-cut calc(var(--t-open, 1150ms) * .42) linear both; }
.mitr-opening .cut__runner { animation: wheel-run calc(var(--t-open, 1150ms) * .42) linear both; }
.mitr-opening .cut__wheel { animation: wheel-spin .2s linear infinite; }
.mitr-opening .cut__sparks i { animation: spark calc(var(--t-open, 1150ms) * .3) ease-out infinite; animation-delay: var(--s, 0ms); }
.mitr-opening .sheet--left { animation: sheet-out-left calc(var(--t-open, 1150ms) * .62) cubic-bezier(.65, 0, .35, 1) both; animation-delay: calc(var(--t-open, 1150ms) * .38); }
.mitr-opening .sheet--right { animation: sheet-out-right calc(var(--t-open, 1150ms) * .62) cubic-bezier(.65, 0, .35, 1) both; animation-delay: calc(var(--t-open, 1150ms) * .38); }

/* The quicker version, from the second page change on: no wheel, the sheets
   simply part. */
.mitr-short .cut { display: none; }
.mitr-short.mitr-opening .sheet--left,
.mitr-short.mitr-opening .sheet--right { animation-duration: var(--t-short, 420ms); animation-delay: 0ms; }

@keyframes cut-fade {
	0%, 44% { opacity: 1; }
	62%, 100% { opacity: 0; }
}
@keyframes seam-cut {
	from { transform: scaleY(0); opacity: 1; }
	to { transform: scaleY(1); opacity: .9; }
}
@keyframes wheel-run {
	from { transform: translate3d(0, -4vh, 0); opacity: 1; }
	95% { opacity: 1; }
	to { transform: translate3d(0, 104vh, 0); opacity: 0; }
}
@keyframes wheel-spin {
	to { rotate: 360deg; }
}
@keyframes spark {
	0% { opacity: 0; transform: translate3d(0, 0, 0) scale(1); }
	8% { opacity: 1; }
	100% {
		opacity: 0;
		/* Out along its own angle, then pulled down. */
		transform: translate3d(calc(cos(var(--a)) * var(--d)), calc(sin(var(--a)) * var(--d) * -1 + 60px), 0) scale(.4);
	}
}
@keyframes sheet-out-left {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-101%, 0, 0); }
}
@keyframes sheet-out-right {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(101%, 0, 0); }
}

/* On a phone the grinder would fill the screen, so the parts are smaller.
   Never scale .cut__runner itself: it carries the travel down the page, and a
   scale would shorten that travel (individual transform properties apply
   before `transform`), leaving the cut unfinished. */
@media (max-width: 700px) {
	.cut__tool,
	.cut__wheel,
	.cut__sparks { scale: .6; }
	.cut__runner::after { scale: .6; }
}

/* Nothing moves for a visitor whose device asks for less motion: the overlay
   never appears and links behave normally (the script stands down too). */
@media (prefers-reduced-motion: reduce) {
	.page-transition { display: none !important; }
}