/* ==========================================================================
   Version B ("/?look=globe"): the globe story. Layered on top of home.css; everything here is scoped to .look-globe.
   Layers, back to front: WebGL globe (#scene) / vignette + grain / projected labels (.gl-hud) / page content.
   ========================================================================== */

/* ---------- projected labels and data chips (positioned every frame by landing_globe.js) ---------- */
.look-globe .gl-hud { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.look-globe .gl-hud > * { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.gl-tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; margin: -38px 0 0 -14px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; white-space: nowrap; color: #fff;
  background: rgba(10, 18, 48, .72); border: 1px solid rgba(247, 216, 146, .3); }
.gl-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 10px var(--gold); }
.gl-tag.dest { color: #1B1405; background: linear-gradient(180deg, #F8DB97, #E8B24A); border-color: rgba(255, 241, 204, .7); }
.gl-tag.dest i { background: #1B1405; box-shadow: none; }

/* a data chip hangs off its point on a hairline leader, like an annotation (up-left by default, .up = up-right) */
.gl-chip { display: block; }
.gl-chip > i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .14), 0 0 18px rgba(255, 214, 150, .9); }
.gl-chip > i::after { content: ""; position: absolute; left: 4px; top: 4px; width: 82px; height: 1px; transform-origin: 0 0;
  transform: rotate(-135deg); background: linear-gradient(90deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .2)); }
.gl-chip.up > i::after { transform: rotate(-45deg); }
.gl-chip > div { position: absolute; right: 58px; bottom: 44px; min-width: 196px; padding: 12px 16px 13px; border-radius: 16px;
  display: grid; gap: 1px; color: #fff; white-space: nowrap;
  background: linear-gradient(150deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04) 55%), rgba(9, 15, 42, .55);
  border: 1px solid rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 24px 50px -24px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.gl-chip small { font: 600 .62rem/1.3 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-2); }
.gl-chip b { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; line-height: 1.1; letter-spacing: -.02em; }
.gl-chip span { font-size: .76rem; color: #C3CAE3; }
.gl-chip.up > div { right: auto; left: 58px; }
.gl-coord { margin: 18px 0 0 -10px; padding: 4px 9px; border-radius: 6px; white-space: nowrap; color: #DCE4FF;
  font: 600 .64rem/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .12em;
  background: rgba(8, 12, 32, .6); border: 1px solid rgba(143, 176, 255, .28); }

/* lite tier: no live blur over the moving canvas */
.fx-lite .gl-chip > div { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(9, 15, 42, .92); }
.fx-off .gl-hud, .no-webgl .gl-hud { display: none; }
@media (max-width: 760px) { .look-globe .gl-chip { display: none; } }
@media (prefers-reduced-motion: reduce) { .look-globe .gl-hud { display: none; } }

/* ---------- finale: the Admitra mark, lit, above the call to action ---------- */
.final-mark { display: none; }
.look-globe .final-mark { display: grid; place-items: center; position: relative; width: clamp(120px, 16vw, 180px); aspect-ratio: 1; margin: 0 auto 1.6rem; }
.look-globe .final-mark svg { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 0 22px rgba(232, 178, 74, .55)) drop-shadow(0 0 60px rgba(232, 178, 74, .25));
  animation: mark-float 6s ease-in-out infinite; }
.look-globe .final-mark .halo { position: absolute; inset: -40%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(247, 216, 146, .22), transparent 30%, transparent 55%, rgba(143, 176, 255, .16), transparent 80%);
  -webkit-mask: radial-gradient(closest-side, transparent 52%, #000 56%, #000 64%, transparent 70%); mask: radial-gradient(closest-side, transparent 52%, #000 56%, #000 64%, transparent 70%);
  animation: mark-spin 14s linear infinite; }
@keyframes mark-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes mark-spin { to { transform: rotate(360deg); } }
.look-globe .final { align-items: center; }
@media (prefers-reduced-motion: reduce) { .look-globe .final-mark svg, .look-globe .final-mark .halo { animation: none; } }