/* Generated by build/css-bundles.mjs. Edit the source sheets, then run pnpm build:theme-css. */

/* assets/css/player.css */
/* Persistent audio player */

:root { --site-player-height: 58px; }

/* The inset only applies if the viewport ever opts into viewport-fit=cover. */
body.has-site-player { padding-bottom: calc(var(--site-player-height) + env(safe-area-inset-bottom, 0px)); }

.site-player {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 12;
	display: flex;
	align-items: center;
	gap: 22px;
	height: var(--site-player-height);
	padding: 0 var(--rail);
	border-top: 1px solid rgba(212, 168, 67, 0.26);
	background: linear-gradient(0deg, rgba(9, 6, 3, 0.78), rgba(9, 6, 3, 0.34));
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #d8c08a;
}

.site-player.is-docked {
	position: fixed;
	z-index: 90;
	height: calc(var(--site-player-height) + env(safe-area-inset-bottom, 0px));
	padding-bottom: env(safe-area-inset-bottom, 0);
	border-top-color: rgba(212, 168, 67, 0.32);
	background: linear-gradient(0deg, rgba(9, 6, 3, 0.96), rgba(20, 13, 8, 0.9));
	box-shadow: 0 -12px 32px rgba(20, 12, 6, 0.18);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: transform 0.35s ease, visibility 0.35s;
}

.site-player.is-dismissed {
	transform: translateY(calc(100% + 16px));
	visibility: hidden;
	pointer-events: none;
}

.site-player__audio { display: none; }

.site-player__button {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid rgba(212, 168, 67, 0.55);
	border-radius: 50%;
	background: rgba(212, 168, 67, 0.1);
	color: var(--gold-light);
	transition: background 0.25s, box-shadow 0.25s;
}

.site-player__button:hover {
	background: rgba(212, 168, 67, 0.24);
	box-shadow: 0 0 16px rgba(212, 168, 67, 0.35);
}

.site-player__icon { display: block; }
.site-player__icon--pause { display: none; }
.site-player[data-playing="true"] .site-player__icon--play { display: none; }
.site-player[data-playing="true"] .site-player__icon--pause { display: block; }

.site-player__track {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	flex: none;
}

.site-player__eq { display: flex; gap: 3px; }
.site-player__eq i {
	display: block;
	width: 2px;
	height: 12px;
	background: currentColor;
	transform-origin: bottom;
	animation: player-eq 1.2s ease-in-out infinite;
}
.site-player__eq i:nth-child(2) { animation-delay: 0.15s; }
.site-player__eq i:nth-child(3) { animation-delay: 0.3s; }
.site-player__eq i:nth-child(4) { animation-delay: 0.45s; }
.site-player[data-playing="false"] .site-player__eq i { animation: none; transform: scaleY(0.3); opacity: 0.45; }

.site-player__name {
	max-width: 30vw;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	letter-spacing: 0.22em;
	color: #efe3c2;
}

.site-player__name em { font-style: normal; color: rgba(234, 215, 167, 0.62); }
.site-player__time { flex: none; font-variant-numeric: tabular-nums; letter-spacing: 0.18em; white-space: nowrap; color: #cdb27a; }

.site-player__progress {
	position: relative;
	flex: 1;
	min-width: 60px;
	height: 16px;
	cursor: pointer;
}

.site-player__progress::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(212, 168, 67, 0.25);
}

.site-player__progress i {
	position: absolute;
	top: 50%;
	left: 0;
	width: 0;
	height: 2px;
	margin-top: -1px;
	background: linear-gradient(90deg, rgba(212, 168, 67, 0.35), var(--gold-light));
}

.site-player__progress b {
	position: absolute;
	top: 50%;
	left: 0;
	width: 7px;
	height: 7px;
	transform: translate(-50%, -50%) rotate(45deg);
	background: var(--gold-light);
	box-shadow: 0 0 9px rgba(241, 203, 106, 0.8);
}

.site-player__close {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-right: -6px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: rgba(216, 192, 138, 0.55);
	cursor: pointer;
	transition: color 0.2s, background 0.2s;
}

.site-player__close:hover {
	color: var(--gold-light);
	background: rgba(212, 168, 67, 0.14);
}

.site-player:not(.is-docked) .site-player__close { display: none; }

@keyframes player-eq {
	0%, 100% { transform: scaleY(0.3); }
	50% { transform: scaleY(1); }
}

@media (max-width: 780px) {
	.site-player { gap: 12px; padding-inline: 16px; letter-spacing: 0.18em; }
	.site-player__time--end { display: none; }
	.site-player__track { flex: 0 1 auto; }
	.site-player__name { max-width: 28vw; }
}

@media (max-width: 480px) {
	.site-player__eq,
	.site-player__name { display: none; }
}

/* assets/css/transitions.css */
/* 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); }
}