/*!
 * PetMap PETinder — [petinder_pets layout="marquee"].
 *
 * Reads Free's --pmd-* design tokens with literal fallbacks (the warm
 * preset's values); the font is inherited. Two states:
 * - still (no JS, or prefers-reduced-motion): each row is a horizontally
 *   scrollable snap list and the hidden repeats are not displayed;
 * - moving (.is-animated, set by pet-marquee.js): every copy of a row's list
 *   slides by its own width, so the loop has no seam. The second row runs
 *   the other way. Hover, focus inside, the toggle and being offscreen pause
 *   it; a keyboard focus resets it so the browser can scroll the card in.
 *
 * Cards have a fixed size per breakpoint, so nothing shifts as photos load.
 *
 * @package PetMapPetinder
 */

.pti-marquee {
	--pti-marquee-card: 9.5rem;
	--pti-marquee-gap: var(--pmd-space-3, 12px);
	--pti-marquee-per-item: 4.5s;
	--pti-marquee-radius: var(--pmd-radius-xl, 20px);
	--pti-marquee-ease: cubic-bezier(0.2, 0, 0, 1);
	--pti-marquee-scrim: 31 20 13;
	display: flex;
	flex-direction: column;
	gap: var(--pmd-space-2, 8px);
	color: var(--pmd-color-text, #2b1d14);
	font-family: var(--pmd-font-sans, inherit);
}

@media (min-width: 768px) {
	.pti-marquee {
		--pti-marquee-card: 12rem;
		--pti-marquee-gap: var(--pmd-space-4, 16px);
	}
}

.pti-marquee--slow {
	--pti-marquee-per-item: 7s;
}

.pti-marquee--fast {
	--pti-marquee-per-item: 2.75s;
}

.pti-marquee-empty {
	margin: 0;
	color: var(--pmd-color-text-muted, #7a6252);
}

/* Toggle ----------------------------------------------------------------- */

.pti-marquee-bar {
	display: flex;
	justify-content: flex-end;
	padding-inline: var(--pmd-space-2, 8px);
}

.pti-marquee-toggle {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--pmd-color-primary, #c2410c);
	background: var(--pmd-color-surface-raised, #fff);
	border: 1px solid var(--pmd-color-border, #f0dfcf);
	border-radius: var(--pmd-radius-full, 9999px);
	box-shadow: var(--pmd-shadow-sm, 0 1px 2px rgba(92, 45, 14, 0.08));
	cursor: pointer;
	transition-property: scale, background-color;
	transition-duration: 150ms;
	transition-timing-function: var(--pti-marquee-ease);
}

.pti-marquee-toggle[hidden] {
	display: none;
}

.pti-marquee-toggle:hover {
	background: var(--pmd-color-primary-soft, rgba(238, 100, 3, 0.1));
}

.pti-marquee-toggle:active {
	scale: 0.96;
}

.pti-marquee-toggle:focus-visible {
	outline: 2px solid var(--pmd-color-primary, #c2410c);
	outline-offset: 2px;
}

/* Pause and play cross-fade in place; the button's name never changes. */
.pti-marquee-icon {
	grid-area: 1 / 1;
	fill: currentColor;
	transition-property: opacity, scale, filter;
	transition-duration: 200ms;
	transition-timing-function: var(--pti-marquee-ease);
}

.pti-marquee-icon--play,
.pti-marquee-toggle[aria-pressed="true"] .pti-marquee-icon--pause {
	opacity: 0;
	scale: 0.25;
	filter: blur(4px);
}

.pti-marquee-toggle[aria-pressed="true"] .pti-marquee-icon--play {
	opacity: 1;
	scale: 1;
	filter: blur(0);
}

.pti-marquee-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Rows (still state) ------------------------------------------------------ */

.pti-marquee-row {
	display: flex;
	overflow-x: auto;
	padding-block: 10px;
	padding-inline-start: var(--pti-marquee-gap);
	scroll-padding-inline: var(--pti-marquee-gap);
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--pmd-color-border-strong, #e2c8b0) transparent;
	overscroll-behavior-x: contain;
}

.pti-marquee-list {
	display: flex;
	flex: none;
	gap: var(--pti-marquee-gap);
	margin: 0;
	padding: 0 var(--pti-marquee-gap) 0 0;
	list-style: none;
}

.pti-marquee-list--clone {
	display: none;
}

/*
 * The item, not the card, is the containing block of the card's patita
 * control (assets/css/patitas.css) and takes the hover lift, so the paw
 * rides along with its card.
 */
.pti-marquee-item {
	position: relative;
	flex: none;
	width: var(--pti-marquee-card);
	margin: 0;
	scroll-snap-align: start;
	transition-property: translate, rotate;
	transition-duration: 300ms;
	transition-timing-function: var(--pti-marquee-ease);
}

/* Cards ------------------------------------------------------------------ */

.pti-marquee-card,
a.pti-marquee-card:link,
a.pti-marquee-card:visited {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	color: #fff;
	text-decoration: none;
	background: linear-gradient(160deg, var(--pmd-color-surface-alt, #fdefe2), var(--pmd-color-border, #f0dfcf));
	border-radius: var(--pti-marquee-radius);
	box-shadow: var(--pmd-shadow-sm, 0 1px 2px rgba(92, 45, 14, 0.08));
	isolation: isolate;
	transition-property: box-shadow;
	transition-duration: 300ms;
	transition-timing-function: var(--pti-marquee-ease);
}

/* A hairline keeps light photos from melting into a light page. */
.pti-marquee-card::after {
	position: absolute;
	inset: 0;
	content: "";
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
	pointer-events: none;
}

.pti-marquee-card:focus-visible {
	outline: 3px solid var(--pmd-color-primary, #c2410c);
	outline-offset: 2px;
}

.pti-marquee-photo {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition-property: scale;
	transition-duration: 500ms;
	transition-timing-function: var(--pti-marquee-ease);
}

.pti-marquee-nophoto {
	display: grid;
	place-items: center;
	padding-bottom: 2.5rem;
	color: var(--pmd-color-accent, #ee6403);
	font-size: 3.5rem;
	font-weight: var(--pmd-weight-bold, 700);
	line-height: 1;
}

/*
 * Name and species · age always sit on a scrim that is at least 65% opaque
 * behind the text, so white text stays above 4.5:1 even on a white photo.
 */
.pti-marquee-caption {
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 2.75rem var(--pmd-space-3, 12px) var(--pmd-space-3, 12px);
	background: linear-gradient(to top, rgb(var(--pti-marquee-scrim) / 0.88) 0%, rgb(var(--pti-marquee-scrim) / 0.78) 55%, rgb(var(--pti-marquee-scrim) / 0) 100%);
	text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}

.pti-marquee-name {
	overflow: hidden;
	font-size: var(--pmd-text-md, 16px);
	font-weight: var(--pmd-weight-semibold, 600);
	line-height: var(--pmd-leading-tight, 1.2);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.pti-marquee-meta {
	overflow: hidden;
	color: #fff8f1;
	font-size: var(--pmd-text-xs, 12px);
	line-height: var(--pmd-leading-snug, 1.35);
	white-space: nowrap;
	text-overflow: ellipsis;
}

@media (hover: hover) {
	.pti-marquee-item:hover .pti-marquee-card {
		box-shadow: var(--pmd-shadow-lg, 0 14px 34px rgba(92, 45, 14, 0.14), 0 2px 6px rgba(92, 45, 14, 0.07));
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.pti-marquee-item:hover {
		translate: 0 -4px;
		rotate: -1deg;
	}

	.pti-marquee-item:nth-child(even):hover {
		rotate: 1deg;
	}

	.pti-marquee-item:hover .pti-marquee-photo {
		scale: 1.06;
	}
}

/* Moving state ----------------------------------------------------------- */

@keyframes pti-marquee-slide {
	to {
		transform: translateX(-100%);
	}
}

@keyframes pti-marquee-slide-rtl {
	to {
		transform: translateX(100%);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.pti-marquee.is-animated .pti-marquee-row {
		overflow: hidden;
		padding-inline-start: 0;
		scroll-snap-type: none;
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
		mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	}

	.pti-marquee.is-animated .pti-marquee-list--clone {
		display: flex;
	}

	.pti-marquee.is-animated .pti-marquee-list {
		animation: pti-marquee-slide calc(var(--pti-marquee-items, 12) * var(--pti-marquee-per-item)) linear infinite;
	}

	[dir="rtl"] .pti-marquee.is-animated .pti-marquee-list {
		animation-name: pti-marquee-slide-rtl;
	}

	.pti-marquee.is-animated .pti-marquee-row--reverse .pti-marquee-list {
		animation-direction: reverse;
	}

	.pti-marquee.is-animated:hover .pti-marquee-list,
	.pti-marquee.is-animated.is-paused .pti-marquee-list,
	.pti-marquee.is-animated.is-offscreen .pti-marquee-list,
	.pti-marquee.is-animated .pti-marquee-row:focus-within .pti-marquee-list {
		animation-play-state: paused;
	}

	/*
	 * Focus on a card pauses both rows. Focus on the toggle does not count:
	 * a clicked toggle keeps focus, and "play" must start the motion.
	 * Separate rule, so a browser without :has() still keeps the one above.
	 */
	.pti-marquee.is-animated:has(.pti-marquee-row:focus-within) .pti-marquee-list {
		animation-play-state: paused;
	}

	/*
	 * A keyboard user tabbing through a row gets it still and at its start,
	 * unmasked, so the browser can scroll each focused card fully into view.
	 */
	.pti-marquee.is-animated .pti-marquee-row:has(:focus-visible) {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.pti-marquee.is-animated .pti-marquee-row:has(:focus-visible) .pti-marquee-list {
		animation: none;
	}
}