.is-globe-thumbnail {
	display: none;
}

@media (min-width: 1024px) {
	.is-globe-thumbnail {
		position: absolute;
		top: 74px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 5;
		display: block;
		width: 180px;
		height: 180px;
		background: transparent;
		border-radius: 50%;
		overflow: hidden;
		pointer-events: auto;
		contain: layout paint size;
	}

	.is-globe-canvas,
	.is-globe-fallback {
		position: absolute;
		inset: 0;
		width: 180px;
		height: 180px;
		border-radius: 50%;
	}

	.is-globe-canvas {
		z-index: 2;
		display: block;
		opacity: 0;
		cursor: grab;
		transition: opacity 420ms ease;
	}

	.is-globe-canvas:active {
		cursor: grabbing;
	}

	.is-globe-fallback {
		z-index: 1;
		display: none;
		background-position: center;
		background-size: cover;
		box-shadow:
			inset -24px -22px 42px rgba(0, 0, 0, 0.46),
			inset 18px 14px 34px rgba(255, 255, 255, 0.16),
			0 18px 50px rgba(0, 183, 255, 0.16);
	}

	.is-globe-loading {
		position: absolute;
		left: 24px;
		right: 24px;
		bottom: 20px;
		z-index: 4;
		display: grid;
		gap: 7px;
		color: rgba(255, 255, 255, 0.94);
		font-size: 10px;
		font-weight: 850;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
		transition: opacity 320ms ease, transform 320ms ease, visibility 320ms ease;
	}

	.is-globe-loading-text {
		text-align: center;
	}

	.is-globe-progress {
		height: 4px;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.18);
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
		overflow: hidden;
	}

	.is-globe-progress span {
		display: block;
		width: 0%;
		height: 100%;
		border-radius: inherit;
		background: linear-gradient(90deg, #ffc734, #38d9ff);
		box-shadow: 0 0 14px rgba(56, 217, 255, 0.72);
		transition: width 180ms ease;
	}

	.is-globe-thumbnail.is-globe-ready .is-globe-canvas {
		opacity: 1;
	}

	.is-globe-thumbnail.is-globe-ready .is-globe-loading,
	.is-globe-thumbnail.is-globe-failed .is-globe-loading {
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
	}

	.is-globe-thumbnail.is-globe-failed .is-globe-fallback {
		display: block;
	}

	.is-globe-thumbnail.is-globe-failed::before {
		position: absolute;
		inset: 0;
		z-index: 2;
		content: "";
		border-radius: 50%;
		background:
			radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.56), transparent 9%),
			radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.22), transparent 26%),
			radial-gradient(circle at 68% 70%, rgba(0, 31, 82, 0.48), transparent 48%);
		pointer-events: none;
	}
}