/**
 * Radoon — the interactions of a destination hero's map (assets/js/route-interact.js).
 *
 * Page content over the route stage: invisible targets for the cities, the neighbours' names, a
 * city's card, the map controls and two short hints, all in the stage's hairline, night-map
 * language. Everything is placed by the script in free space; nothing here moves anything on its
 * own. Without scripts the layer stays hidden.
 *
 * @package radoon
 */

/* ------------------------------------------------------------------ The layer */

/* Beside the stage in its wrapper: the layer over all of it, the pointer's surface under the map. */
.rdn-ix {
	position: absolute;
	inset: 0;
	direction: rtl;
	pointer-events: none;
}

.rdn-ix[hidden],
.rdn-ix-surface[hidden] {
	display: none;
}

/* Every placed element is positioned from the stage's top left corner by the script. */
.rdn-ix-city,
.rdn-ix-near,
.rdn-ix-tag,
.rdn-ix-card,
.rdn-ix-hint,
.rdn-ix-tools {
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
}

/* Measured off screen before it is placed. */
.rdn-ix .is-measure {
	visibility: hidden !important;
	opacity: 0 !important;
	transition: none !important;
}

/* The pointer's surface, under the map (whose own layers let the pointer through): it reads the
   map under the pointer while the country is shown. Before a tap, a finger scrolls the page as
   ever and only two fingers zoom the map; after it, one finger pans. */
.rdn-ix-surface {
	position: absolute;
	top: 0;
	left: 0;
	inline-size: 100%;
	block-size: 100%;
	pointer-events: none;
	touch-action: pan-x pan-y;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
}

.rdn-ix-surface.is-on {
	pointer-events: auto;
	cursor: grab;
}

.rdn-ix-surface.is-on.is-pointing {
	cursor: pointer;
}

.rdn-ix-surface.is-on.is-dragging {
	cursor: grabbing;
}

.rdn-ix-surface.is-touch {
	touch-action: none;
}

/* ------------------------------------------------------------------ Cities */

/* A 44 px target on each lit city, for focus and assistive technology; the pointer is read by the
   surface. Its focus ring is a hairline circle round the light. */
.rdn-ix-city {
	inline-size: 44px;
	block-size: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: transparent;
	font-size: 0;
	pointer-events: none;
}

.rdn-ix-city:focus {
	outline: none;
}

.rdn-ix-city:focus-visible::after {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1px solid var(--rdn-sand);
	border-radius: 50%;
}

/* A city pointed at glows a little brighter and wider; the hero city's point does the same. */
.rdn-route__city-glow,
.rdn-route__city-dot,
.rdn-route__city-name {
	transition: opacity 0.3s var(--rdn-ease), fill 0.3s var(--rdn-ease);
}

.rdn-route__city.is-ix-hot .rdn-route__city-glow {
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(1.9);
	opacity: 1;
	animation: none;
}

.rdn-route__city.is-ix-hot .rdn-route__city-dot {
	fill: var(--rdn-pearl);
}

.rdn-route__city.is-ix-hot .rdn-route__city-name {
	fill: var(--rdn-white);
}

.rdn-route__place.is-ix-hot .rdn-route__dest-glow {
	opacity: 1;
}

/* The destination's point keeps its size in the visitor's view: each circle scales about itself. */
.rdn-route__place circle {
	transform-box: fill-box;
	transform-origin: center;
}

/* ------------------------------------------------------------------ The card of a city */

.rdn-ix-card {
	inline-size: max-content;
	max-inline-size: 15.5rem;
	margin: 0;
	padding: 0.5rem 0.75rem 0.625rem;
	border: 0.75px solid rgb(184 138 68 / 0.75);
	background: rgb(10 28 58 / 0.86);
	color: var(--rdn-on-navy);
	font-size: 0.8125rem;
	line-height: 1.75;
	pointer-events: auto;
	animation: rdn-ix-in 0.25s var(--rdn-ease) both;
}

.rdn-ix-card[hidden] {
	display: none;
}

.rdn-ix-card.is-pinned {
	padding-inline-end: 2.25rem;
	border-color: var(--rdn-royal);
}

@keyframes rdn-ix-in {
	from {
		opacity: 0;
	}
}

.rdn-ix-card__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.5rem;
	margin: 0;
	color: var(--rdn-white);
	font-family: var(--rdn-font-head);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.6;
}

.rdn-ix-card__latin {
	color: var(--rdn-sand);
	font-family: var(--rdn-font-latin);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.rdn-ix-card__head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.25rem 0 0.125rem;
	color: var(--rdn-sand);
	font-size: 0.6875rem;
	line-height: 1.6;
	white-space: nowrap;
}

.rdn-ix-card__head::after {
	content: "";
	flex: 1 1 1rem;
	block-size: 0;
	border-block-start: 0.75px solid rgb(184 138 68 / 0.55);
}

.rdn-ix-card__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rdn-ix-card__list li {
	position: relative;
	padding-inline-start: 0.75rem;
	font-size: 0.78rem;
	line-height: 1.7;
}

.rdn-ix-card__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.125rem;
	inset-block-start: 0.72em;
	inline-size: 3px;
	block-size: 3px;
	background: var(--rdn-royal);
	transform: rotate(45deg);
}

.rdn-ix-card__list .rdn-ix-card__more {
	color: rgb(202 209 219 / 0.75);
}

.rdn-ix-card__note {
	margin: 0.25rem 0 0;
	font-size: 0.75rem;
	line-height: 1.75;
}

.rdn-ix-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-block-start: 0.375rem;
	color: var(--rdn-sand);
	font-size: 0.75rem;
	text-decoration: underline;
	text-decoration-thickness: 0.75px;
	text-underline-offset: 0.3em;
}

.rdn-ix-card__link::after {
	content: "←";
	text-decoration: none;
}

.rdn-ix-card__link:hover {
	color: var(--rdn-white);
}

.rdn-ix-card__link:focus-visible,
.rdn-ix-card__close:focus-visible {
	outline: 1px solid var(--rdn-sand);
	outline-offset: 2px;
}

.rdn-ix-card__close {
	position: absolute;
	inset-block-start: 0.375rem;
	inset-inline-end: 0.375rem;
	display: grid;
	place-items: center;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--rdn-sand);
	cursor: pointer;
}

.rdn-ix-card__close path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.2;
	stroke-linecap: round;
}

.rdn-ix-card__close:hover {
	color: var(--rdn-white);
}

/* ------------------------------------------------------------------ Neighbours */

/* The soft light of a neighbour pointed at, under the borders already drawn. It comes at once: a
   fade would paint the whole of a large shape again on every frame. */
.rdn-ix-land {
	fill: rgb(218 192 163 / 0);
	stroke: none;
	pointer-events: none;
}

.rdn-ix-land.is-lit {
	fill: rgb(218 192 163 / 0.12);
}

/* A neighbour's name, and for a destination the way to its page: invisible until pointed at or
   focused, then a small hairline label. */
.rdn-ix-near,
.rdn-ix-tag {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
	padding: 0.25rem 0.625rem 0.3125rem;
	border: 0.75px solid rgb(218 192 163 / 0.45);
	background: rgb(10 28 58 / 0.8);
	color: var(--rdn-white);
	font-size: 0.75rem;
	line-height: 1.6;
	text-decoration: none;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s var(--rdn-ease), border-color 0.25s var(--rdn-ease);
}

.rdn-ix-near[hidden],
.rdn-ix-tag[hidden] {
	display: none;
}

.rdn-ix-near.is-shown,
.rdn-ix-tag.is-shown {
	opacity: 1;
}

.rdn-ix-near.is-shown {
	pointer-events: auto;
}

.rdn-ix-near__name {
	font-weight: 600;
}

.rdn-ix-near__go {
	display: inline-flex;
	align-items: center;
	gap: 0.3125rem;
	color: var(--rdn-sand);
	font-size: 0.6875rem;
}

.rdn-ix-near__go::after {
	content: "←";
}

.rdn-ix-near.is-small .rdn-ix-near__go {
	display: none;
}

.rdn-ix-near:hover {
	border-color: var(--rdn-sand);
	color: var(--rdn-white);
}

.rdn-ix-near:focus {
	outline: none;
}

.rdn-ix-near:focus-visible {
	border-color: var(--rdn-sand);
	outline: 1px solid var(--rdn-sand);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ Controls and hints */

.rdn-ix-tools {
	display: flex;
	gap: 0.375rem;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s var(--rdn-ease), visibility 0s 0.4s;
}

.rdn-ix.is-on .rdn-ix-tools {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.6s var(--rdn-ease) 0.4s;
}

/* A card that needs their room on a small map: the controls step back until it closes. */
.rdn-ix.is-on.is-card-room .rdn-ix-tools {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s var(--rdn-ease), visibility 0s 0.2s;
}

/* A bird passing over the controls: they step back until it has gone. */
.rdn-ix.is-on .rdn-ix-tools.is-shy {
	opacity: 0;
	transition: opacity 0.2s var(--rdn-ease);
}

.rdn-ix-tools.is-none {
	display: none;
}

.rdn-ix-tools.is-column {
	flex-direction: column;
}

.rdn-ix-tools.is-grid {
	display: grid;
	grid-template-columns: repeat(2, auto);
}

.rdn-ix-tools.is-pair :is([data-rdn-ix-do="back"], [data-rdn-ix-do="replay"]) {
	display: none;
}

.rdn-ix-tools.is-still [data-rdn-ix-do="replay"] {
	display: none;
}

.rdn-ix-tools__button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	min-inline-size: 2rem;
	block-size: 2rem;
	margin: 0;
	padding: 0 0.5625rem;
	border: 0.75px solid rgb(218 192 163 / 0.45);
	border-radius: 0;
	background: rgb(10 28 58 / 0.62);
	color: var(--rdn-sand);
	font: inherit;
	font-size: 0.75rem;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color var(--rdn-fast) var(--rdn-ease), color var(--rdn-fast) var(--rdn-ease), opacity var(--rdn-fast) var(--rdn-ease);
}

.rdn-ix-tools__button svg {
	flex: none;
}

.rdn-ix-tools__button path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.1;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.rdn-ix-tools__button:hover {
	border-color: var(--rdn-sand);
	color: var(--rdn-white);
}

.rdn-ix-tools__button:focus {
	outline: none;
}

.rdn-ix-tools__button:focus-visible {
	border-color: var(--rdn-sand);
	outline: 1px solid var(--rdn-sand);
	outline-offset: 2px;
}

.rdn-ix-tools__button.is-idle {
	opacity: 0.45;
}

/* Icons only where there is little room: the labels stay for assistive technology. */
.rdn-ix-tools.is-compact .rdn-ix-tools__button,
.rdn-ix-tools__button:not(.rdn-ix-tools__button--text) {
	padding: 0;
	inline-size: 2rem;
}

.rdn-ix-tools.is-compact .rdn-ix-tools__button span {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* A phone's small map: the controls keep their icons, the card is narrower. */
@media (width < 900px) {
	.rdn-ix-tools__button--text {
		padding: 0;
		inline-size: 2rem;
	}

	.rdn-ix-tools__button span {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.rdn-ix-card {
		max-inline-size: 13.5rem;
		padding: 0.375rem 0.625rem 0.5rem;
		font-size: 0.75rem;
	}

	.rdn-ix-card.is-pinned {
		padding-inline-end: 2rem;
	}

	.rdn-ix-card__title {
		font-size: 0.875rem;
	}
}

@media (pointer: coarse) {
	.rdn-ix-tools {
		gap: 0.5rem;
	}

	.rdn-ix-tools__button {
		min-inline-size: 2.25rem;
		block-size: 2.25rem;
	}

	.rdn-ix-tools.is-compact .rdn-ix-tools__button,
	.rdn-ix-tools__button:not(.rdn-ix-tools__button--text) {
		inline-size: 2.25rem;
	}

	/* A fingertip's reach: 44 px round every control, the card's close button and link, and a
	   neighbour's name. */
	.rdn-ix-tools__button::before,
	.rdn-ix-card__close::before,
	.rdn-ix-card__link::before,
	.rdn-ix-near::before {
		content: "";
		position: absolute;
		inset: -0.25rem;
	}

	.rdn-ix-card__close::before {
		inset: -0.625rem;
	}

	.rdn-ix-card__link {
		position: relative;
	}

	.rdn-ix-card__link::before {
		inset: -0.75rem -0.25rem;
	}

	.rdn-ix-near::before {
		inset: -0.5rem -0.25rem;
	}

	/* On a touch screen the controls come with the map's first tap (or with focus), so the picture
	   stays quiet for a visitor who only scrolls past. */
	.rdn-ix.is-on:not(.is-touch):not(:focus-within) .rdn-ix-tools {
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
	}
}

.rdn-ix-hint {
	margin: 0;
	padding: 0.25rem 0.625rem;
	border: 0.75px solid rgb(218 192 163 / 0.4);
	background: rgb(10 28 58 / 0.84);
	color: var(--rdn-on-navy);
	font-size: 0.75rem;
	line-height: 1.6;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s var(--rdn-ease);
}

.rdn-ix-hint[hidden] {
	display: none;
}

.rdn-ix-hint.is-shown {
	opacity: 1;
}

.rdn-ix-hint__touch,
.rdn-ix-hint.is-touch .rdn-ix-hint__wheel {
	display: none;
}

.rdn-ix-hint.is-touch .rdn-ix-hint__touch {
	display: inline;
}

/* ------------------------------------------------------------------ On the map */

/* A ripple where the pointer crosses the water: a hairline ring that widens and fades. */
.rdn-ix-ripple {
	fill: none;
	stroke: var(--rdn-sand);
	stroke-width: 0.75;
	vector-effect: non-scaling-stroke;
	pointer-events: none;
}

/*
 * While the visitor moves the view, the postcard, the time line, the moon and the scene's small
 * ornaments and moving lights step back; the landmark stays with its land and steps back only
 * where it would meet a control, a card or the edge. A card the visitor opened also has the
 * postcard and the time line give way when it needs their room, and a moving light or a glint
 * steps back while it passes under anything of this layer.
 */
.rdn-route.is-ix-explored :is(.rdn-fx-card, .rdn-fx-time, .rdn-fx__moon, .rdn-fx__mover, .rdn-fx__wake, .rdn-fx__meridian .rdn-fx__mover-dot, .rdn-fx__meridian .rdn-fx__mover-glow),
.rdn-route.is-ix-explored .rdn-fx--front > :not([data-rdn-fx-landmark]),
.rdn-route .is-ix-under,
.rdn-route.is-ix-card-room :is(.rdn-fx-card, .rdn-fx-time),
.rdn-route .rdn-fx-icon.is-ix-away,
.rdn-route .rdn-fx__landmark:has(.is-ix-away) .rdn-fx__leader {
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity 0.3s var(--rdn-ease), visibility 0s 0.3s !important;
}

/* The family fades softly while it passes under the hero text, a control or a card. */
.rdn-route.is-ix .rdn-route__flyer > .rdn-route__mark {
	transition: opacity 0.25s var(--rdn-ease);
}

/* ------------------------------------------------------------------ Less motion */

@media (prefers-reduced-motion: reduce) {
	.rdn-ix *,
	.rdn-ix-land,
	.rdn-route__city-glow,
	.rdn-route__city-dot,
	.rdn-route__city-name {
		transition: none !important;
		animation: none !important;
	}
}

.rdn-motion-off .rdn-ix *,
.rdn-motion-off .rdn-ix-land {
	transition: none !important;
	animation: none !important;
}