/* ==========================================================================
   Transportpagina
   Zelfde huisstijl, eigen thema: een route met waypoints, gestippelde lijnen,
   documentkaarten en bestemmingen. Alles onder .stc-transport, dus geen andere
   pagina verandert. Selectors noemen article.article en section.intro waar het
   thema dat ook doet, anders verliezen ze het van de thema-CSS.
   ========================================================================== */

.stc-transport {
	--cap-navy: #00394d;
	--cap-teal: #00b7be;
	--cap-grey: #f1f2f4;
	--cap-support: #849ca6;
	--cap-line: rgba(0, 57, 77, 0.14);
}

.stc-transport .stc-label {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 var(--medium);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cap-teal);
}

.stc-transport .stc-label::before {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	background: currentColor;
}

.stc-transport .intro .intro-content :is(h1, .h1) {
	line-height: 1.04;
	letter-spacing: -0.015em;
}

@media (min-width: 993px) {
	.stc-transport .intro .intro-content :is(h1, .h1) {
		font-size: clamp(46px, 4.2vw, 70px);
	}
}

/* ---------- De route ---------- */

.stc-transport .trp-route {
	background: var(--cap-navy);
	color: #ffffff;
	border-radius: 30px;
	padding: var(--mediumlarge) var(--medium);
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 56px 56px;
}

.stc-transport .trp-route .stc-label {
	color: var(--cap-teal);
}

.stc-transport .trp-route__frame {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
}

.stc-transport .trp-route__svg {
	display: block;
	width: 100%;
	min-width: 1000px;
	height: auto;
}

.stc-transport .trp-route__svg text {
	font-family: inherit;
	fill: #ffffff;
}

.stc-transport .trp-lijn {
	fill: none;
	stroke: rgba(255, 255, 255, 0.35);
	stroke-width: 1.5;
}

.stc-transport .trp-lijn--actief {
	stroke: var(--cap-teal);
	stroke-width: 2;
	stroke-dasharray: 10 12;
}

@media (prefers-reduced-motion: no-preference) {
	.stc-transport .trp-lijn--actief {
		animation: trp-stroom 2.6s linear infinite;
	}
}

@keyframes trp-stroom {
	to {
		stroke-dashoffset: -44;
	}
}

.stc-transport .trp-vorm {
	fill: none;
	stroke: #ffffff;
	stroke-width: 2;
	stroke-linejoin: round;
}

.stc-transport .trp-detail {
	fill: none;
	stroke: rgba(255, 255, 255, 0.6);
	stroke-width: 1.25;
	stroke-linecap: round;
}

.stc-transport .trp-punt {
	fill: var(--cap-navy);
	stroke: var(--cap-teal);
	stroke-width: 2;
}

.stc-transport .trp-num {
	fill: var(--cap-teal);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.16em;
}

.stc-transport .trp-naam {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.06em;
}

.stc-transport .trp-onder {
	font-size: 13px;
	fill: rgba(255, 255, 255, 0.65);
}

.stc-transport .trp-route__foot {
	margin: var(--medium) 0 0;
	padding-top: var(--small);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.72);
	font-size: 15px;
}

/* ---------- Documenten ---------- */

.stc-transport .trp-docs__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--medium);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.stc-transport .trp-docs__lijst {
		grid-template-columns: repeat(3, 1fr);
	}
}

.stc-transport .trp-doc {
	padding-top: var(--small);
	border-top: 2px solid var(--cap-teal);
}

.stc-transport .trp-doc__code {
	display: block;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--cap-navy);
}

.stc-transport .trp-doc__wat {
	display: block;
	margin: 4px 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cap-support);
}

.stc-transport .trp-doc p {
	margin: 0;
	color: rgba(0, 57, 77, 0.72);
}

.stc-transport .trp-overig {
	margin: var(--medium) 0 0;
	padding-top: var(--small);
	border-top: 1px solid var(--cap-line);
	color: rgba(0, 57, 77, 0.7);
}

/* ---------- Vervoer en bestemmingen ---------- */

.stc-transport .trp-kolommen {
	display: grid;
	gap: var(--mediumlarge);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.stc-transport .trp-kolommen {
		grid-template-columns: 1fr 1fr;
	}
}

.stc-transport .trp-lijst {
	list-style: none;
	margin: 0;
	padding: 0;
}

.stc-transport .trp-lijst li {
	display: flex;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--cap-line);
	color: rgba(0, 57, 77, 0.8);
}

.stc-transport .trp-lijst li::before {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-top: 8px;
	border-radius: 50%;
	border: 2px solid var(--cap-teal);
}

.stc-transport .trp-lijst strong {
	color: var(--cap-navy);
}

@media (min-width: 768px) {
	.stc-transport .trp-lijst--2 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--mediumlarge);
	}
}

.stc-transport .trp-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.stc-transport .trp-tags li {
	padding: 9px 16px;
	border: 1px solid var(--cap-line);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cap-navy);
}

.stc-transport .trp-tags li[data-vaak="ja"] {
	background: var(--cap-navy);
	border-color: var(--cap-navy);
	color: #ffffff;
}

/* ---------- Routekaart ----------
   Emmeloord in de kern, routes naar buiten. Geen atlas met landsgrenzen maar
   een routekaart: de richtingen kloppen met het kompas, de afstanden zijn
   schematisch. De lijnen tekenen zichzelf en er loopt een zending overheen. */

.stc-transport .trp-kaart {
	background: var(--cap-navy);
	color: #ffffff;
	border-radius: 30px;
	padding: var(--mediumlarge) var(--medium);
}

.stc-transport .trp-kaart .stc-label {
	color: var(--cap-teal);
}

.stc-transport .trp-kaart__frame {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
}

.stc-transport .trp-kaart__svg {
	display: block;
	width: 100%;
	min-width: 640px;
	height: auto;
}

.stc-transport .trp-kaart__bol :is(circle, ellipse) {
	fill: none;
	stroke: rgba(255, 255, 255, 0.12);
	stroke-width: 1;
}

.stc-transport .trp-kaart__ringen circle {
	fill: none;
	stroke: rgba(255, 255, 255, 0.18);
	stroke-width: 1;
	stroke-dasharray: 3 7;
}

.stc-transport .trp-kaart__spoor {
	fill: none;
	stroke: rgba(255, 255, 255, 0.28);
	stroke-width: 1.5;
}

.stc-transport .trp-kaart__vlucht {
	fill: none;
	stroke: var(--cap-teal);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 26 1000;
	stroke-dashoffset: 26;
}

.stc-transport .trp-kaart__stip {
	fill: var(--cap-navy);
	stroke: var(--cap-teal);
	stroke-width: 2;
}

/* Nevenroutes: dezelfde beweging, maar dunner en zachter, zodat de vijf
   benoemde bestemmingen het beeld blijven dragen. */

.stc-transport .trp-kaart__nevenspoor {
	fill: none;
	stroke: rgba(255, 255, 255, 0.12);
	stroke-width: 1;
}

.stc-transport .trp-kaart__nevenvlucht {
	fill: none;
	stroke: var(--cap-teal);
	stroke-width: 1.25;
	stroke-linecap: round;
	stroke-dasharray: 18 1000;
	stroke-dashoffset: 18;
	opacity: 0;
}

.stc-transport .trp-kaart__nevenstip {
	fill: none;
	stroke: rgba(255, 255, 255, 0.4);
	stroke-width: 1.25;
}

.stc-transport .trp-kaart__puls {
	fill: none;
	stroke: var(--cap-teal);
	stroke-width: 1.5;
	opacity: 0;
}

.stc-transport .trp-kaart__naam {
	fill: #ffffff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.stc-transport .trp-kaart__kernstip {
	fill: var(--cap-teal);
}

.stc-transport .trp-kaart__kernpuls {
	fill: none;
	stroke: var(--cap-teal);
	stroke-width: 1.5;
	opacity: 0.6;
}

.stc-transport .trp-kaart__kernnaam {
	fill: var(--cap-teal);
	font-family: inherit;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.16em;
}

.stc-transport .trp-kaart__foot {
	margin: var(--medium) 0 0;
	padding-top: var(--small);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.72);
	font-size: 15px;
	max-width: 62ch;
}

@media (prefers-reduced-motion: no-preference) {
	.stc-transport .trp-kaart__vlucht {
		animation: trp-vlucht 5s ease-in-out infinite;
		animation-delay: var(--vertraging, 0s);
	}

	.stc-transport .trp-kaart__puls {
		animation: trp-aankomst 5s ease-out infinite;
		animation-delay: var(--vertraging, 0s);
	}

	.stc-transport .trp-kaart__kernpuls {
		animation: trp-kern 3.2s ease-out infinite;
	}

	.stc-transport .trp-kaart__nevenvlucht {
		animation: trp-nevenvlucht 9s ease-in-out infinite;
		animation-delay: var(--vertraging, 0s);
	}
}

/* Zonder animatie blijft de route gewoon zichtbaar staan. */
@media (prefers-reduced-motion: reduce) {
	.stc-transport .trp-kaart__vlucht {
		stroke-dasharray: none;
		stroke-dashoffset: 0;
		opacity: 0.5;
	}

	.stc-transport .trp-kaart__nevenvlucht {
		stroke-dasharray: none;
		stroke-dashoffset: 0;
		opacity: 0.28;
	}
}

@keyframes trp-vlucht {
	0% {
		stroke-dashoffset: 26;
		opacity: 0;
	}
	8% {
		opacity: 1;
	}
	70% {
		stroke-dashoffset: -560;
		opacity: 1;
	}
	78%,
	100% {
		stroke-dashoffset: -560;
		opacity: 0;
	}
}

@keyframes trp-nevenvlucht {
	0% {
		stroke-dashoffset: 18;
		opacity: 0;
	}
	6% {
		opacity: 0.45;
	}
	44% {
		stroke-dashoffset: -520;
		opacity: 0.45;
	}
	54%,
	100% {
		stroke-dashoffset: -520;
		opacity: 0;
	}
}

@keyframes trp-aankomst {
	0%,
	66% {
		r: 7;
		opacity: 0;
	}
	72% {
		opacity: 0.9;
	}
	88%,
	100% {
		r: 22;
		opacity: 0;
	}
}

@keyframes trp-kern {
	0% {
		r: 12;
		opacity: 0.6;
	}
	70%,
	100% {
		r: 30;
		opacity: 0;
	}
}

/* ---------- Atlas ----------
   Een echte wereldkaart in Robinson-projectie. De landen komen uit data, dus
   deze laag zegt alleen hoe ze eruitzien: basis, gebied, bestemming, thuis. */

.stc-transport .atlas {
	background: var(--cap-navy);
	color: #ffffff;
	border-radius: 30px;
	padding: var(--mediumlarge) var(--medium);
}

.stc-transport .atlas .stc-label {
	color: var(--cap-teal);
}

.stc-transport .atlas__frame {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
}

.stc-transport .atlas__svg {
	display: block;
	width: 100%;
	min-width: 860px;
	height: auto;
}

.stc-transport .atlas__net path {
	fill: none;
	stroke: rgba(255, 255, 255, 0.08);
	stroke-width: 0.7;
}

.stc-transport .atlas__vorm {
	fill: rgba(255, 255, 255, 0.055);
	stroke: rgba(255, 255, 255, 0.2);
	stroke-width: 0.5;
	stroke-linejoin: round;
}

/* Alle werelddelen dezelfde tint: de hele kaart licht gelijk op. De klassen
   per werelddeel blijven bestaan, mocht er ooit toch verschil in moeten. */
.stc-transport .atlas__vorm--wd-eu,
.stc-transport .atlas__vorm--wd-az,
.stc-transport .atlas__vorm--wd-af,
.stc-transport .atlas__vorm--wd-na,
.stc-transport .atlas__vorm--wd-za,
.stc-transport .atlas__vorm--wd-oc,
.stc-transport .atlas__vorm--gebied {
	fill: rgba(0, 183, 190, 0.44);
	stroke: rgba(0, 183, 190, 0.7);
}

/* Bereiklijnen: dun en zacht, zodat de benoemde routes het beeld blijven
   dragen. */
.stc-transport .atlas__nevenspoor {
	fill: none;
	stroke: rgba(255, 255, 255, 0.16);
	stroke-width: 0.8;
}

.stc-transport .atlas__nevenvlucht {
	fill: none;
	stroke: var(--cap-teal);
	stroke-width: 1.1;
	stroke-linecap: round;
	stroke-dasharray: 7 100;
	stroke-dashoffset: 7;
	opacity: 0;
}

.stc-transport .atlas__nevenstip {
	fill: none;
	stroke: rgba(255, 255, 255, 0.45);
	stroke-width: 1;
}

.stc-transport .atlas__vorm--doel {
	fill: rgba(0, 183, 190, 0.55);
	stroke: rgba(0, 183, 190, 0.9);
}

.stc-transport .atlas__vorm--thuis {
	fill: var(--cap-teal);
	stroke: #ffffff;
	stroke-width: 0.8;
}

.stc-transport .atlas__spoor {
	fill: none;
	stroke: rgba(255, 255, 255, 0.42);
	stroke-width: 1;
	stroke-dasharray: 1.4 2.6;
}

.stc-transport .atlas__vlucht {
	fill: none;
	stroke: var(--cap-teal);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-dasharray: 9 100;
	stroke-dashoffset: 9;
}

.stc-transport .atlas__puls {
	fill: none;
	stroke: var(--cap-teal);
	stroke-width: 1.2;
	opacity: 0;
}

.stc-transport .atlas__stip {
	fill: var(--cap-navy);
	stroke: var(--cap-teal);
	stroke-width: 1.6;
}

/* De halo houdt de namen leesbaar waar ze over land lopen. */
.stc-transport .atlas__naam {
	fill: #ffffff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.01em;
	stroke: rgba(0, 57, 77, 0.85);
	stroke-width: 3px;
	stroke-linejoin: round;
	paint-order: stroke fill;
}

.stc-transport .atlas__merk--land .atlas__naam {
	font-size: 12px;
	fill: rgba(255, 255, 255, 0.88);
}

.stc-transport .atlas__kernstip {
	fill: var(--cap-teal);
	stroke: #ffffff;
	stroke-width: 1.5;
}

.stc-transport .atlas__kernpuls {
	fill: none;
	stroke: var(--cap-teal);
	stroke-width: 1.4;
	opacity: 0.6;
}

.stc-transport .atlas__kernnaam {
	fill: var(--cap-teal);
	font-family: inherit;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.16em;
	stroke: rgba(0, 57, 77, 0.85);
	stroke-width: 3px;
	stroke-linejoin: round;
	paint-order: stroke fill;
}

.stc-transport .atlas__legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: var(--medium) 0 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.8);
}

.stc-transport .atlas__legenda li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.stc-transport .atlas__vlak {
	width: 14px;
	height: 14px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.stc-transport .atlas__vlak--gebied {
	background: rgba(0, 183, 190, 0.28);
	border-color: rgba(0, 183, 190, 0.55);
}

.stc-transport .atlas__vlak--doel {
	background: rgba(0, 183, 190, 0.6);
	border-color: var(--cap-teal);
}

.stc-transport .atlas__vlak--thuis {
	background: var(--cap-teal);
	border-color: #ffffff;
}

.stc-transport .atlas__foot {
	margin: var(--small) 0 0;
	color: rgba(255, 255, 255, 0.78);
	font-size: 15px;
	max-width: 70ch;
}

.stc-transport .atlas__foot--noot {
	margin-top: 10px;
	padding-top: var(--small);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.62);
}

/* Op een telefoon past de kaart wel, de namen niet: die staan dan onder de
   kaart als tekst in plaats van in een zijwaartse schuifbalk. */
@media (max-width: 700px) {
	.stc-transport .atlas__svg {
		min-width: 0;
	}

	.stc-transport .atlas__naam,
	.stc-transport .atlas__kernnaam {
		display: none;
	}

	.stc-transport .atlas__stip {
		stroke-width: 3;
	}

	.stc-transport .atlas__kernstip {
		stroke-width: 3;
	}

	.stc-transport .atlas__vlucht {
		stroke-width: 3;
	}

	.stc-transport .atlas__spoor {
		stroke-width: 2;
	}

	.stc-transport .atlas__foot {
		font-size: 16px;
		color: #ffffff;
	}

	.stc-transport .atlas__foot--noot {
		font-size: 15px;
		color: rgba(255, 255, 255, 0.62);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.stc-transport .atlas__vlucht {
		animation: atlas-vlucht 6s ease-in-out infinite;
		animation-delay: var(--vertraging, 0s);
	}

	.stc-transport .atlas__puls {
		animation: atlas-aankomst 6s ease-out infinite;
		animation-delay: var(--vertraging, 0s);
	}

	.stc-transport .atlas__kernpuls {
		animation: trp-kern 3.2s ease-out infinite;
	}

	.stc-transport .atlas__nevenvlucht {
		animation: atlas-nevenvlucht 11s ease-in-out infinite;
		animation-delay: var(--vertraging, 0s);
	}
}

@media (prefers-reduced-motion: reduce) {
	.stc-transport .atlas__vlucht {
		stroke-dasharray: none;
		stroke-dashoffset: 0;
		opacity: 0.55;
	}

	.stc-transport .atlas__nevenvlucht {
		stroke-dasharray: none;
		stroke-dashoffset: 0;
		opacity: 0.3;
	}
}

@keyframes atlas-nevenvlucht {
	0% {
		stroke-dashoffset: 7;
		opacity: 0;
	}
	5% {
		opacity: 0.5;
	}
	42% {
		stroke-dashoffset: -100;
		opacity: 0.5;
	}
	50%,
	100% {
		stroke-dashoffset: -100;
		opacity: 0;
	}
}

@keyframes atlas-vlucht {
	0% {
		stroke-dashoffset: 9;
		opacity: 0;
	}
	6% {
		opacity: 1;
	}
	62% {
		stroke-dashoffset: -100;
		opacity: 1;
	}
	70%,
	100% {
		stroke-dashoffset: -100;
		opacity: 0;
	}
}

@keyframes atlas-aankomst {
	0%,
	58% {
		r: 5;
		opacity: 0;
	}
	64% {
		opacity: 0.9;
	}
	82%,
	100% {
		r: 18;
		opacity: 0;
	}
}

/* ---------- Video ---------- */

.stc-transport .trp-video {
	position: relative;
	border-radius: 30px;
	overflow: hidden;
	background: var(--cap-navy);
}

.stc-transport .trp-video video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.stc-transport .trp-video__knop {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	border: 0;
	padding: 0;
	background: linear-gradient(195deg, rgba(0, 57, 77, 0) 40%, rgba(0, 57, 77, 0.75) 100%);
	color: #ffffff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.stc-transport .trp-video__knop span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--cap-teal);
}

.stc-transport .trp-video.is-actief .trp-video__knop {
	display: none;
}

/* ---------- Mobiel ---------- */

@media (max-width: 992px) {
	.stc-transport article.article {
		margin: var(--mediumlarge) 0;
	}

	.stc-transport article.article .article-image {
		aspect-ratio: 4 / 3;
	}

	.stc-transport section.intro .intro-image {
		padding-bottom: 78%;
	}

	.stc-transport .trp-route,
	.stc-transport .atlas {
		padding: var(--medium) var(--smallmedium);
	}

	.stc-transport .atlas__legenda {
		gap: 8px 18px;
		font-size: 13px;
	}
}