/*
  Panama Map Animation Block (front-end + editor)
  - Base image: assets/map-1.png (transparent background)
  - Overlays: SVG circle + routes

  The styles are scoped to the block to avoid affecting the theme.
*/

.panama-map-block{
	/* keep neutral, theme decides margins */
}

.panama-map-block .panama-map-wrap{
	position: relative;
	display: inline-block;
	line-height: 0; /* avoid whitespace gaps */
	width: 100%;
	max-width: 100%;
}

.panama-map-block .map-img{
	display: block;
	width: 100%;
	height: auto;
	user-select: none;
	-webkit-user-drag: none;
	position: relative;
	z-index: 2;
}

.panama-map-block .underlay,
.panama-map-block .overlay{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.panama-map-block .underlay{ z-index: 1; }
.panama-map-block .overlay{ z-index: 3; }

/* ------- Animation defaults (before play) ------- */
.panama-map-block .panama-fill{
	opacity: 0;
	transform: scale(0.15);
	transform-origin: center;
	transform-box: fill-box;
}

.panama-map-block .panama-stroke{
	opacity: 0;
	stroke-linecap: round;
}

.panama-map-block .route{
	fill: none;
	stroke-width: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0;
}

/* ------- Play state (front-end) ------- */
.panama-map-block .panama-map-wrap.play .panama-fill{
	animation: pm-panamaPop 850ms cubic-bezier(.2,.9,.2,1) forwards;
}

.panama-map-block .panama-map-wrap.play .panama-stroke{
	opacity: 1;
	animation: pm-circleDraw 900ms ease forwards;
	animation-delay: 250ms;
}

.panama-map-block .route.draw{
	opacity: 1;
	animation: pm-routeDraw 1900ms ease forwards;
}

@keyframes pm-panamaPop{
	0%   { opacity: 0; transform: scale(0.10); }
	60%  { opacity: 1; transform: scale(1.05); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes pm-circleDraw{
	0%   { stroke-dashoffset: var(--len); }
	100% { stroke-dashoffset: 0; }
}

@keyframes pm-routeDraw{
	0%   { stroke-dashoffset: var(--len); opacity: 0; }
	12%  { opacity: 1; }
	100% { stroke-dashoffset: 0; opacity: 1; }
}

/* Accessibility: reduced motion shows the final state immediately */
@media (prefers-reduced-motion: reduce){
	.panama-map-block .panama-map-wrap.play .panama-fill,
	.panama-map-block .panama-map-wrap.play .panama-stroke,
	.panama-map-block .panama-map-wrap.play .route{
		animation: none !important;
		transition: none !important;
	}
}