/**
 * Motion · Site chrome: page transitions, the moon back-to-top button, the footer.
 *
 * - Between pages (mgk-motion page.wipe.circle, a cross-document view transition): an eclipse.
 *   The old page dims as if a shadow crossed it, and the new one opens as a disc growing from
 *   the "MAISON LUNE" wordmark at the top left. Browsers without view transitions just navigate.
 * - Back to top (mgk-motion ui.back-to-top.show, footer.php): a small paper moon at the bottom
 *   right; pointing at it slides a crescent shadow across it.
 * - Footer: the columns rise one after another, like cards laid on a tablecloth.
 */

/* The button itself (shown and hidden by ui.back-to-top.show). */
.ml-totop {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 60;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: 50%;
	background: radial-gradient(circle at 38% 34%, #fffdf7 0%, var(--ml-c-paper) 60%, var(--ml-c-sand) 100%);
	box-shadow: 0 6px 24px rgba(46, 35, 39, 0.18), 0 0 0 1px rgba(76, 39, 50, 0.12);
	color: var(--ml-c-ink);
	isolation: isolate;
}

.ml-totop:focus-visible {
	outline: 2px solid var(--ml-c-ink);
	outline-offset: 3px;
}

.ml-totop__icon {
	position: relative;
	z-index: 1;
}

html.ml-phonebar-shown .ml-totop {
	bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}

/* Without the library the button would never show; keep it out of the way. */
:root:not(.mgk-js) .ml-totop {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	:root.mgk-js:not([data-mgk-edit], [data-mgk-motion="off"], [data-mgk-motion="reduced"]) {

		/* The crescent shadow that slides over the moon when it is pointed at. */
		[data-ml-motion~="moon-top"]::before {
			content: "";
			position: absolute;
			inset: 0;
			z-index: 0;
			border-radius: 50%;
			background: var(--ml-c-sand);
			translate: -105% 0;
			transition: translate calc(420ms * var(--mgk-tempo)) var(--mgk-ease-out);
		}

		[data-ml-motion~="moon-top"]:is(:hover, :focus-visible)::before {
			translate: -38% 0;
		}

		[data-ml-motion~="moon-top"] .ml-totop__icon {
			transition: translate calc(320ms * var(--mgk-tempo)) var(--mgk-ease-back);
		}

		[data-ml-motion~="moon-top"]:is(:hover, :focus-visible) .ml-totop__icon {
			translate: 0 -3px;
		}

		/* Footer columns rise in turn. */
		[data-ml-motion~="footer-rise"]:not(.is-in) > * {
			opacity: 0;
		}

		[data-ml-motion~="footer-rise"].is-in:not(.is-instant) > * {
			animation: ml-footer-rise calc(900ms * var(--mgk-tempo)) var(--mgk-ease-out) both;
		}

		[data-ml-motion~="footer-rise"].is-in:not(.is-instant) > :nth-child(2) {
			animation-delay: calc(110ms * var(--mgk-tempo));
		}

		[data-ml-motion~="footer-rise"].is-in:not(.is-instant) > :nth-child(3) {
			animation-delay: calc(220ms * var(--mgk-tempo));
		}

		[data-ml-motion~="footer-rise"].is-in:not(.is-instant) > :nth-child(4) {
			animation-delay: calc(330ms * var(--mgk-tempo));
		}
	}
}

/* Eclipse between pages: overrides the centre of mgk-motion's page.wipe.circle. */
@media (prefers-reduced-motion: no-preference) {
	:root:root[data-mgk~="page.wipe.circle"]:not([data-mgk-motion="off"], [data-mgk-motion="reduced"])::view-transition-old(root) {
		animation: ml-eclipse-out calc(800ms * var(--mgk-tempo)) var(--mgk-ease-inout) both;
	}

	:root:root[data-mgk~="page.wipe.circle"]:not([data-mgk-motion="off"], [data-mgk-motion="reduced"])::view-transition-new(root) {
		animation: ml-eclipse-in calc(900ms * var(--mgk-tempo)) var(--mgk-ease-inout) both;
	}
}

@keyframes ml-footer-rise {
	from {
		opacity: 0;
		translate: 0 calc(28px * var(--mgk-intensity));
		rotate: calc(-1deg * var(--mgk-intensity));
	}
}

@keyframes ml-eclipse-out {
	to {
		filter: brightness(0.45) sepia(0.3);
	}
}

@keyframes ml-eclipse-in {
	from {
		clip-path: circle(0% at max(calc(50% - 540px), 72px) 40px);
	}
	to {
		clip-path: circle(150% at max(calc(50% - 540px), 72px) 40px);
	}
}