/* ─── the globe ──────────────────────────────────────────────────────────
   Section 02 closes on the app's own dotted planet, turned so only its top
   half rises out of the page. The canvas draws straight alpha over the
   page's aurora rather than carrying a black square of its own, so the globe
   sits IN the atmosphere instead of on top of it.
   ───────────────────────────────────────────────────────────────────────── */

.globe {
  position: relative;
  margin-top: clamp(3rem, 8vw, 7rem);
  /* Tall enough that the visible cap reads as a planet rather than a curve.
     The shader's offsetY drops the sphere's centre below this box, so the
     bottom of the section is the horizon. */
  height: clamp(340px, 62vh, 720px);
  overflow: hidden;
  /* the sphere is drawn round; nothing here should look like a panel */
  border: 0;
  background: none;
}

/* The app draws this planet on pure black. Here the page's aurora runs
   behind it, and a bright green bloom under the dot lattice swallowed it —
   "if you notice the gradient before the content, it's too loud"
   (docs/design.md round 4). This scrim pulls the atmosphere down locally so
   the globe reads, without flattening the section either side of it. */
.globe::before {
  content: "";
  position: absolute;
  inset: -10% calc(50% - 50vw) -30%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      120% 90% at 50% 100%,
      #04060b 0%,
      color-mix(in srgb, #04060b 88%, transparent) 42%,
      transparent 78%
    );
}

.globe__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* WebGL2 missing: a soft disc so the pins still have a planet to sit on. */
.globe--flat::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 34%;
  width: 124%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 28%,
    color-mix(in srgb, var(--t-uncommon) 12%, transparent),
    #0a0e18 62%
  );
  pointer-events: none;
}

.globe__eyebrow {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  color: var(--dim);
}

/* ── the pins ──
   js/globe.js writes transform/opacity every frame from the projection, so
   nothing here may set either — a transition on transform would fight the
   loop and smear the pin across the planet. Only the chip animates. */
.pin {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
  /* the projected point is the pin's centre, not its corner */
  margin: -5px 0 0 -5px;
}

.pin__dot {
  --tier: var(--t-common);
  position: relative;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tier);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tier) 40%, transparent),
    0 0 14px color-mix(in srgb, var(--tier) 70%, transparent);
}

/* a slow sonar ring — a catch just happened, not a static map marker */
.pin__dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--tier);
  opacity: 0;
  animation: pinPing 3.2s var(--ease) infinite;
}

.pin:nth-child(3n) .pin__dot::after { animation-delay: 1.1s; }
.pin:nth-child(3n + 1) .pin__dot::after { animation-delay: 2.3s; }

@keyframes pinPing {
  0% { transform: scale(1); opacity: 0.85; }
  70% { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}

.pin__dot[data-tier="common"] { --tier: var(--t-common); }
.pin__dot[data-tier="uncommon"] { --tier: var(--t-uncommon); }
.pin__dot[data-tier="rare"] { --tier: var(--t-rare); }
.pin__dot[data-tier="epic"] { --tier: var(--t-epic); }
.pin__dot[data-tier="legendary"] { --tier: var(--t-legendary); }

.pin__chip {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.42rem 0.6rem;
  white-space: nowrap;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  line-height: 1.35;
  color: var(--dim);
  border-radius: 8px;
  /* the app's liquid-glass chrome: translucent, blurred, light top edge */
  background: color-mix(in srgb, #0d0f14 72%, transparent);
  border: 1px solid var(--hair);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 6px 22px rgb(0 0 0 / 0.5);
}

.pin__chip b {
  color: var(--bone);
  font-weight: 400;
  text-transform: uppercase;
}

@media (max-width: 700px) {
  .globe {
    height: clamp(280px, 52vh, 420px);
  }
  /* At this width the chips out-measure the planet, so the pins go bare —
     the dots and their pings still read as catches landing worldwide. */
  .pin__chip {
    display: none;
  }
}

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