/* Page transitions */

/* No rest-state transform: it would turn #swup into the containing block for every
   fixed descendant (menu overlay, language toast), sizing them to the document. */
.swup-transition-page {
	opacity: 1;
	transition: opacity 0.22s ease, transform 0.32s var(--ease-out);
}

html.is-changing .swup-transition-page { pointer-events: none; }
html.is-animating .swup-transition-page { opacity: 0; transform: translateY(8px); }

/* JS delays the veil and enforces its minimum visible duration. */
.page-transition {
	--seal-size: clamp(150px, 15vw, 230px);
	position: fixed;
	inset: 0 0 var(--site-player-height, 0) 0;
	z-index: 80;
	display: grid;
	place-content: center;
	justify-items: center;
	row-gap: calc(var(--seal-size) * 0.12);
	background:
		radial-gradient(120% 90% at 50% 42%, rgba(252, 250, 246, 0.9) 0%, rgba(252, 250, 246, 0) 58%),
		var(--cream-ground);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.42s ease, visibility 0.42s;
}

body:not(.has-site-player) .page-transition { bottom: 0; }

.page-transition::before {
	content: "";
	position: absolute;
	inset: 12px;
	border: 1px solid var(--line-gold);
	pointer-events: none;
}

.page-transition::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(130% 110% at 50% 50%, transparent 62%, rgba(138, 98, 51, 0.1) 100%);
	pointer-events: none;
}

.page-transition.is-covering {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-duration: 0.3s;
}

.page-transition__seal {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--seal-size);
	aspect-ratio: 1;
	opacity: 0;
	transform: scale(0.96);
	transition: opacity 0.3s ease, transform 0.6s var(--ease-out);
}

.page-transition__seal::before {
	content: "";
	position: absolute;
	inset: 8px;
	border: 1px solid rgba(168, 126, 48, 0.3);
	border-radius: 50%;
}

.page-transition__seal::after {
	content: "";
	position: absolute;
	inset: 7px;
	border-radius: 50%;
	animation: transition-breath 2.8s ease-in-out infinite;
}

.page-transition__seal img { position: relative; z-index: 2; width: 62%; height: auto; }

/* Two opposed arcs cut from a full ring — the mask repeats every half turn, so they stay
   symmetric, and its soft stops fade the ends instead of clipping them. */
.page-transition__orbit {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	-webkit-mask-image: repeating-conic-gradient(from 45deg, transparent 0deg, #000 18deg, #000 72deg, transparent 90deg, transparent 180deg);
	        mask-image: repeating-conic-gradient(from 45deg, transparent 0deg, #000 18deg, #000 72deg, transparent 90deg, transparent 180deg);
	animation: transition-orbit 3.4s linear infinite;
}

.page-transition__orbit circle {
	fill: none;
	stroke: var(--gold-bright);
	stroke-width: 1.5;
	opacity: 0.85;
	vector-effect: non-scaling-stroke;
}

.page-transition__wordmark {
	width: calc(var(--seal-size) * 0.9);
	height: auto;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.3s ease 0.08s, transform 0.6s var(--ease-out) 0.08s;
}

.page-transition.is-covering .page-transition__seal { opacity: 1; transform: scale(1); }
.page-transition.is-covering .page-transition__wordmark { opacity: 1; transform: translateY(0); }
.page-transition:not(.is-covering) .page-transition__seal::after,
.page-transition:not(.is-covering) .page-transition__orbit { animation-play-state: paused; }

.page-transition__bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, rgba(212, 168, 67, 0.4), var(--gold-bright));
	box-shadow: 0 0 8px rgba(212, 168, 67, 0.55);
	opacity: 0;
}

.page-transition.is-covering .page-transition__bar { opacity: 1; }
.page-transition__bar.is-trickling { width: 72%; transition: width 0.9s var(--ease-out); }
.page-transition__bar.is-crawling { width: 88%; transition: width 3s linear; }
.page-transition__bar.is-done { width: 100%; transition: width 0.18s ease-out; }

@keyframes transition-orbit { to { transform: rotate(360deg); } }

@keyframes transition-breath {
	from { box-shadow: 0 0 0 0 rgba(212, 168, 67, 0.25); }
	to { box-shadow: 0 0 0 calc(var(--seal-size) * 0.18) rgba(212, 168, 67, 0); }
}