/**
 * Radoon — the route stage and the heroes built on it (home and destination pages).
 *
 * The map is decorative SVG drawn in hairlines. The site script flies the family and reveals the
 * dotted trail behind it; the city lights, the breathing home light and the clouds move with CSS.
 * Without scripts, and with reduced motion, the finished journey is shown standing still.
 *
 * @package radoon
 */

/* ------------------------------------------------------------------ Route stage */

.rdn-route {
	position: relative;
	inline-size: 100%;
	block-size: 100%;
	pointer-events: none;
}

.rdn-route__map {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	overflow: visible;
}

.rdn-route__land {
	fill: rgb(218 192 163 / 0.03);
	stroke: rgb(218 192 163 / 0.26);
	stroke-width: 0.7;
	vector-effect: non-scaling-stroke;
	stroke-linejoin: round;
}

/* The European Union, quietly lit; the featured countries a shade stronger. */
.rdn-route__nation {
	fill: rgb(218 192 163 / 0.05);
	stroke: rgb(218 192 163 / 0.22);
	stroke-width: 0.6;
	vector-effect: non-scaling-stroke;
	stroke-linejoin: round;
}

.rdn-route__nation--eu {
	fill: rgb(218 192 163 / 0.085);
	stroke: rgb(218 192 163 / 0.3);
}

.rdn-route__nation--featured {
	fill: rgb(184 138 68 / 0.34);
	stroke: var(--rdn-royal);
	stroke-width: 1.1;
	animation: rdn-nation-glow 6s var(--rdn-ease-in-out) infinite alternate;
}

@keyframes rdn-nation-glow {
	from {
		fill: rgb(184 138 68 / 0.26);
	}

	to {
		fill: rgb(184 138 68 / 0.42);
	}
}

.rdn-route__nation--focus {
	fill: rgb(184 138 68 / 0.26);
	stroke: var(--rdn-royal);
	stroke-width: 1.2;
}

/* The sky: a few faint clouds drifting east on the westerlies, in two layers. Only transforms
   move, so the blur is painted once and the browser slides the finished layer. */

.rdn-route__sky {
	position: absolute;
	inset: 0;
	overflow: hidden;
	direction: ltr;
	pointer-events: none;
}

.rdn-route__drift {
	position: absolute;
	inset-inline: 0;
	inset-block-start: var(--rdn-cloud-top, 20%);
	block-size: 0;
	animation: rdn-drift var(--rdn-cloud-time, 100s) linear var(--rdn-cloud-at, 0s) infinite;
	will-change: transform;
}

@keyframes rdn-drift {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(100% + var(--rdn-cloud-w, 24%)));
	}
}

.rdn-route__cloud {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	inline-size: var(--rdn-cloud-w, 24%);
	aspect-ratio: 3.4 / 1;
	border-radius: 50%;
	background: var(--rdn-on-navy);
	opacity: 0.045;
	filter: blur(clamp(6px, 1.6vw, 22px));
	transform: translate(-100%, -50%);
}

.rdn-route__cloud::before,
.rdn-route__cloud::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: inherit;
}

.rdn-route__cloud::before {
	inline-size: 46%;
	aspect-ratio: 1;
	inset-inline-start: 16%;
	inset-block-end: 34%;
}

.rdn-route__cloud::after {
	inline-size: 34%;
	aspect-ratio: 1;
	inset-inline-start: 50%;
	inset-block-end: 26%;
}

.rdn-route__sky--near .rdn-route__cloud {
	opacity: 0.055;
}

/* City lights: every other capital glows softly on its own slow beat. */
.rdn-route__light {
	opacity: 0.55;
	animation: rdn-twinkle var(--rdn-tw, 5s) var(--rdn-ease-in-out) var(--rdn-tw-at, 0s) infinite alternate;
}

@keyframes rdn-twinkle {
	0% {
		opacity: 0.22;
	}

	45% {
		opacity: 0.7;
	}

	60% {
		opacity: 0.5;
	}

	100% {
		opacity: 0.95;
	}
}

/* The trail: a fine dotted line warming from gold to sand, revealed behind the family as it flies.
   Its colour is a gradient on the path itself. */
.rdn-route__trail {
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-dasharray: 0.1 7;
	vector-effect: non-scaling-stroke;
	opacity: 0.9;
}

/* Only the first leg is drawn when the journey stands still; the script shows each leg in turn. */
.rdn-route__trail.is-quiet {
	opacity: 0;
}

/* Tehran: a warm home light with one slow breath. */
.rdn-route__origin {
	fill: var(--rdn-sand);
}

.rdn-route__origin-ring,
.rdn-route__dest-ring,
.rdn-route__bloom {
	fill: none;
	stroke: var(--rdn-sand);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	transform-box: fill-box;
	transform-origin: center;
}

.rdn-route__origin-ring {
	opacity: 0.5;
	animation: rdn-breathe 5.5s var(--rdn-ease-in-out) infinite alternate;
}

@keyframes rdn-breathe {
	from {
		opacity: 0.55;
		transform: scale(0.8);
	}

	to {
		opacity: 0.16;
		transform: scale(1.5);
	}
}

.rdn-route__glow {
	opacity: 0.95;
}

/* Destinations: the point blooms once as the family lands and its name rises into place. */
.rdn-route__dest {
	fill: var(--rdn-royal);
	transform-box: fill-box;
	transform-origin: center;
}

.rdn-route__dest-ring {
	opacity: 0.45;
}

.rdn-route__dest-glow {
	opacity: 0.55;
	transition: opacity 1.4s var(--rdn-ease);
}

.rdn-route__bloom {
	opacity: 0;
	stroke-width: 1.2;
}

.rdn-route__place.is-target .rdn-route__dest-glow {
	opacity: 0.2;
}

.rdn-route__place.is-arrived .rdn-route__dest-glow {
	opacity: 0.8;
}

.rdn-route__place.is-arrived .rdn-route__dest {
	animation: rdn-bloom-dot 1.2s var(--rdn-ease);
}

@keyframes rdn-bloom-dot {
	35% {
		fill: var(--rdn-sand);
		transform: scale(1.8);
	}
}

.rdn-route__place.is-arrived .rdn-route__bloom {
	animation: rdn-bloom-ring 2s var(--rdn-ease) forwards;
}

@keyframes rdn-bloom-ring {
	from {
		opacity: 0.85;
		transform: scale(0.7);
	}

	to {
		opacity: 0;
		transform: scale(3.4);
	}
}

.rdn-route__label {
	fill: var(--rdn-white);
	font-family: var(--rdn-font-body);
	font-size: 26px;
	font-weight: 600;
	direction: ltr;
	paint-order: stroke;
	stroke: rgb(10 28 58 / 0.85);
	stroke-width: 7px;
	stroke-linejoin: round;
}

.rdn-route__leader {
	fill: none;
	stroke: rgb(218 192 163 / 0.7);
	stroke-width: 1;
	stroke-dasharray: 3 4;
	vector-effect: non-scaling-stroke;
}

.rdn-route__place .rdn-route__label,
.rdn-route__place .rdn-route__leader {
	transition: opacity 1s var(--rdn-ease), transform 1.2s var(--rdn-ease);
}

.rdn-route.is-ready .rdn-route__place.is-target:not(.is-arrived) .rdn-route__label {
	opacity: 0;
	transform: translateY(16px);
}

.rdn-route.is-ready .rdn-route__place.is-target:not(.is-arrived) .rdn-route__leader {
	opacity: 0;
}

/* While the family is on its way elsewhere, the other destinations step back. */
.rdn-route.is-live .rdn-route__place:not(.is-target) :is(.rdn-route__label, .rdn-route__leader) {
	opacity: 0.4;
}

.rdn-route__label--origin {
	fill: var(--rdn-sand);
}

/* Destination emblems: drawn once, then still. */

.rdn-route__star {
	fill: none;
	stroke: var(--rdn-royal);
	stroke-width: 1.2;
	vector-effect: non-scaling-stroke;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation: rdn-arrive 700ms var(--rdn-ease) forwards;
	animation-delay: calc(0.8s + var(--rdn-star) * 90ms);
}

@keyframes rdn-arrive {
	from {
		opacity: 0;
		transform: scale(0.4);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* The compass of the United Kingdom: fine dial ticks turning slowly round the family and the eight
   points of the rose on the rim, drawn once. Like the stars, every mark is its own item on the ring. */
.rdn-route__compass-tick,
.rdn-route__compass-mark {
	fill: none;
	stroke-width: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation: rdn-arrive 700ms var(--rdn-ease) forwards;
}

.rdn-route__compass-tick {
	stroke: rgb(218 192 163 / 0.5);
	animation-delay: calc(0.8s + var(--rdn-star) * 40ms);
}

.rdn-route__compass-mark {
	stroke: var(--rdn-royal);
	animation-delay: calc(1.1s + var(--rdn-star) * 90ms);
}

.rdn-route__compass-mark--minor {
	stroke: rgb(218 192 163 / 0.6);
}

.rdn-route__compass-mark--north {
	fill: rgb(184 138 68 / 0.3);
}

/* The zoom of a destination hero: once the family has landed, the camera moves into the country.
   The script sets these opacities frame by frame and shows each layer only while it can be seen;
   without it they stay hidden and the Europe view remains. Hairlines stay hairlines at any zoom. */

.rdn-route__context {
	fill: none;
	stroke: rgb(218 192 163 / 0.3);
	stroke-width: 0.7;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	opacity: 0;
	visibility: hidden;
}

.rdn-route__outline {
	fill: rgb(184 138 68 / 0.17);
	fill-opacity: 0;
	stroke: var(--rdn-royal);
	stroke-width: 1.3;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	opacity: 0;
	visibility: hidden;
}

/* The country's university cities: small warm lights, named at one size on screen at any zoom.
   Each city is drawn in screen pixels; the hero city is named larger beside its own point. */
.rdn-route__city {
	opacity: 0;
}

.rdn-route__city-dot {
	fill: var(--rdn-sand);
}

.rdn-route__city-glow {
	opacity: 0.8;
}

.rdn-route__city-name {
	fill: rgb(250 249 248 / 0.9);
	font-family: var(--rdn-font-body);
	font-size: 13px;
	font-weight: 500;
	direction: ltr;
	paint-order: stroke;
	stroke: rgb(10 28 58 / 0.9);
	stroke-width: 4px;
	stroke-linejoin: round;
}

.rdn-route__city--hero .rdn-route__city-name {
	fill: var(--rdn-white);
	font-size: 15px;
	font-weight: 700;
}

@media (width < 900px) {
	.rdn-route__city-name {
		font-size: 11.5px;
		stroke-width: 3.5px;
	}

	.rdn-route__city--hero .rdn-route__city-name {
		font-size: 13px;
	}
}

/* The family and its trail: without scripts they rest at the first destination; once the script
   is running it takes over, and if it never does they appear after a moment all the same. */

.js .rdn-route:not(.is-ready) :is(.rdn-route__flyer, .rdn-route__trail) {
	opacity: 0;
	animation: rdn-flock-fallback 0s 4.5s forwards;
}

@keyframes rdn-flock-fallback {
	to {
		opacity: 1;
	}
}

/* ------------------------------------------------------------------ Signature scene */

/* The scene of a destination hero (assets/js/route-fx.js): drawn once the camera has settled on
   the country, over and under the map, in hairlines that keep their width at any zoom. Every layer
   is hidden until the script shows it, so without scripts nothing of it appears. */

.rdn-fx {
	visibility: hidden;
}

.rdn-fx__hachure,
.rdn-fx__river-bed,
.rdn-fx__river-light,
.rdn-fx__lake,
.rdn-fx__wave,
.rdn-fx__glint,
.rdn-fx__peak,
.rdn-fx__coastlight,
.rdn-fx__track,
.rdn-fx__track-ticks,
.rdn-fx__wake,
.rdn-fx__balloon,
.rdn-fx__streamline,
.rdn-fx__meridian-line,
.rdn-fx__leader,
.rdn-fx__stars,
.rdn-fx__rays path,
.rdn-fx__cloud path,
.rdn-fx__curtain,
.rdn-fx__meteor,
.rdn-fx__rainbow-arc,
.rdn-fx__particle,
.rdn-fx__swell-arc,
.rdn-fx__spray,
.rdn-fx__ring,
.rdn-fx__wisp,
.rdn-fx__glint-mark,
.rdn-fx__moon-rim,
[class^="rdn-fx-icon__"] {
	vector-effect: non-scaling-stroke;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Relief: hachure engraved from the crest downhill, fainter away from it. The strokes nearest the
   crest catch the golden hour and, in winter, the snow. */
.rdn-fx__hachure {
	fill: none;
	stroke: var(--rdn-royal);
	stroke-width: 0.6;
	stroke-opacity: 0.42;
	opacity: 0;
	transition: stroke 1.2s var(--rdn-ease);
}

.rdn-fx__hachure[data-rdn-band="2"],
.rdn-fx__hachure[data-rdn-band="3"] {
	stroke-opacity: 0.3;
}

.rdn-fx__hachure[data-rdn-band="4"] {
	stroke-opacity: 0.2;
}

.rdn-fx__range--cliff .rdn-fx__hachure {
	stroke-opacity: 0.5;
}

.rdn-fx__range--dune .rdn-fx__hachure,
.rdn-fx__range--grid .rdn-fx__hachure {
	stroke: var(--rdn-sand);
	stroke-opacity: 0.3;
}

.rdn-fx__range--grid .rdn-fx__hachure {
	stroke-opacity: 0.18;
}

.rdn-route[data-rdn-sky="golden"] .rdn-fx__range--range .rdn-fx__hachure[data-rdn-band="0"],
.rdn-route[data-rdn-sky="golden"] .rdn-fx__range--range .rdn-fx__hachure[data-rdn-band="1"],
.rdn-fx__range.is-lit .rdn-fx__hachure {
	stroke: var(--rdn-sand);
	stroke-opacity: 0.62;
}

.rdn-route[data-rdn-season="winter"] .rdn-fx__range--range .rdn-fx__hachure[data-rdn-band="0"] {
	stroke: var(--rdn-pearl);
	stroke-opacity: 0.55;
}

.rdn-fx__peak {
	fill: none;
	stroke: var(--rdn-pearl);
	stroke-opacity: 0.7;
	stroke-width: 0.8;
	opacity: 0;
}

/* Water: river beds in on-navy hairlines with a sand light flowing downstream; lakes a shade
   lighter than the night, with glints; short wave arcs along the named coasts. */
.rdn-fx__river-bed {
	fill: none;
	stroke: var(--rdn-on-navy);
	stroke-opacity: 0.42;
	stroke-width: 0.9;
	opacity: 0;
}

.rdn-fx__river-light {
	fill: none;
	stroke: var(--rdn-sand);
	stroke-opacity: 0.85;
	stroke-width: 1.5;
	opacity: 0;
}

.rdn-fx__lake {
	fill: rgb(202 209 219 / 0.07);
	stroke: var(--rdn-on-navy);
	stroke-opacity: 0.5;
	stroke-width: 0.6;
	opacity: 0;
}

.rdn-fx__lake--named {
	fill: rgb(202 209 219 / 0.1);
}

.rdn-fx__shore {
	fill: none;
	stroke: none;
}

.rdn-fx__wave {
	fill: none;
	stroke: var(--rdn-on-navy);
	stroke-opacity: 0.5;
	stroke-width: 0.7;
	opacity: 0;
}

.rdn-fx__glint {
	fill: none;
	stroke: var(--rdn-pearl);
	stroke-opacity: 0.8;
	stroke-width: 0.8;
	opacity: 0;
}

.rdn-fx__coastlight {
	fill: none;
	stroke: var(--rdn-sand);
	stroke-opacity: 0.8;
	stroke-width: 1.4;
	opacity: 0;
}

/* The country's own motions: routes, lights travelling them, pulses, glints, wind and swell. */
.rdn-fx__route,
.rdn-fx__network,
.rdn-fx__stream,
.rdn-fx__meridian,
.rdn-fx__glints,
.rdn-fx__pulse,
.rdn-fx__badge,
.rdn-fx__swell,
.rdn-fx__moonroad {
	opacity: 0;
}

.rdn-fx__track {
	fill: none;
	stroke: var(--rdn-sand);
	stroke-opacity: 0.34;
	stroke-width: 0.7;
}

.rdn-fx__track--dotted {
	stroke-opacity: 0.5;
	stroke-dasharray: 0.1 3.2;
	stroke-width: 1.1;
}

.rdn-fx__track--tunnel {
	stroke-opacity: 0.4;
	stroke-dasharray: 1.4 2.8;
}

.rdn-fx__track--road {
	stroke-opacity: 0.26;
}

.rdn-fx__track-ticks {
	fill: none;
	stroke: var(--rdn-sand);
	stroke-opacity: 0.5;
	stroke-width: 0.7;
}

.rdn-fx__mover {
	opacity: 0;
}

.rdn-fx__mover-dot,
.rdn-fx__pulse-dot {
	fill: var(--rdn-pearl);
}

.rdn-fx__mover-glow {
	opacity: 0.9;
}

.rdn-fx__balloon {
	fill: rgb(10 28 58 / 0.5);
	stroke: var(--rdn-sand);
	stroke-width: 0.8;
}

.rdn-fx__wake {
	fill: none;
	stroke: var(--rdn-pearl);
	stroke-opacity: 0.4;
	stroke-width: 0.8;
	stroke-dasharray: 0.1 2.6;
}

.rdn-fx__streamline {
	fill: none;
	stroke: var(--rdn-on-navy);
	stroke-opacity: 0.4;
	stroke-width: 0.7;
}

.rdn-fx__swell-arc,
.rdn-fx__ring {
	fill: none;
	stroke: var(--rdn-on-navy);
	stroke-opacity: 0.6;
	stroke-width: 0.8;
}

.rdn-fx__ring {
	stroke: var(--rdn-sand);
}

.rdn-fx__spray,
.rdn-fx__wisp {
	fill: none;
	stroke: var(--rdn-pearl);
	stroke-opacity: 0.7;
	stroke-width: 0.8;
}

.rdn-fx__meridian-line {
	fill: none;
	stroke: var(--rdn-royal);
	stroke-opacity: 0.8;
	stroke-width: 0.9;
}

.rdn-fx__meridian-label {
	fill: var(--rdn-sand);
	font-family: var(--rdn-font-body);
	font-size: 10.5px;
	direction: ltr;
	opacity: 0;
}

.rdn-fx__glint-mark {
	fill: none;
	stroke: var(--rdn-pearl);
	stroke-opacity: 0.85;
	stroke-width: 0.8;
}

.rdn-fx__glints--copper .rdn-fx__glint-mark,
.rdn-fx__glints--autumn .rdn-fx__glint-mark:nth-child(odd) {
	stroke: var(--rdn-sand);
}

.rdn-fx__glints--amber .rdn-fx__glint-mark,
.rdn-fx__glints--autumn .rdn-fx__glint-mark {
	stroke: var(--rdn-royal);
}

/* The landmark: a hairline pictogram that draws itself, with a dotted leader to its true place. */
.rdn-fx-icon {
	opacity: var(--rdn-shy, 1);
}

.rdn-fx-icon__box {
	fill: none;
	stroke: none;
}

.rdn-fx-icon__line {
	fill: none;
	stroke: var(--rdn-royal);
	stroke-width: 1;
}

.rdn-fx-icon__fine,
.rdn-fx-icon__dash,
.rdn-fx-icon__water,
.rdn-fx-icon__pearl {
	fill: none;
	stroke: var(--rdn-sand);
	stroke-opacity: 0.55;
	stroke-width: 0.8;
}

.rdn-fx-icon__dash {
	stroke-dasharray: 1 2;
}

.rdn-fx-icon__water {
	stroke: var(--rdn-on-navy);
	stroke-opacity: 0.5;
}

.rdn-fx-icon__pearl {
	stroke: var(--rdn-pearl);
	stroke-opacity: 0.5;
}

.rdn-fx-icon__light {
	fill: var(--rdn-sand);
	stroke: none;
	opacity: 0;
}

.rdn-fx-icon__light--on {
	opacity: 1;
}

.rdn-fx-icon__lamp {
	fill: none;
	stroke: var(--rdn-sand);
	stroke-width: 1.6;
	opacity: 0;
}

.rdn-fx-icon__mark {
	fill: var(--rdn-royal);
	stroke: none;
}

.rdn-fx-icon__glow {
	opacity: 0;
}

.rdn-fx-icon__band {
	fill: none;
	stroke: var(--rdn-sand);
	stroke-width: 1.8;
	stroke-dasharray: 0.9 1.3;
	stroke-linecap: butt;
}

.rdn-fx__leader {
	fill: none;
	stroke: var(--rdn-royal);
	stroke-opacity: 0.55;
	stroke-width: 0.7;
	stroke-dasharray: 0.1 2.6;
	opacity: 0;
}

.rdn-fx__anchor {
	fill: var(--rdn-sand);
	opacity: 0;
}

/* The sky: the sun's light at the edge in its real direction, warmer at golden hour; the moon at
   its real phase and the stars at night; clouds, mist and aurora as soft light and hairlines. */
.rdn-fx__sun,
.rdn-fx__veil,
.rdn-fx__rays,
.rdn-fx__moon,
.rdn-fx__stars,
.rdn-fx__cloud,
.rdn-fx__cloud-shadow,
.rdn-fx__mist,
.rdn-fx__aurora,
.rdn-fx__meteor,
.rdn-fx__rainbow,
.rdn-fx__particle {
	opacity: 0;
}

.rdn-fx__rays path {
	fill: none;
	stroke: var(--rdn-sand);
	stroke-opacity: 0.16;
	stroke-width: 0.8;
}

.rdn-fx__moon-rim {
	fill: rgb(10 28 58 / 0.55);
	stroke: var(--rdn-pearl);
	stroke-opacity: 0.35;
	stroke-width: 0.8;
}

.rdn-fx__moon-lit {
	fill: var(--rdn-pearl);
	fill-opacity: 0.9;
}

.rdn-fx__moon-halo {
	opacity: 0.35;
}

.rdn-fx__stars {
	fill: var(--rdn-pearl);
}

.rdn-fx__cloud path {
	fill: none;
	stroke: var(--rdn-on-navy);
	stroke-opacity: 0.3;
	stroke-width: 0.7;
	transition: stroke 1.2s var(--rdn-ease);
}

.rdn-fx__cloud.is-golden path {
	stroke: var(--rdn-royal);
	stroke-opacity: 0.5;
}

.rdn-fx__cloud--lens path {
	stroke: var(--rdn-pearl);
	stroke-opacity: 0.32;
}

.rdn-fx__curtain {
	fill: none;
	stroke: var(--rdn-pearl);
	stroke-opacity: 0.2;
	stroke-width: 0.8;
}

.rdn-fx__aurora-glow {
	opacity: 0.45;
}

.rdn-fx__meteor {
	fill: none;
	stroke: var(--rdn-pearl);
	stroke-width: 0.9;
}

.rdn-fx__rainbow-arc {
	fill: none;
	stroke-width: 0.8;
	stroke: var(--rdn-pearl);
	stroke-opacity: 0.35;
}

.rdn-fx__rainbow-arc--1 {
	stroke: var(--rdn-sand);
	stroke-opacity: 0.32;
}

.rdn-fx__rainbow-arc--2 {
	stroke: var(--rdn-on-navy);
	stroke-opacity: 0.28;
}

/* Weather: the season's leaves, snow and drizzle, few and faint. */
.rdn-fx__particle--snow {
	fill: var(--rdn-pearl);
	fill-opacity: 0.65;
}

.rdn-fx__particle--leaves {
	fill: var(--rdn-sand);
	fill-opacity: 0.5;
}

.rdn-fx__particle--royal {
	fill: var(--rdn-royal);
	fill-opacity: 0.6;
}

.rdn-fx__particle--drizzle,
.rdn-fx__particle--streaks,
.rdn-fx__particle--grains {
	fill: none;
	stroke: var(--rdn-on-navy);
	stroke-opacity: 0.35;
	stroke-width: 0.7;
}

.rdn-fx__particle--grains {
	stroke: var(--rdn-sand);
	stroke-opacity: 0.5;
}

/* At night the country's cities glow brighter and softly twinkle. */
.rdn-route[data-rdn-sky="night"] .rdn-route__city-glow,
.rdn-route[data-rdn-sky="blue"] .rdn-route__city-glow {
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(1.35);
	animation: rdn-city-night 4.2s var(--rdn-ease-in-out) infinite alternate;
}

@keyframes rdn-city-night {
	from {
		opacity: 0.75;
	}

	to {
		opacity: 1;
	}
}

/* Malta's limestone turns honey-coloured at golden hour. */
.rdn-route--fx-golden-land[data-rdn-sky="golden"] .rdn-route__outline {
	fill: rgb(218 192 163 / 0.14);
}

/* The local time and the postcard: page text over the map, docked in free corners. */
.rdn-fx-ui {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.rdn-fx-time {
	position: absolute;
	margin: 0;
	color: rgb(218 192 163 / 0.85);
	font-size: 0.75rem;
	line-height: 1.6;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s var(--rdn-ease), visibility 0s 0.6s;
}

.rdn-fx-time.is-plated {
	padding-inline: 0.375rem;
	background: rgb(10 28 58 / 0.62);
}

.rdn-fx-time.is-shown {
	opacity: var(--rdn-shy, 1);
	visibility: visible;
	transition: opacity 0.6s var(--rdn-ease);
}

.rdn-fx-card {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	box-sizing: border-box;
	padding: 0.5rem 0.75rem;
	padding-inline-end: 2.25rem;
	border: 0.75px solid rgb(184 138 68 / 0.75);
	background: rgb(15 44 89 / 0.55);
	color: var(--rdn-on-navy);
	font-size: 0.8125rem;
	line-height: 1.75;
	pointer-events: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.5s var(--rdn-ease), transform 0.5s var(--rdn-ease), visibility 0s 0.5s;
}

.rdn-fx-card.is-shown {
	opacity: var(--rdn-shy, 1);
	visibility: visible;
	transform: none;
	transition: opacity 0.5s var(--rdn-ease), transform 0.5s var(--rdn-ease);
}

/* Corner ticks, like the edge of a stamp. */
.rdn-fx-card::before,
.rdn-fx-card::after {
	content: "";
	position: absolute;
	inline-size: 6px;
	block-size: 6px;
	border: 0 solid var(--rdn-sand);
	pointer-events: none;
}

.rdn-fx-card::before {
	inset-block-start: 3px;
	inset-inline-start: 3px;
	border-block-start-width: 1px;
	border-inline-start-width: 1px;
}

.rdn-fx-card::after {
	inset-block-end: 3px;
	inset-inline-end: 3px;
	border-block-end-width: 1px;
	border-inline-end-width: 1px;
}

.rdn-fx-card__stamp {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border: 0.75px dashed rgb(218 192 163 / 0.6);
	border-radius: 50%;
	color: var(--rdn-sand);
	font-size: 0.625rem;
	line-height: 1.35;
	text-align: center;
}

.rdn-fx-card__stamp-date {
	font-size: 0.5625rem;
	opacity: 0.85;
}

.rdn-fx-card__body {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
}

.rdn-fx-card__text {
	color: var(--rdn-white);
	font-weight: 500;
}

.rdn-fx-card__link {
	align-self: flex-start;
	color: var(--rdn-sand);
	font-size: 0.75rem;
	text-decoration: underline;
	text-decoration-color: rgb(218 192 163 / 0.4);
	text-underline-offset: 3px;
}

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

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

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

.rdn-fx-card.is-compact {
	padding-block: 0.375rem;
	font-size: 0.75rem;
	line-height: 1.7;
}

.rdn-fx-card.is-compact .rdn-fx-card__stamp {
	display: none;
}

.rdn-fx-card.is-mini {
	gap: 0.375rem;
	padding: 0.25rem 0.5rem;
	padding-inline-end: 1.75rem;
	font-size: 0.6875rem;
	line-height: 1.65;
}

.rdn-fx-card.is-mini .rdn-fx-card__link {
	font-size: 0.625rem;
}

.rdn-fx-card.is-mini .rdn-fx-card__close {
	inline-size: 1.5rem;
	block-size: 1.5rem;
}

@media (pointer: coarse) {
	/* A fingertip's reach around the small close button. */
	.rdn-fx-card__close::before {
		content: "";
		position: absolute;
		inset: -0.5rem;
	}
}

/* On a destination hero the map under the text column can be reached by the pointer, so the
   postcard can be closed and followed. */
.rdn-hero--destination .rdn-hero__inner {
	pointer-events: none;
}

.rdn-hero--destination .rdn-hero__content {
	pointer-events: auto;
}

/* Pause: every motion on the stage, and every decorative motion on the page, stops where it is. */
.rdn-route.is-paused *,
.rdn-motion-off .rdn-route * {
	animation-play-state: paused !important;
}

/* ------------------------------------------------------------------ Home hero */

.rdn-hero {
	position: relative;
	display: grid;
	grid-template-rows: 1fr auto;
	min-block-size: max(40rem, min(100svh, 62rem));
	padding-block-start: calc(var(--rdn-header-h) + 2rem);
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(90% 70% at 30% 60%, rgb(18 52 102 / 0.95), transparent 70%),
		var(--rdn-ink);
	color: var(--rdn-on-navy);
}

/* From 1100px the licence strip sits above the header and scrolls away with the page; the hero
   makes room for it, so its foot (and the way down) stays on the first screen. */
@media (width >= 1100px) {
	body:has(.rdn-header__strip) .rdn-hero:not(.rdn-hero--destination) {
		min-block-size: max(40rem, min(100svh - var(--rdn-strip-h), 62rem));
	}
}

.rdn-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to left, rgb(10 28 58 / 0.6) 0%, transparent 36%);
	pointer-events: none;
}

/* Desktop: the whole route sits in the left of the screen, beside the words. Tehran lands next to
   the text column and the line flies on in the reading direction, toward Europe. */
.rdn-hero__stage {
	position: absolute;
	inset-block: calc(var(--rdn-header-h) + 1rem) 4rem;
	inset-inline-end: 0;
	inline-size: min(55%, 60rem);
	z-index: -2;
	display: grid;
	align-items: center;
}

.rdn-hero__stage .rdn-route {
	block-size: auto;
	max-block-size: 100%;
	aspect-ratio: var(--rdn-map-ratio, 16 / 10);
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 82%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 16%, #000 82%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 82%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 16%, #000 82%, transparent 100%);
	mask-composite: intersect;
}

.rdn-hero__inner {
	display: flex;
	align-items: center;
}

.rdn-hero__content {
	max-inline-size: min(38rem, 44%);
	padding-block: 3rem;
}

.rdn-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin: 0 0 1.5rem;
	color: var(--rdn-sand);
	font-family: var(--rdn-font-head);
	font-size: var(--rdn-fs-md);
	font-weight: 400;
	line-height: 1.6;
}

.rdn-hero__eyebrow::before {
	content: "";
	inline-size: 3rem;
	block-size: 1px;
	background: var(--rdn-royal);
}

.rdn-hero__title {
	margin: 0;
	color: var(--rdn-white);
	font-size: var(--rdn-fs-display);
	line-height: 1.32;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* The second tone of a hero title: the phrase that completes the promise, lighter and in sand. */
.rdn-hero__title-accent,
.rdn-hero__title-rest {
	display: block;
	margin-block-start: 0.2em;
	color: var(--rdn-sand);
	font-size: 0.74em;
	font-weight: 400;
	line-height: 1.45;
	text-wrap: balance;
}

.rdn-hero__lead {
	max-inline-size: 34rem;
	margin: 1.75rem 0 0;
	color: var(--rdn-on-navy);
	font-size: var(--rdn-fs-md);
	line-height: 2.05;
}

.rdn-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block-start: 2.5rem;
}

.rdn-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.rdn-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	min-block-size: 2.5rem;
	padding: 0.25rem 0.875rem;
	border: 1px solid rgb(255 255 255 / 0.18);
	color: var(--rdn-white);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	transition: border-color var(--rdn-fast) var(--rdn-ease), background-color var(--rdn-fast) var(--rdn-ease);
}

.rdn-chip:hover {
	border-color: var(--rdn-sand);
	background: rgb(255 255 255 / 0.04);
	color: var(--rdn-white);
}

.rdn-chip .rdn-icon {
	opacity: 0.6;
}

.rdn-chip__flag {
	inline-size: 1.5rem;
	block-size: auto;
	outline: 1px solid rgb(255 255 255 / 0.2);
}

.rdn-chip--light {
	border-color: var(--rdn-line);
	background: var(--rdn-white);
	color: var(--rdn-navy);
}

.rdn-chip--light:hover {
	border-color: var(--rdn-navy);
	background: var(--rdn-white);
	color: var(--rdn-navy);
}

.rdn-chip--light .rdn-chip__flag {
	outline-color: var(--rdn-line);
}

.rdn-hero__foot {
	position: relative;
	border-block-start: 1px solid rgb(218 192 163 / 0.12);
}

.rdn-hero__foot-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-block-size: 4rem;
	font-size: var(--rdn-fs-sm);
	line-height: 1.6;
}

.rdn-hero__licence {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
	color: var(--rdn-on-navy-muted);
}

.rdn-hero__licence .rdn-icon {
	flex: none;
	color: var(--rdn-royal);
}

/* The header strip shows the same line from 1100px up; the hero keeps only its controls there. */
@media (width >= 1100px) {
	.rdn-hero__licence--echo {
		visibility: hidden;
	}
}

.rdn-hero__scroll {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--rdn-sand);
	text-decoration: none;
}

.rdn-hero__scroll .rdn-icon {
	animation: rdn-nudge 2.4s var(--rdn-ease) 2;
}

@keyframes rdn-nudge {
	50% {
		transform: translateY(4px);
	}
}

.rdn-anchor {
	display: block;
	block-size: 0;
}

@media (width < 900px) {
	/* On a phone the map opens the screen, right under the header, and the words follow it. */
	.rdn-hero {
		grid-template-rows: auto auto auto;
		min-block-size: auto;
		padding-block-start: var(--rdn-header-h);
	}

	.rdn-hero::after {
		background: linear-gradient(to bottom, rgb(10 28 58 / 0.4), transparent 50%);
	}

	.rdn-hero__stage {
		position: relative;
		inset: auto;
		inline-size: 100%;
		z-index: 0;
		order: 0;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
		mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
	}

	.rdn-hero__content {
		max-inline-size: 38rem;
	}

	.rdn-hero__stage .rdn-route {
		block-size: auto;
		aspect-ratio: var(--rdn-map-ratio, 16 / 10);
	}

	.rdn-hero__inner {
		order: 1;
	}

	.rdn-hero__content {
		padding-block: 0.25rem 0;
	}

	.rdn-hero__foot {
		order: 3;
	}

	.rdn-hero__foot-inner {
		padding-block: 1rem;
	}

	.rdn-hero__scroll {
		display: none;
	}

	/* The map is small here: names are set larger so they stay readable, Tehran's steps down to
	   keep clear of its light, and only the destination of the current leg is named. */
	.rdn-route__label {
		font-size: 42px;
		stroke-width: 9px;
	}

	.rdn-route__label--origin {
		transform: translateY(14px);
	}

	.rdn-route.is-live .rdn-route__place:not(.is-target) :is(.rdn-route__label, .rdn-route__leader),
	.rdn-route:not(.is-live) .rdn-route__place:not([data-rdn-place="0"]) :is(.rdn-route__label, .rdn-route__leader) {
		opacity: 0;
	}
}

/* ------------------------------------------------------------------ Motion control and chips */

.rdn-hero__controls {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.rdn-motion-toggle {
	display: inline-flex;
	flex: none;
	align-items: center;
	white-space: nowrap;
	padding: 0.25rem 0.75rem;
	border: 1px solid rgb(218 192 163 / 0.3);
	background: transparent;
	color: var(--rdn-sand);
	font-size: var(--rdn-fs-xs);
	font-weight: 500;
	line-height: 1.8;
	cursor: pointer;
}

.rdn-motion-toggle:hover {
	border-color: var(--rdn-sand);
	color: var(--rdn-white);
}

.rdn-motion-toggle span {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.rdn-motion-toggle__play,
.rdn-motion-toggle[aria-pressed="true"] .rdn-motion-toggle__pause {
	display: none !important;
}

.rdn-motion-toggle[aria-pressed="true"] .rdn-motion-toggle__play {
	display: inline-flex !important;
}

.rdn-chip--featured {
	border-color: rgb(218 192 163 / 0.55);
	background: rgb(218 192 163 / 0.08);
	font-weight: 700;
}

.rdn-hero__motion {
	margin-block-start: 1rem;
}


@media (prefers-reduced-motion: reduce) {
	.rdn-route__nation--featured,
	.rdn-route__light,
	.rdn-route__origin-ring,
	.rdn-route__place.is-arrived .rdn-route__dest,
	.rdn-route__place.is-arrived .rdn-route__bloom {
		animation: none;
	}

	.rdn-route__drift {
		animation: none;
		transform: translateX(calc(var(--rdn-cloud-rest, 40%) + var(--rdn-cloud-w, 24%)));
	}

	.rdn-route__star,
	.rdn-route__compass-tick,
	.rdn-route__compass-mark {
		opacity: 1;
		animation: none;
	}

	.js .rdn-route:not(.is-ready) :is(.rdn-route__flyer, .rdn-route__trail) {
		opacity: 1;
		animation: none;
	}

	.rdn-route[data-rdn-sky] .rdn-route__city-glow {
		animation: none;
	}

	.rdn-fx-card,
	.rdn-fx-card.is-shown {
		transform: none;
		transition: none;
	}
}

/* On touch screens the destination chips and the motion switch are at least a fingertip tall. */
@media (pointer: coarse) {
	.rdn-chip,
	.rdn-motion-toggle {
		min-block-size: 2.75rem;
	}
}

/* ------------------------------------------------------------------ Home: the tour of the Union */

/*
 * Every destination alike, its capital a quiet light. The country the bird is over glows in gold
 * and dims after it; the capital it passes blooms and its country's name appears beside it.
 * Lengths given with --rdn-px are screen pixels (the script sets it to map units per pixel).
 */
.rdn-tour__glow {
	fill: rgb(184 138 68 / 0.3);
	stroke: var(--rdn-royal);
	stroke-width: 1.1;
	opacity: 0;
	pointer-events: none;
}

.rdn-tour__light {
	opacity: 0.5;
	animation: rdn-twinkle var(--rdn-tw, 5s) var(--rdn-ease-in-out) var(--rdn-tw-at, 0s) infinite alternate;
}

.rdn-tour__dot {
	fill: var(--rdn-sand);
	opacity: 0.75;
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 0.6s var(--rdn-ease), opacity 0.6s var(--rdn-ease);
}

.rdn-tour__capital.is-lit .rdn-tour__dot {
	opacity: 1;
	transform: scale(1.5);
}

.rdn-tour__bloom {
	fill: none;
	stroke: var(--rdn-sand);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

.rdn-tour__name {
	fill: var(--rdn-white);
	font-family: var(--rdn-font-body);
	font-weight: 500;
	direction: ltr;
	paint-order: stroke;
	stroke: rgb(10 28 58 / 0.85);
	stroke-width: calc(var(--rdn-px, 1px) * 3.5);
	stroke-linejoin: round;
	pointer-events: none;
}

.rdn-tour__trail {
	stroke-width: 1.6;
}

.rdn-tour__bird {
	pointer-events: none;
}

/* Without scripts, or until the tour has laid itself out, only the map and its lights show. */
.rdn-route--tour:not(.is-ready) :is(.rdn-tour__bird, .rdn-tour__trail, .rdn-tour__names) {
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.rdn-tour__light {
		animation: none;
	}

	.rdn-tour__dot {
		transition: none;
	}
}