/* MHB Postcard Stack — visual styles + stamp/tuck animation. */

.mhb-postcard-stack {
	--mhb-pc-card-w: 320px;
	--mhb-pc-card-h: 400px;
	--mhb-pc-frame:  12px;
	--mhb-pc-deckle: var(--wp--preset--color--gold, #BFA36B);
	--mhb-pc-paper:  var(--wp--preset--color--cream, #FFFDF8);
	--mhb-pc-parch:  var(--wp--preset--color--parchment, #F1EADF);
	--mhb-pc-ink:    var(--wp--preset--color--ink, #25211D);
	--mhb-pc-navy:   var(--wp--preset--color--navy, #0F314B);

	position: relative;
	display: block;
	width: 100%;
	max-width: var(--mhb-pc-card-w);
	aspect-ratio: 4 / 5;
	margin-inline: calc((100% - var(--mhb-pc-card-w)) / 4) auto;
}

.mhb-postcard-stack__deck {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-areas: "stack";
	place-items: center;
}

.mhb-postcard-stack__card {
	grid-area: stack;
	width: var(--mhb-pc-card-w);
	height: var(--mhb-pc-card-h);
	background: var(--mhb-pc-paper);
	border-radius: 4px;
	overflow: hidden;
	position: relative;
	box-shadow:
		inset 0 0 0 var(--mhb-pc-frame) var(--mhb-pc-paper),
		inset 0 0 0 calc(var(--mhb-pc-frame) + 1px) rgba(191, 163, 107, 0.35),
		0 14px 28px -10px rgba(15, 49, 75, 0.28),
		0 4px 10px -4px rgba(15, 49, 75, 0.18);
	transform-origin: 50% 60%;
	transform:
		translate(calc(var(--rank, 0) * 24px), calc(var(--rank, 0) * 16px))
		rotate(calc(var(--rank, 0) * 3deg));
	z-index: calc(100 - var(--rank, 0));
	filter: brightness(calc(1 - var(--rank, 0) * 0.12));
	transition: transform 420ms cubic-bezier(.22, .61, .36, 1), filter 420ms ease;
}

.mhb-postcard-stack__photo {
	position: absolute;
	inset: var(--mhb-pc-frame);
	width: calc(100% - var(--mhb-pc-frame) * 2);
	height: calc(100% - var(--mhb-pc-frame) * 2);
	object-fit: cover;
	border-radius: 2px;
	display: block;
}

.mhb-postcard-stack__photo[loading="lazy"] {
	opacity: 0;
	transition: opacity 0.5s ease;
}

.mhb-postcard-stack__photo[loading="lazy"].is-loaded {
	opacity: 1;
}

.mhb-postcard-stack__label {
	position: absolute;
	left: calc(var(--mhb-pc-frame) + 12px);
	right: calc(var(--mhb-pc-frame) + 12px);
	bottom: calc(var(--mhb-pc-frame) + 14px);
	color: var(--mhb-pc-paper);
	background: rgba(37, 33, 29, 0.42);
	backdrop-filter: blur(2px);
	padding: 10px 16px 12px;
	border-radius: 2px;
}

.mhb-postcard-stack__city {
	display: block;
	font-family: "Cormorant Garamond", "Cormorant", Georgia, serif;
	font-style: italic;
	font-size: 1.9rem;
	line-height: 1.25;
	padding-bottom: 0.08em;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.mhb-postcard-stack__country {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-family: "Inter", system-ui, sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	margin-top: 0;
	overflow: hidden;
	line-height: 1.5;
}

/* Stamp overlay on the top-right of the card */
.mhb-postcard-stack__stamp {
	position: absolute;
	top: calc(var(--mhb-pc-frame) + 12px);
	right: calc(var(--mhb-pc-frame) + 12px);
	width: 90px;
	height: 90px;
	pointer-events: none;
	mix-blend-mode: multiply;
	opacity: 0;
	transform: rotate(8deg) scale(1);
}

.mhb-postcard-stack__stamp .mhb-postcard-stack__svg {
	width: 100%;
	height: 100%;
}

/* The thud-in animation: stamp lands and holds (no fadeout). */
@keyframes mhb-postcard-stack-thud {
	0%   { transform: rotate(8deg) scale(1.35); opacity: 0; }
	18%  { transform: rotate(8deg) scale(0.92); opacity: 1; }
	28%  { transform: rotate(8deg) scale(1.04); opacity: 1; }
	38%  { transform: rotate(8deg) scale(1);    opacity: 1; }
	100% { transform: rotate(8deg) scale(1);    opacity: 1; }
}

.mhb-postcard-stack__card.is-stamping .mhb-postcard-stack__stamp {
	animation: mhb-postcard-stack-thud 700ms cubic-bezier(.2, .9, .3, 1.2) 80ms both;
}

/* Two-phase exit: card slides left, then back into the deck. */
.mhb-postcard-stack__card.is-departing {
	transform: translate(-360px, 18px) rotate(-12deg);
	z-index: 200;
}

.mhb-postcard-stack__link {
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

/* Paused indicator: a small glyph that fades in over the top card while the
   deck is paused (hover / keyboard focus). Driven by the .is-paused class on
   the wrapper, set in view.js — so it tracks the real paused state. */
.mhb-postcard-stack__pause {
	position: absolute;
	top: calc(var(--mhb-pc-frame) + 12px);
	left: calc(var(--mhb-pc-frame) + 12px);
	z-index: 300;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: var(--mhb-pc-paper);
	background: rgba(37, 33, 29, 0.42);
	backdrop-filter: blur(2px);
	box-shadow: 0 2px 6px -2px rgba(15, 49, 75, 0.35);
	opacity: 0;
	transform: scale(0.9);
	transition: opacity 520ms ease, transform 520ms ease;
	pointer-events: none;
}

/* Both icons share the same grid cell so they cross-fade in place. */
.mhb-postcard-stack__pause-icon,
.mhb-postcard-stack__play-icon {
	grid-area: 1 / 1;
	width: 11px;
	height: 11px;
	display: block;
	transition: opacity 320ms ease;
}

.mhb-postcard-stack__pause-icon { opacity: 0.92; }
.mhb-postcard-stack__play-icon  { opacity: 0; }

/* is-vis = badge faded in; is-play = show the play glyph instead of the bars.
   These are toggled independently in view.js so the play glyph stays put
   while the badge fades out (the bars must not flash back in mid-fade). */
.mhb-postcard-stack.is-vis .mhb-postcard-stack__pause {
	opacity: 0.9;
	transform: scale(1);
}

.mhb-postcard-stack.is-play .mhb-postcard-stack__pause-icon { opacity: 0; }
.mhb-postcard-stack.is-play .mhb-postcard-stack__play-icon  { opacity: 0.92; }

/* ---- Mobile: 30% smaller cards ---- */
@media (max-width: 781px) {
	.mhb-postcard-stack {
		--mhb-pc-card-w: 224px;
		--mhb-pc-card-h: 280px;
	}
}

/* ---- Reduced motion: static fan, no autoplay, no thud ---- */
@media (prefers-reduced-motion: reduce) {
	.mhb-postcard-stack {
		max-width: 100%;
		aspect-ratio: auto;
		height: auto;
	}

	.mhb-postcard-stack__deck {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		justify-content: center;
	}

	.mhb-postcard-stack__card {
		position: static;
		width: 180px;
		height: 225px;
		transform: rotate(calc((var(--rank, 0) - 1.5) * 4deg)) !important;
		transition: none !important;
		z-index: auto;
	}

	.mhb-postcard-stack__card.is-departing {
		transform: rotate(calc((var(--rank, 0) - 1.5) * 4deg)) !important;
	}

	.mhb-postcard-stack__pause {
		display: none;
	}

	.mhb-postcard-stack__card.is-stamping .mhb-postcard-stack__stamp,
	.mhb-postcard-stack__stamp {
		animation: none !important;
		opacity: 0.85;
	}

	.mhb-postcard-stack__city {
		font-size: 1.1rem;
	}

	.mhb-postcard-stack__stamp {
		width: 56px;
		height: 56px;
	}
}