/* ==========================================================================
   VigiUrba Earth — réseau orbital
   ========================================================================== */

.vu-earth {
	--vu-viewport: 100vh;
	--vu-scroll: 200vh;
	--vu-void: #04070e;
	--vu-instrument: #4ea3ff;
	--vu-capture: #ffb347;
	--vu-ink: #ffffff;

	position: relative;
	width: 100%;
	height: var(--vu-viewport);
	margin: 0;
	background: var(--vu-void);
	color: var(--vu-ink);
	z-index: 0;
}

/* Le bloc occupe toute la distance de défilement ; seul .vu-earth__pin est figé. */
.vu-earth--sticky {
	height: var(--vu-scroll);
}

.vu-earth__pin {
	position: relative;
	width: 100%;
	height: var(--vu-viewport);
	overflow: hidden;
	background: var(--vu-void);
	isolation: isolate;
}

.vu-earth--sticky .vu-earth__pin {
	position: sticky;
	top: 0;
}

.vu-earth__canvas {
	position: absolute;
	inset: 0;
	/* Le rendu 3D reste invisible jusqu'à la première image complète.
	   Ainsi, aucune sphère bleue ou texture incomplète ne peut apparaître. */
	opacity: 0;
	transition: opacity 0.18s ease;
}

.vu-earth.is-ready .vu-earth__canvas,
.vu-earth.is-fallback .vu-earth__canvas {
	opacity: 1;
}

.vu-earth__canvas canvas {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

/* --------------------------------------------------------------------------
   Titre
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Titre + logo
   -------------------------------------------------------------------------- */

.vu-earth__title {
	/* Taille commune au H2 et au logo */
	--vu-title-size: clamp(28px, 4.4vw, 58px);

	position: absolute;
	left: clamp(20px, 5vw, 64px);
	bottom: clamp(28px, 7vh, 72px);
	z-index: 3;
	max-width: 26ch;
	pointer-events: none;

	/* Logo + titre + sous-titre se déplacent ensemble */
	will-change: transform;
}


/* Pendant le déplacement vers le centre */
.vu-earth__title.is-travelling {
	text-align: center;
}


/* --------------------------------------------------------------------------
   Logo SVG
   -------------------------------------------------------------------------- */

.vu-earth__logo {
	display: inline-block;

	/* Même hauteur que la taille du H2 */
	height: var(--vu-title-size);
	width: auto;
	max-width: 100%;

	/* Espace entre le logo et le H2 */
	margin: 0 0 12px 0;

	/* Par defaut, un SVG sombre est rendu blanc sur le fond spatial.
	   Pour conserver les couleurs du SVG : --vu-logo-filter: none; */
	filter: var(--vu-logo-filter, brightness(0) invert(1));

	pointer-events: none;
	user-select: none;

	/* Même animation d'entrée */
	animation: vu-earth-enter 1.1s cubic-bezier(.22,.61,.36,1) both;
}


/* --------------------------------------------------------------------------
   Animation d'entrée
   -------------------------------------------------------------------------- */

.vu-earth__title h2,
.vu-earth__title p {
	animation: vu-earth-enter 1.1s cubic-bezier(.22,.61,.36,1) both;
}

.vu-earth__title p {
	animation-delay: 0.12s;
}

@keyframes vu-earth-enter {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}


/* --------------------------------------------------------------------------
   H2
   -------------------------------------------------------------------------- */

.vu-earth__title h2 {
	margin: 0;

	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, Helvetica, Arial, sans-serif;

	/* Même taille que le logo */
	font-size: var(--vu-title-size);

	font-weight: 300;
	line-height: 1.04;
	letter-spacing: -0.022em;

	color: var(--vu-ink);
	text-wrap: balance;
}


/* --------------------------------------------------------------------------
   Sous-titre
   -------------------------------------------------------------------------- */

.vu-earth__title p {
	margin: 0.7em 0 0;

	font-family: inherit;
	font-size: clamp(13px, 1.15vw, 16px);
	font-weight: 400;
	line-height: 1.5;

	color: rgba(255, 255, 255, 0.58);
}
/* --------------------------------------------------------------------------
   Relevé de mission
   -------------------------------------------------------------------------- */

.vu-earth__hud {
	position: absolute;
	right: clamp(20px, 5vw, 64px);
	top: clamp(24px, 6vh, 60px);
	z-index: 3;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1.4s ease;
}

.vu-earth.is-ready .vu-earth__hud {
	opacity: 1;
}

.vu-earth__readout {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-right: 14px;
	border-right: 1px solid rgba(78, 163, 255, 0.35);
	text-align: right;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
}

.vu-earth__coord {
	color: rgba(255, 255, 255, 0.72);
}

.vu-earth__count {
	color: var(--vu-capture);
}


/* --------------------------------------------------------------------------
   État d’attente pendant le téléchargement de Three.js et le calcul des cartes.
   Le fond spatial peut apparaître immédiatement, mais jamais une Terre incomplète.
   -------------------------------------------------------------------------- */

.vu-earth:not(.is-ready):not(.has-error) .vu-earth__pin {
	background:
		radial-gradient(1px 1px at 18% 22%, rgba(255,255,255,.45) 50%, transparent 50%),
		radial-gradient(1px 1px at 74% 16%, rgba(255,255,255,.34) 50%, transparent 50%),
		radial-gradient(1px 1px at 86% 62%, rgba(255,255,255,.38) 50%, transparent 50%),
		radial-gradient(1px 1px at 32% 78%, rgba(255,255,255,.28) 50%, transparent 50%),
		var(--vu-void);
}

/* --------------------------------------------------------------------------
   État de chargement / erreur
   -------------------------------------------------------------------------- */

.vu-earth__status {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: transparent;
	text-align: center;
	transition: opacity 0.28s ease;
}

.vu-earth__status span {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 11px;
	line-height: 1.6;
	letter-spacing: 0.18em;
	color: rgba(255, 255, 255, 0.42);
	animation: vu-earth-pulse 2.4s ease-in-out infinite;
}

.vu-earth.is-ready .vu-earth__status {
	opacity: 0;
	pointer-events: none;
}

.vu-earth.has-error .vu-earth__status span {
	max-width: 46ch;
	letter-spacing: 0.02em;
	color: rgba(255, 179, 71, 0.9);
	animation: none;
}

@keyframes vu-earth-pulse {
	0%, 100% { opacity: 0.45; }
	50%      { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Pleine largeur réelle.
   Les thèmes de blocs posent un espacement racine à gauche et à droite, plus
   un écart vertical entre blocs frères. Le bloc sort de cette grille pour
   occuper toute la fenêtre. La largeur vient d'une variable mesurée en
   JavaScript : 100vw inclut la barre de défilement et provoquerait un
   débordement horizontal.
   -------------------------------------------------------------------------- */

.vu-earth--full {
	width: var(--vu-vw, 100vw);
	max-width: var(--vu-vw, 100vw);
	margin-left: calc(50% - var(--vu-vw, 100vw) / 2);
	margin-right: calc(50% - var(--vu-vw, 100vw) / 2);
	margin-block: 0;
}

/* --------------------------------------------------------------------------
   Repli sans accélération matérielle.
   Certaines machines n'ont pas de carte graphique : le navigateur dessinerait
   alors chaque image au processeur, à plusieurs secondes l'unité. On montre
   un globe en dégradé plutôt qu'une animation qui bloque la page.
   -------------------------------------------------------------------------- */

.vu-earth.is-fallback .vu-earth__pin {
	background:
		radial-gradient(1px 1px at 18% 22%, rgba(255,255,255,.55), transparent),
		radial-gradient(1px 1px at 74% 16%, rgba(255,255,255,.42), transparent),
		radial-gradient(1px 1px at 42% 78%, rgba(255,255,255,.38), transparent),
		radial-gradient(1px 1px at 88% 62%, rgba(255,255,255,.30), transparent),
		var(--vu-void);
}

.vu-earth.is-fallback .vu-earth__canvas::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(54vh, 54vw);
	height: min(54vh, 54vw);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle at 34% 30%,
		#3a7fb8 0%, #1d5687 30%, #0e3559 50%, #071c33 66%, #04070e 84%);
	box-shadow:
		0 0 100px rgba(47, 141, 255, 0.16),
		inset -22px -10px 70px rgba(0, 0, 0, 0.72);
}

/* --------------------------------------------------------------------------
   Pleine largeur réelle.
   Les thèmes de blocs posent un espacement racine à gauche et à droite, plus
   un écart vertical entre blocs frères. Le bloc sort de cette grille pour
   occuper toute la fenêtre. La largeur vient d'une variable mesurée en
   JavaScript : 100vw inclut la barre de défilement et provoquerait un
   débordement horizontal.
   -------------------------------------------------------------------------- */

.vu-earth--full {
	width: var(--vu-vw, 100vw);
	max-width: var(--vu-vw, 100vw);
	margin-left: calc(50% - var(--vu-vw, 100vw) / 2);
	margin-right: calc(50% - var(--vu-vw, 100vw) / 2);
	margin-block: 0;
}

/* --------------------------------------------------------------------------
   Repli sans accélération matérielle : un globe dessiné en CSS, sans WebGL.
   -------------------------------------------------------------------------- */

.vu-earth.is-fallback .vu-earth__pin {
	background:
		radial-gradient(1px 1px at 18% 22%, rgba(255,255,255,.5) 50%, transparent 50%),
		radial-gradient(1px 1px at 74% 16%, rgba(255,255,255,.4) 50%, transparent 50%),
		radial-gradient(1px 1px at 86% 62%, rgba(255,255,255,.45) 50%, transparent 50%),
		radial-gradient(1px 1px at 32% 78%, rgba(255,255,255,.35) 50%, transparent 50%),
		radial-gradient(1px 1px at 58% 88%, rgba(255,255,255,.4) 50%, transparent 50%),
		var(--vu-void);
}

.vu-earth.is-fallback .vu-earth__canvas::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(54vh, 54vw);
	height: min(54vh, 54vw);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle at 34% 30%,
		#3a7fb8 0%, #1d5686 30%, #103e68 46%,
		#0a2340 60%, #061424 72%, #04070e 88%);
	box-shadow:
		0 0 100px rgba(47, 141, 255, 0.16),
		inset -20px -10px 70px rgba(0, 0, 0, 0.72);
}

/* --------------------------------------------------------------------------
   Section qui recouvre le globe au défilement.
   À ajouter sur le bloc Gutenberg placé juste après.
   -------------------------------------------------------------------------- */

.vu-cover {
	position: relative;
	z-index: 2;
}

/* --------------------------------------------------------------------------
   Accessibilité et petits écrans
   -------------------------------------------------------------------------- */

@media (max-width: 782px) {
	.vu-earth__hud {
		top: auto;
		bottom: clamp(28px, 7vh, 72px);
	}
	.vu-earth__title {
		max-width: 18ch;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vu-earth__hud,
	.vu-earth__status {
		transition-duration: 0.01ms;
	}
	.vu-earth__status span,
	.vu-earth__title h2,
	.vu-earth__title p {
		animation: none;
	}
}