/* =========================================================================
   Animated global marketplace.

   Three layers. The ground — a canvas of dots and an SVG of pins and lines —
   is squashed to isometric and turned by the script, a composited transform
   only, so nothing on it re-draws while it spins. The platform and the NEO
   tile sit still above it. The cards ride on top, lying in the ground plane
   through one fixed isometric matrix so they stay readable as they travel.

   Positions are the artwork's 1020 x 574 units; sizes are container units,
   where 1cqw is 10.2 artwork units.
   ========================================================================= */

.ngm {
	container-type: inline-size;
	width: 100%;
}

.ngm__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 1020 / 574;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	isolation: isolate;
}

/* ------------------------------------------------------------ The ground */

/* The dots thin out towards the back, as in the artwork. Masked here, on
   an untransformed wrapper, so the fade stays fixed while the ground turns. */
.ngm__field {
	position: absolute;
	inset: 0;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 18%, #000 52%);
	mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 18%, #000 52%);
}

/* 1520 units square — big enough that its corners never show — centred on
   the platform's base and foreshortened to the isometric 1:sqrt(3). */
.ngm__ground {
	position: absolute;
	left: 50%;
	top: calc(286.6 / 574 * 100%);
	width: 149.02cqw;
	height: 149.02cqw;
	transform: translate(-50%, -50%) scaleY(0.5774);
}

.ngm__dots,
.ngm__plane {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	will-change: transform;
}

.ngm__plane {
	overflow: visible;
}

.ngm__line {
	fill: none;
	stroke: #9f9a94;
	stroke-width: 2;
	stroke-dasharray: 5 5;
	stroke-linecap: butt;
}

/* Pins exist only while a line is reaching for them. */
.ngm__pin {
	opacity: 0;
	transition: opacity 240ms ease;
}

.ngm__pin.is-on {
	opacity: 1;
}

.ngm__pin-base {
	fill: #e7e2db;
}

.ngm__pin-dot {
	fill: #9b9792;
	transition: fill 240ms ease;
}

/* The pin a card stands on, picked out while the card is up. */
.ngm__pin.is-active .ngm__pin-dot {
	fill: #2a82e1;
}

/* ---------------------------------------------------------- The platform */

.ngm__platform {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.ngm__wall {
	fill: #f3f1ee;
	stroke: #c9c4be;
	stroke-width: 0.9;
}

.ngm__top {
	fill: #faf9f7;
	stroke: #c9c4be;
	stroke-width: 0.9;
}

.ngm__groove {
	fill: none;
	stroke: #d2cdc7;
	stroke-width: 0.8;
}

/*
 * The tile stands upright on the platform: a vertical face whose horizontal
 * edges run up at 30deg, so x runs along (0.866, -0.5) and y straight down.
 * The thickness is a shadow cast along the face's depth, which in this face's
 * own coordinates is straight back along -x.
 */
.ngm__tile {
	position: absolute;
	left: calc(473.3 / 1020 * 100%);
	top: calc(175.9 / 574 * 100%);
	width: 8.43cqw;
	height: 8.43cqw;
	display: grid;
	place-items: center;
	border-radius: 1.04cqw;
	background: linear-gradient(135deg, #0a8fe6 0%, #4a7ee6 48%, #9b52e1 100%);
	box-shadow: -0.22cqw 0 0 0 #4f86e8;
	transform-origin: 0 0;
	transform: matrix(0.866, -0.5, 0, 1, 0, 0);
}

.ngm__tile span {
	font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 2.6cqw;
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1;
	color: #fff;
}

/* ------------------------------------------------------------- The cards */

.ngm__cards {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* The upright a card rises on, from its pin to the card's near edge. One per
   provider, since two or three stand at once. */
.ngm__stalk {
	position: absolute;
	left: 0;
	top: 0;
	width: 0.12cqw;
	height: 1.96cqw;
	margin: -1.96cqw 0 0 -0.06cqw;
	background: #8f8a85;
	transform-origin: 50% 100%;
	opacity: 0;
	will-change: transform;
}

/*
 * One card, lying in the ground plane. Its own x runs up the 30deg edge and
 * its own y down the other, so the matrix is the isometric pair; the script
 * puts the card's anchor — 20% along the near edge — on top of the stalk.
 *
 * The thickness is a shadow cast straight down the screen, which in the
 * card's skewed coordinates is (-1, 1) per unit.
 */
.ngm__card {
	position: absolute;
	left: 0;
	top: 0;
	width: 14.31cqw;
	height: 8.63cqw;
	/* Content anchored to the top-left corner, as drawn; the flag and price
	   hold the top-right, so the pill row stops short of them. */
	padding: 0.8cqw 0.95cqw 0.55cqw;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 0.3cqw;
	background: #fff;
	border: 0.1cqw solid #c9c4be;
	border-radius: 1.2cqw;
	box-shadow: -0.31cqw 0.31cqw 0 0 #f1eee9, -0.31cqw 0.31cqw 0 0.1cqw #cbc6c0;
	transform-origin: 0 0;
	opacity: 0;
	visibility: hidden;
	will-change: transform, opacity;
	font-family: "TWK Everett", -apple-system, BlinkMacSystemFont, sans-serif;
}

.ngm__card.is-up {
	visibility: visible;
}

.ngm__flag {
	position: absolute;
	top: 0.5cqw;
	right: 0.9cqw;
	width: 1.1cqw;
	height: 1.1cqw;
	border-radius: 50%;
	overflow: hidden;
	background: #eceae7;
}

.ngm__flag img {
	display: block;
	width: 100%;
	height: 100%;
}

.ngm__price {
	position: absolute;
	top: 1.82cqw;
	right: 0.9cqw;
	font-size: 1.05cqw;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.01em;
	color: #23232a;
	white-space: nowrap;
}

.ngm__pills {
	max-width: calc(100% - 2.4cqw);
}

.ngm__pills,
.ngm__tags {
	display: flex;
	gap: 0.25cqw;
	flex-wrap: nowrap;
	min-width: 0;
}

.ngm__pill {
	display: inline-flex;
	align-items: center;
	height: 0.9cqw;
	padding: 0 0.38cqw;
	border: 0.07cqw solid #cfcfd3;
	border-radius: 0.45cqw;
	font-size: 0.54cqw;
	line-height: 1;
	color: #74747c;
	white-space: nowrap;
}

.ngm__pill.is-green {
	border-color: transparent;
	background: #c9efd3;
	color: #36a356;
}

.ngm__pill.is-grey {
	border-color: transparent;
	background: #f1f1f2;
	color: #8a8a92;
}

.ngm__who {
	margin-top: 0.35cqw;
	display: flex;
	align-items: center;
	gap: 0.5cqw;
	min-width: 0;
}

.ngm__avatar {
	flex: none;
	display: grid;
	place-items: center;
	width: 1.75cqw;
	height: 1.3cqw;
	border-radius: 0.36cqw;
	background: var(--tone, #9b5de5);
	font-size: 0.52cqw;
	color: #fff;
}

.ngm__id {
	display: flex;
	flex-direction: column;
	gap: 0.08cqw;
	min-width: 0;
}

.ngm__name {
	font-size: 0.68cqw;
	font-weight: 500;
	line-height: 1.1;
	color: #13131a;
	white-space: nowrap;
}

.ngm__place {
	font-size: 0.52cqw;
	line-height: 1.15;
	color: #74747c;
	white-space: nowrap;
}

.ngm__desc {
	font-size: 0.53cqw;
	line-height: 1.3;
	color: #5c5c64;
}

.ngm__tags span {
	display: inline-flex;
	align-items: center;
	height: 0.86cqw;
	padding: 0 0.32cqw;
	border-radius: 0.3cqw;
	background: #f2f2f3;
	font-size: 0.5cqw;
	line-height: 1;
	color: #74747c;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.ngm__pin,
	.ngm__pin-dot { transition: none; }
}