/**
 * Where the posters went: the chip on product pages and the night-globe
 * overlay it opens. inc/sold-map.php, assets/js/sold-map.js.
 */

/* ---- The chip, under the stars: one small purple link chip ---- */
.soluturn-sold-chip {
	background: var(--pallete-purple-50, #f5f4f9);
	border: 1px solid var(--pallete-purple-200, #ddd6f3);
	border-radius: 999px;
	color: var(--pallete-purple-700, #6f39c6);
	align-items: center;
	cursor: pointer;
	/* Its own line under the stars at every width (inline, it joined the
	   stars' line on wide screens and dropped below on narrow ones). */
	display: flex;
	font: var(--type-micro-large-semibold, 600 12px/16px "Bricolage Grotesque", Arial, sans-serif);
	gap: 6px;
	margin: 10px 0 24px;
	width: fit-content;
	max-width: 100%;
	padding: 4px 10px 4px 8px;
	text-align: left;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.soluturn-sold-chip__icon,
.soluturn-sold-chip__go {
	display: block;
	flex: none;
}

.soluturn-sold-chip__text {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: text-decoration-color 0.2s ease;
}

.soluturn-sold-chip__go {
	transition: transform 0.2s ease;
}

.soluturn-sold-chip:hover {
	background: var(--pallete-purple-100, #ebe8f5);
	border-color: var(--pallete-purple-300, #cbbff3);
	color: var(--pallete-purple-800, #573596);
}

.soluturn-sold-chip:hover .soluturn-sold-chip__text {
	text-decoration-color: currentColor;
}

.soluturn-sold-chip:hover .soluturn-sold-chip__go {
	transform: translateX(2px);
}

.soluturn-sold-chip:focus-visible {
	outline: 2px solid var(--pallete-purple-700, #6f39c6);
	outline-offset: 2px;
}

/* ---- The overlay ---- */
html.soluturn-sold-map-open {
	overflow: hidden;
}

/* Colour roles on the dark overlay, from the brand palette. The sky itself
   (backdrop, atmosphere, glows) keeps its own blues: it's the picture, not UI. */
.soluturn-sold-map {
	--sm-ink: var(--pallete-neutral-50, #f5f5f7);
	--sm-muted: var(--pallete-neutral-300, #c6c5d0);
	--sm-accent: var(--pallete-purple-300, #cbbff3);
	--sm-focus: var(--pallete-purple-400, #b6a1f2);
	--sm-chip-bg: rgba(17, 16, 21, 0.62); /* neutral-1000 at 62% */
	--sm-line: rgba(245, 245, 247, 0.45); /* neutral-50 at 45% */

	background: transparent;
	border: 0;
	color: var(--sm-ink);
	inset: 0;
	/* Phones: 100% is the screen with the browser bars at full size, so once
	   they shrink on scroll the page showed below the map. dvh follows the
	   bars; the globe re-fits through sold-map.js's ResizeObserver. */
	bottom: auto;
	height: 100%;
	height: 100dvh;
	margin: 0;
	max-height: none;
	max-width: none;
	overflow: hidden;
	padding: 0;
	width: 100%;
}

.soluturn-sold-map::backdrop {
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	background: radial-gradient(ellipse at 50% 55%, rgba(8, 12, 30, 0.95) 0%, rgba(1, 2, 7, 0.98) 72%);
	/* The sky reaches the bottom of the screen even with the bars hidden. */
	bottom: auto;
	height: 100vh;
	height: 100lvh;
}

/* The globe fills the whole overlay; the count and close button float on it. */
.soluturn-sold-map__inner {
	font-family: "Bricolage Grotesque", Arial, sans-serif;
	height: 100%;
	position: relative;
}

.soluturn-sold-map__head {
	left: 0;
	padding: 28px 72px 0 32px;
	pointer-events: none;
	position: absolute;
	text-shadow: 0 1px 12px rgba(1, 2, 7, 0.85);
	top: 0;
	z-index: 2;
}

/* The count: big condensed numerals over capital labels, a heavy rule above
   and a hairline between (the 1985 editorial standard: lessons 2, 3, 5). */
.soluturn-sold-map__stats {
	color: var(--sm-ink);
	display: flex;
	gap: 40px;
	margin: 0;
	max-width: 100%;
	padding-top: 12px;
	position: relative;
	width: max-content;
}

/* The heavy rule, drawn across as the map opens. */
.soluturn-sold-map__stats::before {
	animation: sm-rule 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	background: var(--sm-ink);
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transform-origin: left center;
}

.soluturn-sold-map__label {
	animation: sm-rise 0.6s 0.5s ease-out both;
}

.soluturn-sold-map__close {
	animation: sm-fade 0.4s 0.2s ease-out both;
}

.soluturn-sold-map::backdrop {
	animation: sm-fade 0.35s ease-out both;
}

@keyframes sm-rule {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

/* ---- The exit (sold-map.js close): a quick reverse of the build ---- */
.soluturn-sold-map.is-leaving::backdrop {
	animation: sm-fade-out 0.5s 0.06s ease-in both;
}

.soluturn-sold-map.is-leaving .soluturn-sold-map__stage {
	opacity: 0;
	transition: opacity 0.45s 0.05s ease-in;
}

.soluturn-sold-map.is-leaving .soluturn-sold-label-anchor {
	opacity: 0;
	transition: opacity 0.15s ease-in;
}

.soluturn-sold-map.is-leaving .soluturn-sold-map__stats::before {
	animation: sm-rule-out 0.42s 0.08s ease-in both;
	transform-origin: right center;
}

.soluturn-sold-map.is-leaving .soluturn-sold-map__num,
.soluturn-sold-map.is-leaving .soluturn-sold-map__label {
	animation: sm-sink 0.36s ease-in both;
}

.soluturn-sold-map.is-leaving .soluturn-sold-map__close,
.soluturn-sold-map.is-leaving .soluturn-sold-map__hint {
	animation: sm-fade-out 0.25s ease-in both;
}

@keyframes sm-fade-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes sm-rule-out {
	from { transform: scaleX(1); }
	to { transform: scaleX(0); }
}

@keyframes sm-sink {
	from { opacity: 1; translate: 0 0; }
	to { opacity: 0; translate: 0 6px; }
}

@keyframes sm-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes sm-rise {
	from { opacity: 0; translate: 0 6px; }
	to { opacity: 1; translate: 0 0; }
}

/* The ring that traces the globe while it loads. */
.soluturn-sold-map__ring {
	animation: sm-fade 0.5s 0.15s ease-out both;
	height: var(--ring-size, 300px);
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
	width: var(--ring-size, 300px);
	z-index: 1;
}

.soluturn-sold-map__ring svg {
	animation: sm-spin 1.8s linear infinite;
	display: block;
	height: 100%;
	overflow: visible;
	width: 100%;
}

@keyframes sm-spin {
	from { transform: rotate(-90deg); }
	to { transform: rotate(270deg); }
}

.soluturn-sold-map__ring circle {
	fill: none;
	vector-effect: non-scaling-stroke;
}

.soluturn-sold-map__ring-track {
	stroke: rgba(146, 172, 255, 0.14);
	stroke-width: 1;
}

.soluturn-sold-map__ring-fill {
	filter: drop-shadow(0 0 6px rgba(150, 195, 255, 0.85));
	stroke: rgba(205, 228, 255, 0.95);
	stroke-linecap: round;
	stroke-width: 1.5;
	transition: stroke-dashoffset 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* The fade-in animation would hold it visible; drop it so the fade-out runs. */
.soluturn-sold-map__ring.is-done {
	animation: none;
	opacity: 0;
	transform: translate(-50%, -50%) scale(1.03);
	transition: opacity 1s ease, transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Labels wait for the globe to be built, then rise one after another:
   the stem grows from the dot, then the label fades up. */
.soluturn-sold-map:not(.is-built) .soluturn-sold-label-anchor {
	opacity: 0;
}

.soluturn-sold-map.is-building .soluturn-sold-label__stem {
	animation: sm-stem 0.45s ease-out both;
	animation-delay: calc(var(--i, 0) * 150ms);
	transform-origin: left bottom;
}

.soluturn-sold-map.is-building .is-left > .soluturn-sold-label__stem {
	transform-origin: right bottom;
}

.soluturn-sold-map.is-building .soluturn-sold-label {
	animation: sm-rise 0.55s ease-out both;
	animation-delay: calc(var(--i, 0) * 150ms + 0.25s);
}

.soluturn-sold-map.is-building .soluturn-sold-label__dot {
	animation: sm-fade 0.4s both;
	animation-delay: calc(var(--i, 0) * 150ms);
}

@keyframes sm-stem {
	from { transform: scale(0); }
	to { transform: scale(1); }
}

.soluturn-sold-map__stat {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.soluturn-sold-map__num {
	font: var(--type-display-large-extrabold, 800 72px/66px "Bricolage Grotesque", Arial, sans-serif);
	font-stretch: var(--type-display-large-width, 75%);
	/* Numerals with a thousands comma need a little air at this width. */
	letter-spacing: -0.01em;
}

.soluturn-sold-map__label {
	border-top: 1px solid var(--sm-line);
	color: var(--sm-accent);
	font-size: var(--type-micro-large-size, 12px);
	font-stretch: 75%;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1;
	padding-top: 8px;
	text-transform: uppercase;
}

/* Floats under the count, so the globe's area never changes size. */
.soluturn-sold-map__hint {
	color: var(--sm-muted);
	font-size: var(--type-body-small-size, 14px);
	left: 32px;
	margin: 0;
	position: absolute;
	top: calc(100% + 14px);
}

.soluturn-sold-map__hint:not(:empty) {
	align-items: center;
	display: flex;
	gap: 0;
	white-space: nowrap;
}

.soluturn-sold-map__hint:empty {
	display: none;
}

.soluturn-sold-map__back {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	color: var(--sm-ink);
	cursor: pointer;
	font: var(--type-body-small-semibold, 600 14px/20px "Bricolage Grotesque", Arial, sans-serif);
	margin-right: 8px;
	padding: 6px 14px;
	pointer-events: auto;
}

.soluturn-sold-map__back:hover {
	background: rgba(255, 255, 255, 0.22);
}

.soluturn-sold-map__back:focus-visible {
	outline: 2px solid var(--sm-focus);
	outline-offset: 2px;
}

.soluturn-sold-map__close {
	align-items: center;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 999px;
	color: var(--sm-ink);
	cursor: pointer;
	display: flex;
	height: 48px;
	justify-content: center;
	padding: 0;
	position: absolute;
	right: 20px;
	top: 20px;
	transition: background 0.2s ease;
	width: 48px;
	z-index: 3;
}

.soluturn-sold-map__close:hover {
	background: rgba(255, 255, 255, 0.2);
}

.soluturn-sold-map__close:focus-visible,
.soluturn-sold-label:focus-visible {
	outline: 2px solid var(--sm-focus);
	outline-offset: 2px;
}

.soluturn-sold-map__stage {
	inset: 0;
	overflow: hidden;
	position: absolute;
	transition: opacity 0.45s ease-out;
}

.soluturn-sold-map__stage.is-returning,
.soluturn-sold-map__stage.is-preparing {
	opacity: 0;
	transition: none;
}

.soluturn-sold-map__globe {
	inset: 0;
	position: absolute;
}

/* The overlay holds the page still, so every drag and pinch is the globe's. */
.soluturn-sold-map__globe canvas {
	touch-action: none;
}

/* Layers: the sky behind, the globe, the sky's haze in front, then labels. */
.soluturn-sold-map__globe .scene-container > canvas.soluturn-sold-map__gl {
	position: relative;
	z-index: 1;
}

.soluturn-sold-map__sky {
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
}

.soluturn-sold-map__sky--back {
	z-index: 0;
}

.soluturn-sold-map__sky--front {
	z-index: 2;
}

/* Read out by screen readers; the ring shows it on screen. */
.soluturn-sold-map__loading {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: 0;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.soluturn-sold-map__loading[hidden],
.soluturn-sold-map__stage[hidden] {
	display: none;
}

.soluturn-sold-map__foot {
	bottom: 0;
	left: 0;
	padding: 0 32px 20px;
	position: absolute;
	z-index: 2;
}

.soluturn-sold-map__list:not(.is-shown) {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.soluturn-sold-map__list {
	font-size: var(--type-body-small-size, 14px);
	max-width: 640px;
}

.soluturn-sold-map__list ul {
	background: rgba(6, 6, 16, 0.86);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	line-height: 1.5;
	list-style: none;
	margin: 8px 0 0;
	max-height: 38vh;
	overflow-y: auto;
	padding: 12px 16px;
}

.soluturn-sold-map__list li + li {
	margin-top: 4px;
}

/* No globe (no WebGL, or it couldn't be drawn): the list fills the space
   under the count, in columns where there's room. */
.soluturn-sold-map.is-fallback .soluturn-sold-map__foot {
	bottom: 24px;
	right: 0;
	top: 200px;
}

.soluturn-sold-map.is-fallback .soluturn-sold-map__list {
	height: 100%;
	max-width: none;
}

.soluturn-sold-map.is-fallback .soluturn-sold-map__list ul {
	column-gap: 32px;
	column-width: 260px;
	margin: 0;
	max-height: 100%;
}

.soluturn-sold-map.is-fallback .soluturn-sold-map__list li {
	break-inside: avoid;
}

/* ---- The labels: [flag] Name ───── 310 posters ----
   The globe moves a zero-size anchor to each place. In it: the place's dot,
   a thin stem rising from it, and the label at the stem's end. The label
   goes up and right, up and left near the right edge, or straight up when
   neither side fits (phones); sold-map.js picks. */
.soluturn-sold-label-anchor {
	height: 0;
	position: relative;
	transition: opacity 0.25s ease;
	width: 0;
}

.soluturn-sold-label-anchor.is-hidden {
	opacity: 0;
	visibility: hidden;
}

.soluturn-sold-label-anchor.is-hidden .soluturn-sold-label {
	pointer-events: none;
}

.soluturn-sold-label__dot {
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 0 6px 2px rgba(196, 166, 255, 0.85);
	height: 4px;
	left: -2px;
	position: absolute;
	top: -2px;
	width: 4px;
}

.soluturn-sold-label__stem {
	/* A line from the place (bottom left) up to the label's corner (top right). */
	background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 14 22%27 preserveAspectRatio=%27none%27%3E%3Cline x1=%270%27 y1=%2722%27 x2=%2714%27 y2=%270%27 stroke=%27%23f4f2fb%27 stroke-opacity=%270.75%27 stroke-width=%271%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	bottom: 0;
	height: 22px;
	left: 0;
	position: absolute;
	width: 14px;
}

.soluturn-sold-label {
	align-items: center;
	background: var(--sm-chip-bg);
	border: 0;
	border-radius: 6px;
	bottom: 22px;
	color: var(--sm-ink);
	cursor: pointer;
	display: flex;
	font: var(--type-body-small-semibold, 600 14px/20px "Bricolage Grotesque", Arial, sans-serif);
	line-height: 1.25;
	gap: 6px;
	left: 14px;
	padding: 3px 8px 3px 5px;
	pointer-events: auto;
	position: absolute;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
	white-space: nowrap;
}

.is-left > .soluturn-sold-label__stem {
	background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 14 22%27 preserveAspectRatio=%27none%27%3E%3Cline x1=%2714%27 y1=%2722%27 x2=%270%27 y2=%270%27 stroke=%27%23f4f2fb%27 stroke-opacity=%270.75%27 stroke-width=%271%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	left: -14px;
}

.is-left > .soluturn-sold-label {
	flex-direction: row-reverse;
	left: auto;
	padding: 3px 5px 3px 8px;
	right: 14px;
}

.is-up > .soluturn-sold-label__stem {
	background: rgba(244, 242, 251, 0.7);
	left: 0;
	width: 1px;
}

.is-up > .soluturn-sold-label {
	left: 0;
	transform: translateX(calc(-50% + var(--soluturn-label-shift, 0px)));
}

.soluturn-sold-label__flag {
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
	display: block;
	flex: none;
	height: 12px;
	width: 16px;
}

.soluturn-sold-label__rule {
	background: var(--sm-line);
	height: 1px;
	width: 36px;
}

.soluturn-sold-label__count {
	color: var(--sm-accent);
	font-weight: 500;
}

.soluturn-sold-label.is-region .soluturn-sold-label__rule {
	width: 24px;
}

.soluturn-sold-label:hover .soluturn-sold-label__count,
.soluturn-sold-label.is-active .soluturn-sold-label__count {
	color: var(--sm-ink);
}

@media (max-width: 781px) {
	.soluturn-sold-map__head {
		padding: 20px 68px 0 16px;
	}

	.soluturn-sold-map__hint {
		left: 16px;
	}

	/* The country's own label already shows its count. */
	.soluturn-sold-map__hint-text {
		display: none;
	}

	.soluturn-sold-map__close {
		right: 12px;
		top: 12px;
	}

	.soluturn-sold-map__foot {
		padding: 0 16px 16px;
	}

	.soluturn-sold-label {
		font-size: var(--type-micro-large-size, 12px);
	}

	.soluturn-sold-label__rule {
		width: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.soluturn-sold-map.is-leaving::backdrop,
	.soluturn-sold-map.is-leaving .soluturn-sold-map__stats::before,
	.soluturn-sold-map.is-leaving .soluturn-sold-map__num,
	.soluturn-sold-map.is-leaving .soluturn-sold-map__label,
	.soluturn-sold-map.is-leaving .soluturn-sold-map__close,
	.soluturn-sold-map.is-leaving .soluturn-sold-map__hint {
		animation: none;
	}

	.soluturn-sold-map__stats::before,
	.soluturn-sold-map__label,
	.soluturn-sold-map__close,
	.soluturn-sold-map::backdrop,
	.soluturn-sold-map__ring,
	.soluturn-sold-map.is-building .soluturn-sold-label,
	.soluturn-sold-map.is-building .soluturn-sold-label__stem,
	.soluturn-sold-map.is-building .soluturn-sold-label__dot {
		animation: none;
	}

	.soluturn-sold-map__ring-fill {
		transition: none;
	}

	.soluturn-sold-chip__go {
		transition: none;
	}

	.soluturn-sold-label-anchor {
		transition: none;
	}
}