/* Rotating Earth Globe — pure CSS, no JS required */

/* Full-width background layer behind the globe (rectangular, spans the
 * whole container width). Gradient is set via plugin controls. */
.reg-outer {
	width: 100%;
	line-height: 0;
}

.reg-wrap {
	position: relative;
	margin: 0 auto;
	max-width: var(--reg-max-w, 1200px);
	width: 100%;
	overflow: hidden;
	line-height: 0;
}

/* Full circle */
.reg-globe {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--reg-ocean, transparent);
	transform: translateZ(0); /* Safari: keep border-radius clipping during animation */
}

/* Half-earth mode: show only the top hemisphere (like a rising globe) */
.reg-wrap.reg-half {
	aspect-ratio: 2 / 1;
}
.reg-wrap.reg-half .reg-globe {
	position: absolute;
	top: 0;
	left: 0;
}

/* Scrolling layers container.
 * Holds the land layer and (optional) country-borders layer; animating the
 * track moves both in perfect sync. Track holds 2 seamless map tiles;
 * animating to -50% loops perfectly. Tile width defaults to 200% of the
 * globe diameter (true 2:1 equirectangular proportions).
 */
.reg-track {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: calc(var(--reg-tile, 200%) * 2);
	animation: reg-spin var(--reg-speed, 60s) linear infinite;
	will-change: transform;
}

.reg-layer {
	position: absolute;
	inset: 0;
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	/* Vertical inset: the map spans pole-to-pole, so without it the circle's
	 * curved top edge slices through Greenland/the Arctic. Shrink the map
	 * slightly and anchor it to the bottom so land clears the top arc. */
	-webkit-mask-size: 50% calc(100% - var(--reg-inset, 8%));
	mask-size: 50% calc(100% - var(--reg-inset, 8%));
	-webkit-mask-position: 0 100%;
	mask-position: 0 100%;
}

.reg-layer-land {
	background: var(--reg-land, #E8F5E4);
	-webkit-mask-image: var(--reg-map, url(../img/world-map.svg));
	mask-image: var(--reg-map, url(../img/world-map.svg));
}

/* Country borders overlay — off by default, enabled via .reg-borders-on */
.reg-layer-borders {
	display: none;
	background: var(--reg-border-color, rgba(11, 61, 98, 0.55));
	-webkit-mask-image: url(../img/world-borders.svg);
	mask-image: url(../img/world-borders.svg);
}

.reg-borders-on .reg-layer-borders {
	display: block;
}

/* Right-to-left drift = eastward spin, like the real Earth */
@keyframes reg-spin {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

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

/* ---------- Realistic 3D style ---------- */

.reg-shade { display: none; }

.reg-3d .reg-globe {
	/* Earth-from-space ocean generated from ONE settable base color
	 * (--reg-ocean-3d): sunlit upper-left, deep shade toward the limb.
	 * Default matches the site's brand blue. */
	background: radial-gradient(circle at 30% 25%,
		color-mix(in srgb, var(--reg-ocean-3d, #1B9BE8) 30%, #FFFFFF) 0%,
		color-mix(in srgb, var(--reg-ocean-3d, #1B9BE8) 65%, #FFFFFF) 30%,
		var(--reg-ocean-3d, #1B9BE8) 58%,
		color-mix(in srgb, var(--reg-ocean-3d, #1B9BE8) 72%, #06294D) 80%,
		color-mix(in srgb, var(--reg-ocean-3d, #1B9BE8) 42%, #041B33) 100%);
	/* Atmosphere glow + grounded drop shadow (toggle via Earth Shadow control) */
	box-shadow:
		0 0 60px rgba(90, 170, 240, 0.50),
		0 0 120px rgba(60, 130, 210, 0.25),
		0 35px 70px -20px rgba(10, 60, 120, 0.50);
}

.reg-noshadow .reg-globe {
	box-shadow: none !important;
}

/* Shading overlay above the land layer: sun highlight, darkened limb,
 * and a thin bright atmosphere ring hugging the edge — this sells the
 * "view from space" depth. */
.reg-3d .reg-shade {
	display: block;
	position: absolute;
	inset: 0;
	border-radius: 50%;
	pointer-events: none;
	z-index: 2;
	background:
		radial-gradient(circle at 30% 26%,
			rgba(255, 255, 255, 0.45) 0%,
			rgba(255, 255, 255, 0) 40%),
		radial-gradient(circle at 50% 50%,
			rgba(0, 0, 0, 0) 90%,
			rgba(170, 225, 255, 0.45) 97%,
			rgba(190, 235, 255, 0.18) 100%),
		radial-gradient(circle at 50% 50%,
			rgba(0, 0, 0, 0) 60%,
			rgba(6, 36, 72, 0.28) 82%,
			rgba(2, 20, 45, 0.62) 100%);
}

/* ---------- Custom video mode ---------- */

.reg-video {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}