/* Phoenix globe: the stage fills its host element. Canvas, HTML pin labels and the no-WebGL poster.
   Tokens only; the WebGL colours are read from the same tokens by phoenix-globe.js. */

.phoenix-globe {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.phoenix-globe__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.2s var(--ease-standard); /* quick: the ignition is the entrance */
}
.phoenix-globe.is-ready .phoenix-globe__canvas {
  opacity: 1;
}

/* ── Pin labels: projected from 3D every frame, hidden on the far side of the globe ── */

.phoenix-globe__labels {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Each label carries its own data-theme, picked from the sky behind it, so --ink-muted and --accent
   switch from ivory/gold to ink/dark gold as the dawn brightens. */
.phoenix-globe__label {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: -0.7em; /* centre the line on the pin */
  padding-left: var(--space-3); /* clear the pin's glow */
  white-space: nowrap;
  color: var(--ink-muted);
  text-shadow: 0 0 8px color-mix(in srgb, var(--surface) 70%, transparent);
  opacity: 0;
  will-change: transform, opacity;
  transition: color var(--dur-base) var(--ease-standard);
}
.phoenix-globe__label::before {
  content: '';
  width: var(--space-3);
  height: 1px;
  background: var(--accent);
}
.phoenix-globe__label--secondary {
  color: var(--ink-faint);
}
.phoenix-globe__label--secondary::before {
  opacity: 0.5;
}
/* On phones the globe is too small for names: the pins stay, the page names the bases in its copy. */
@media (max-width: 600px) {
  .phoenix-globe__label {
    display: none;
  }
}

/* ── No WebGL: recorded stills, night and dawn, crossfaded by setDawn() ── */

.phoenix-globe__poster {
  position: absolute;
  inset: 0;
  background: var(--color-night);
}
.phoenix-globe__poster-image {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.phoenix-globe__poster-image--dawn {
  opacity: var(--phoenix-globe-dawn, 0);
}