/* « Deux directions »: the 3D Earth (three.js) and its projected labels.
   Loaded after site.css; only touches the globe figure in #directions. */

.js .globe__canvas { opacity: 0; transition: opacity 1s var(--e-out); }
.js .globe__stage.is-ready .globe__canvas { opacity: 1; }

/* placeholder while the module and textures load, and the still fallback */
.globe__stage.is-loading,
.globe__stage.is-static { background: url("../img/globe-static.webp") center / 100% 100% no-repeat; }
.globe__stage.is-static { cursor: default; }
.globe__stage.is-static .globe__canvas { display: none; }
.globe__stage.is-dragging { cursor: grabbing; }

/* the atmosphere is drawn in WebGL now; keep only a faint warm bloom behind it */
.globe__halo { inset: -2%; opacity: 0.55; background: radial-gradient(closest-side, rgba(255, 210, 150, 0.16), rgba(231, 170, 100, 0.07) 60%, transparent 100%); }

.g3d-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.g3d-label {
  position: absolute; left: 0; top: 0;
  padding: 0.42em 0.8em 0.46em;
  border-radius: 999px;
  border: 1px solid rgba(231, 196, 142, 0.42);
  background: rgba(18, 14, 10, 0.74);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.7);
  color: #fbf4ea;
  font-family: var(--f-sans);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.g3d-label--home {
  border-color: transparent;
  background: var(--champagne);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(255, 226, 170, 0.35), 0 8px 22px -8px rgba(0, 0, 0, 0.75), 0 0 26px -6px rgba(255, 214, 150, 0.55);
}
.no-js .g3d-labels { display: none; }

@media (max-width: 560px) {
  .g3d-label { font-size: 0.8125rem; padding: 0.4em 0.7em 0.44em; }
}