/* ── Mapa section ── */
.block-mapa {
	position: relative;
	z-index: 1;
	background: transparent;
	isolation: isolate;
	overflow: hidden;
	margin-top: 10vh;
	--mapa-fade-h: 68vh;
	-webkit-mask-image: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.12) calc(var(--mapa-fade-h) * 0.22),
		rgba(255, 255, 255, 0.48) calc(var(--mapa-fade-h) * 0.56),
		rgba(255, 255, 255, 0.82) calc(var(--mapa-fade-h) * 0.82),
		#fff var(--mapa-fade-h),
		#fff 100%
	);
	mask-image: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.12) calc(var(--mapa-fade-h) * 0.22),
		rgba(255, 255, 255, 0.48) calc(var(--mapa-fade-h) * 0.56),
		rgba(255, 255, 255, 0.82) calc(var(--mapa-fade-h) * 0.82),
		#fff var(--mapa-fade-h),
		#fff 100%
	);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.block-mapa__viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Desktop: stałe okno 100vh — zoom tylko szerokością mapy w środku */
@media (min-width: 768px) {
	.block-mapa__viewport {
		height: 100vh;
		min-height: 100vh;
		height: 100dvh;
		min-height: 100dvh;
	}
}

/* Zoom GSAP: width 700% → 100%; wyśrodkowanie w poziomie jak na mobile. */
.block-mapa__zoom {
	position: relative;
	width: 100%;
	max-width: none;
	flex-shrink: 0;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	transform-origin: center bottom;
	will-change: width;
}

/* ── Inlined SVG ── */
.block-mapa__svg-wrap {
	position: relative;
	width: 100%;
	line-height: 0;
}

.block-mapa__svg-wrap svg {
	display: block;
	width: 100%;
	height: auto;
}

.block-mapa__svg-img {
	display: block;
	width: 100%;
	height: auto;
}

/* ── Route paths: dashed animated lines ── */
.block-mapa__svg-wrap .trasa {
	fill: none;
	stroke: rgba(255, 255, 255, 0.5);
	stroke-width: 2;
	stroke-dasharray: 8 6;
	stroke-linecap: round;
	animation: mapa-dash 1.2s linear infinite;
}

.block-mapa__svg-wrap .trasa-statku {
	fill: none;
	stroke: var(--color);
	stroke-width: 3;
	stroke-dasharray: 8 6;
	stroke-linecap: round;
	animation: mapa-dash 1.2s linear infinite;
}

@keyframes mapa-dash {
	to {
		stroke-dashoffset: -28;
	}
}

/* ── Mini ship on route ── */
.block-mapa__ship {
	position: absolute;
	width: 20px;
	height: auto;
	pointer-events: none;
	z-index: 5;
	opacity: 0;
	transform-origin: center center;
}

/* ── Responsive ── */
@media (max-width: 767px) {
	.block-mapa {
		--mapa-fade-h: 74vh;
		--mapa-mobile-offset-y: 100%;
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* Mobilnie wysokość viewportu jest sterowana animacją, żeby sekcja zwężała się razem z mapą. */
	.block-mapa__viewport {
		height: auto;
		min-height: 0;
		align-items: flex-end;
		justify-content: center;
		padding-bottom: 0;
	}

	.block-mapa__zoom {
		position: absolute;
		left: 50%;
		bottom: 0;
		width: 100%;
		margin: 0;
		transform: translateX(-50%) translateY(var(--mapa-mobile-offset-y));
		transform-origin: center bottom;
	}

	.block-mapa__svg-wrap,
	.block-mapa__svg-img {
		width: 100%;
	}

	.block-mapa__ship {
		width: 10px;
	}
}