/* Metamorphosis slideshow. Self-contained so it works under any theme. */
.meta-show {
	background: #0d0d16;
	border-radius: 8px;
	padding: 1.25rem;
	margin: 2rem 0;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
	outline: none;
}
.meta-show:focus-visible { box-shadow: 0 0 0 3px #c9a84c; }

.meta-stage {
	position: relative;
	min-height: 340px;
	display: grid;
	place-items: center;
}
.meta-slide {
	grid-area: 1 / 1;
	margin: 0;
	text-align: center;
	opacity: 0;
	transition: opacity 0.6s ease;
	width: 100%;
}
.meta-slide.is-current { opacity: 1; }

.meta-art {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	max-height: 420px;
	width: auto;
	border-radius: 4px;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
}

.meta-caption {
	color: #f2ead6;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.05rem;
	line-height: 1.6;
	margin-top: 1rem;
	max-width: 60ch;
	margin-left: auto;
	margin-right: auto;
}
/* A slide with no artwork is a title card, so let the words carry it. */
.meta-slide.is-card .meta-caption {
	font-size: clamp(1.2rem, 3vw, 1.9rem);
	color: #fff;
	padding: 3rem 1rem;
}

.meta-bar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	flex-wrap: wrap;
}
.meta-btn {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: #f2ead6;
	border-radius: 4px;
	padding: 0.4rem 0.9rem;
	font: inherit;
	font-size: 0.9rem;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.meta-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: #c9a84c; }
.meta-scene {
	color: rgba(242, 234, 214, 0.6);
	font-size: 0.85rem;
	margin: 0 0 0 auto;
	font-variant-numeric: tabular-nums;
}

.meta-track { color: #c9a84c; }
.meta-audio { display: none; }

@media (prefers-reduced-motion: reduce) {
	.meta-slide { transition: none; }
}
@media (max-width: 680px) {
	.meta-stage { min-height: 260px; }
	.meta-art { max-height: 260px; }
	.meta-scene { margin-left: 0; width: 100%; }
}

/* The opening card: the word rearranges itself into place, which is the
   metamorphosis the piece is named for. Letters are laid out where the
   mirrored spelling puts them, then slide to where they belong. */
.meta-caption.is-title { font-size: 1.6em; letter-spacing: 0.02em; }
.meta-rearrange { display: inline-block; white-space: pre; }
.meta-letter { display: inline-block; will-change: transform; }
.meta-rearrange.is-settling .meta-letter { transition: transform 2.2s cubic-bezier(0.22, 0.68, 0.2, 1); }
/* An off-screen copy of the finished word, used only to measure where each
   letter has to land. Never seen. */
.meta-ghost { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
	.meta-rearrange.is-settling .meta-letter { transition: none; }
}