/**
 * D LUNAFAM — page transitions (inc/transitions.php)
 * ------------------------------------------------------------------
 * Cross-document View Transitions: same-origin navigations cross-fade
 * instead of cutting. The header and the mobile bottom nav keep their own
 * names, so they hold still while the page underneath changes. Unsupported
 * browsers ignore all of this.
 */

@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	#site-header {
		view-transition-name: mmsc-site-header;
	}

	#mmsc-bnav {
		view-transition-name: mmsc-bottom-nav;
	}

	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 220ms;
		animation-timing-function: ease;
	}

	/* Header and bottom nav: no cross-fade of their own (their contents —
	   a cart count, the active tab — simply update). */
	::view-transition-group(mmsc-site-header),
	::view-transition-group(mmsc-bottom-nav) {
		animation-duration: 0s;
	}

	::view-transition-old(mmsc-site-header),
	::view-transition-old(mmsc-bottom-nav) {
		display: none;
	}

	::view-transition-new(mmsc-site-header),
	::view-transition-new(mmsc-bottom-nav) {
		animation: none;
	}
}

/* Progress line (assets/js/transitions.js): only while a navigation is
   pending longer than 200ms, along the top edge of the window. */
.mmsc-progress {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 100003;
	height: 2px;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	transition: opacity 150ms ease;
}

.mmsc-progress::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 40%;
	background: linear-gradient(90deg, rgba(185, 121, 132, 0), var(--mmsc-color-primary) 40%, var(--mmsc-color-dark));
	transform: translateX(-100%);
}

html.mmsc-navigating .mmsc-progress {
	opacity: 1;
}

html.mmsc-navigating .mmsc-progress::before {
	animation: mmsc-progress 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes mmsc-progress {
	from { transform: translateX(-100%); }
	to { transform: translateX(260%); }
}

@media (prefers-reduced-motion: reduce) {
	html.mmsc-navigating .mmsc-progress::before {
		width: 100%;
		animation: none;
		transform: none;
		opacity: 0.6;
	}
}