/**
 * Global candle map. Dark "night sky" panel with warm amber glows.
 */

.sp-candle-map {
	--sp-accent-2: var(--accent-2, #CDAA8C);
	--sp-serif: var(--gp-font--cormorant-garamond, "Cormorant Garamond", Georgia, serif);
	--sp-sans: var(--gp-font--source-sans-3, "Source Sans 3", system-ui, sans-serif);
	--sp-map-bg: #14131a;
	--sp-map-land: #2b2833;
	--sp-map-land-stroke: #3a3542;
	--sp-flame: #f6c667;
	--sp-glow: #e2a24a;
	max-width: 1100px;
	margin: 0 auto;
	font-family: var(--sp-sans);
}

.sp-candle-map__header {
	text-align: center;
	margin-bottom: 1.25rem;
}

.sp-candle-map__tagline {
	margin-bottom: 1rem;
}

.sp-candle-map__title {
	font-family: var(--sp-serif);
	margin: 0 0 0.25rem;
}

.sp-candle-map__subtitle {
	margin: 0.25rem 0 0;
	opacity: 0.75;
}

.sp-candle-map__canvas {
	position: relative;
	background: var(--sp-map-bg);
	background-image: radial-gradient( circle at 50% 40%, #1d1b26 0%, #14131a 70% );
	border-radius: 10px;
	padding: 1rem;
	min-height: 180px;
	overflow: hidden;
}

.sp-candle-map__svg {
	display: block;
	width: 100%;
	height: auto;
	cursor: grab;
	touch-action: none; /* let the map own drag gestures instead of scrolling the page */
}

.sp-candle-map__svg.is-grabbing {
	cursor: grabbing;
}

/* Zoom controls */
.sp-candle-map__controls {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	z-index: 2;
}

.sp-candle-map__zoom {
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	line-height: 1;
	color: #f4e9d8;
	background: rgba( 30, 27, 38, 0.72 );
	border: 1px solid rgba( 244, 233, 216, 0.28 );
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
	-webkit-backdrop-filter: blur( 2px );
	backdrop-filter: blur( 2px );
}

.sp-candle-map__zoom:hover,
.sp-candle-map__zoom:focus-visible {
	background: rgba( 226, 162, 74, 0.85 );
	border-color: rgba( 246, 198, 103, 0.9 );
	color: #1b1712;
	outline: none;
}

/* Countries from the loaded world map, skinned dark to match the panel. */
.sp-worldmap path {
	fill: var(--sp-map-land);
	stroke: var(--sp-map-land-stroke);
	stroke-width: 0.4;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.sp-candle-map__glow {
	fill: var(--sp-glow);
	opacity: 0.55;
}

.sp-candle-map__flame {
	fill: var(--sp-flame);
}

/* Flicker: gentle, staggered per marker via inline animation-delay */
@keyframes sp-candle-flicker {
	0%, 100% { opacity: 0.55; transform: scale(1); }
	45% { opacity: 0.85; transform: scale(1.12); }
	70% { opacity: 0.4; transform: scale(0.95); }
}

.sp-candle-map__marker .sp-candle-map__glow {
	transform-box: fill-box;
	transform-origin: center;
	animation: sp-candle-flicker 3.2s ease-in-out infinite;
}

/* Your candle: brighter gold, a slow breathing pulse and a halo ring. */
.sp-candle-map__marker--mine .sp-candle-map__glow {
	fill: var(--sp-flame);
	opacity: 0.85;
	animation: sp-candle-breathe 3.8s ease-in-out infinite;
}

.sp-candle-map__marker--mine .sp-candle-map__flame {
	fill: #fff4d6;
}

.sp-candle-map__halo {
	fill: none;
	stroke: var(--sp-flame);
	stroke-width: 1.2;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation: sp-candle-halo 3.8s ease-in-out infinite;
}

@keyframes sp-candle-breathe {
	0%, 100% { opacity: 0.7; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.28); }
}

@keyframes sp-candle-halo {
	0% { opacity: 0.5; transform: scale(0.6); }
	70% { opacity: 0; transform: scale(1.9); }
	100% { opacity: 0; transform: scale(1.9); }
}

/* Recently lit by anyone (last 24h): a one-off ignite and a warmer glow. */
.sp-candle-map__marker--fresh .sp-candle-map__glow {
	fill: #f2b45c;
	animation: sp-candle-ignite 1s ease-out 1, sp-candle-flicker 3.2s ease-in-out infinite 1s;
}

@keyframes sp-candle-ignite {
	0% { opacity: 0; transform: scale(0.2); }
	60% { opacity: 1; transform: scale(1.5); }
	100% { opacity: 0.7; transform: scale(1); }
}

/* Temporary emphasis when "See my candle" is pressed. */
.sp-candle-map__marker.is-focus .sp-candle-map__halo {
	animation: sp-candle-focus 0.9s ease-out 3;
	opacity: 0.6;
}

@keyframes sp-candle-focus {
	0% { opacity: 0.7; transform: scale(0.5); }
	100% { opacity: 0; transform: scale(2.6); }
}

.sp-candle-map__caption {
	text-align: center;
	color: var(--sp-accent-2);
	margin: 1rem 0 0;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
}

.sp-candle-map__loading,
.sp-candle-map__error {
	text-align: center;
	color: #cfc9d6;
	opacity: 0.7;
	padding: 3rem 1rem;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.sp-candle-map__marker .sp-candle-map__glow,
	.sp-candle-map__marker--mine .sp-candle-map__glow,
	.sp-candle-map__marker--fresh .sp-candle-map__glow,
	.sp-candle-map__halo {
		animation: none;
	}
	/* Keep "mine" visually distinct without motion. */
	.sp-candle-map__marker--mine .sp-candle-map__glow {
		opacity: 1;
	}
	.sp-candle-map__halo {
		opacity: 0.5;
	}
}

@media (max-width: 768px) {
	.sp-candle-map__canvas {
		padding: 0.5rem;
	}
}