/* =========================================================================
 * Map Band 001 — Aerial Pull-back with a Drawn Route
 *
 * A screen-tall stage holds an aerial photo, its pins and a paper card. With
 * the motion (pattern.js, `html.js`, no reduced motion) the section is long
 * and the stage sticks while the camera pulls back from the house, the route
 * draws and the card comes in. Without it, the stage is one screen showing
 * the whole photo and the card.
 * ========================================================================= */

.map-band-001 {
	position: relative;
	z-index: 0;
}

.map-band-001.map-band-001 > * {
	margin-block: 0;
}

/* The length the motion plays over: the stage is pinned for all but the last
   screen of it. Composition geometry, read by pattern.js as phases. */
@media (prefers-reduced-motion: no-preference) {
	html.js .map-band-001 {
		height: 380svh;
	}
}

/* Doubled classes: the editor makes every block position: relative. */
.map-band-001 .map-band-001__stage.map-band-001__stage {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
	background: var(--color-ink-deep);
}

.map-band-001 .map-band-001__photo.map-band-001__photo {
	position: absolute;
	inset: 0;
	margin: 0;
	transform-origin: 0 0;
	will-change: transform;
}

.map-band-001__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Pins: placed by pattern.js on the photo (data-x / data-y) ---------- */

.map-band-001 .map-band-001__pin.map-band-001__pin {
	position: absolute;
	z-index: 2;
	display: none;
	margin: 0;
	padding: var(--space-xs) var(--space-sm);
	/* A pill: the label sits above its point. */
	border-radius: 999px;
	background: color-mix(in srgb, var(--color-background) 92%, transparent);
	color: var(--color-text);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	/* --nudge (pattern.js) slides the label sideways to keep it on screen;
	   its point (::before / ::after) moves back by the same, staying put. */
	translate: calc(-50% + var(--nudge, 0px)) calc(-100% - var(--space-md));
	pointer-events: none;
}

.map-band-001.is-mapped .map-band-001__pin.map-band-001__pin {
	display: block;
}

/* The point under each label: a small dot; the house gets a ring. Offset from
   the label by the same gap the label is lifted by. */
.map-band-001__pin::before {
	content: "";
	position: absolute;
	left: calc(50% - var(--nudge, 0px));
	top: calc(100% + var(--space-md));
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background: var(--color-on-dark);
	translate: -50% -50%;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-ink-deep) 25%, transparent);
}

.map-band-001__pin--home::before {
	width: 3rem;
	height: 3rem;
	border: 2px solid var(--color-on-dark);
	background: transparent;
	box-shadow: none;
}

@media (prefers-reduced-motion: no-preference) {
	.map-band-001__pin--home::after {
		content: "";
		position: absolute;
		left: calc(50% - var(--nudge, 0px));
		top: calc(100% + var(--space-md));
		width: 3rem;
		height: 3rem;
		border: 1px solid var(--color-on-dark);
		border-radius: 50%;
		translate: -50% -50%;
		animation: map-band-001-pulse 2.4s ease-out infinite;
	}
}

@keyframes map-band-001-pulse {
	from { scale: 1; opacity: 0.8; }
	to   { scale: 2.2; opacity: 0; }
}

/* The drawn route: an SVG layer pattern.js adds over the photo. */
.map-band-001__route {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}

.map-band-001__route path {
	fill: none;
	stroke: var(--color-on-dark);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-dasharray: 4 6;
}

/* ---- The card ------------------------------------------------------------ */

.map-band-001 .map-band-001__card.map-band-001__card {
	position: absolute;
	z-index: 3;
	left: var(--header-gutter);
	bottom: var(--space-lg);
	width: min(30rem, 100% - var(--gutter) * 2);
	padding: var(--space-lg);
	border-radius: var(--radius-lg);
	background: var(--color-background);
	color: var(--color-text);
	box-shadow: 0 24px 60px color-mix(in srgb, var(--color-ink-deep) 30%, transparent);
}

.map-band-001__card > * {
	margin-block: 0;
}

.map-band-001 .map-band-001__title {
	margin-top: var(--space-sm);
	font-size: var(--heading-3);
	text-wrap: balance;
}

.map-band-001 .map-band-001__lead {
	margin-top: var(--space-sm);
	color: var(--color-muted);
}

.map-band-001 .map-band-001__facts {
	margin-top: var(--space-md);
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--sm);
}

.map-band-001__facts li {
	display: flex;
	justify-content: space-between;
	gap: var(--space-sm);
	padding-block: var(--space-xs);
	border-top: 1px solid var(--color-border);
}

.map-band-001__facts strong {
	font-weight: 500;
	white-space: nowrap;
}

/* A phone: the card takes the width at the foot of the screen. */
@media (max-width: 40rem) {
	.map-band-001 .map-band-001__card.map-band-001__card {
		left: var(--gutter);
		right: var(--gutter);
		bottom: var(--space-md);
		width: auto;
		padding: var(--space-md);
	}
}