/* ════════════════════════════════════════════
   GLOBE PAGE
   ════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  background: #06061A;
  overflow: hidden;
}

#globe-el {
  position: fixed;
  inset: 0;
}

/* ── Pin hit target — invisible, oversized for easy hover/tap ── */
.pin-hit {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.pin-hit:focus {
  outline: none;
}
.pin-hit:focus-visible {
  outline: 2px solid var(--c-shipped);
  outline-offset: 3px;
}

/* ── "Start here" label — pinned beside the flagship dot ──
   A small pill tethered just to the right of the featured pin. It inherits the
   pin's projected position (child of .pin-hit) so it tracks the dot as the
   globe turns, and clicks/hovers bubble to the pin's own handlers. */
.pin-flag {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(20px, -50%);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 220, 176, 0.95);
  background: rgba(255, 154, 96, 0.12);
  border: 1px solid rgba(255, 154, 96, 0.38);
  border-radius: 100px;
  padding: 4px 10px 4px 9px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 14px rgba(255, 138, 74, 0.22);
  pointer-events: auto;
  animation: pin-flag-breathe 2.6s ease-in-out infinite;
}

/* A leading dot that points back at the pin, so the pill reads as "this marker". */
.pin-flag::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--c-accent, #ff9a60);
  vertical-align: middle;
  box-shadow: 0 0 6px rgba(255, 154, 96, 0.9);
}

@keyframes pin-flag-breathe {
  0%, 100% { opacity: 0.82; }
  50%      { opacity: 1; box-shadow: 0 2px 18px rgba(255, 138, 74, 0.4); }
}

/* ── Header ─────────────────────────────────── */
.globe-header {
  position: fixed;
  top: 38px;
  left: 44px;
  z-index: 10;
  pointer-events: none;
  user-select: none;
  /* Hidden until js/globe.js has rendered the scramble-in effect (it adds
     .globe-ready). Otherwise, navigating back to this cached page paints the
     plain "Hanna Yang" for a frame before the deferred module scrambles it.
     The page needs JS for the globe regardless, so gating the header is safe. */
  opacity: 0;
  transition: opacity 0.4s ease;
}
html.globe-ready .globe-header { opacity: 1; }

.gh-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 32px;
  color: rgba(255, 236, 210, 0.94);
  letter-spacing: -0.01em;
  line-height: 1;
}

.gh-title {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 190, 130, 0.65);
  margin-top: 8px;
}

.gh-hint {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  color: rgba(255, 154, 96, 0.7);
  margin-top: 20px;
}

/* ── Decrypted-text effect — scrambling glyphs glow in the accent orange,
   settled characters keep the element's own colour. ── */
.dt-visual { white-space: pre-wrap; }
.dt-encrypted { color: var(--c-accent); }
.dt-revealed { color: inherit; }

/* ── Nav ─────────────────────────────────────── */
.globe-nav {
  position: fixed;
  bottom: 36px;
  right: 44px;
  z-index: 10;
  display: flex;
  gap: 10px;
  align-items: center;
}

.gnav-btn {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 190, 130, 0.6);
  text-decoration: none;
  padding: 6px 15px;
  border-radius: 100px;
  border: 1px solid rgba(255, 154, 96, 0.2);
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gnav-btn:hover {
  color: rgba(255, 220, 170, 0.95);
  border-color: rgba(255, 154, 96, 0.5);
  background: rgba(255, 154, 96, 0.07);
  transform: translateY(-1px);
}

.gnav-reset {
  background: none;
  font-size: 14px;
  padding: 4px 10px;
  line-height: 1;
}

.gnav-reset.spinning {
  animation: reset-spin 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes reset-spin {
  from { transform: rotate(0deg)   translateY(0);    }
  to   { transform: rotate(-360deg) translateY(-1px); }
}

/* ── Pin Tooltip ─────────────────────────────── */
/* Positioning shell — anchors the card above the pin. The visual (bg, border,
   radius) lives on .pt-card so the border-glow can own it; keeping the shell's
   own transform here avoids clashing with the glow's transform on .pt-card. */
.pin-tooltip {
  position: fixed;
  z-index: 20;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 18px));
  opacity: 0;
  transition: opacity 0.15s ease;
  will-change: opacity;
}

.pin-tooltip.visible {
  opacity: 1;
  pointer-events: auto;
}

/* The glowing card (enhanced by js/border-glow.js). Frosted-glass blur stays;
   background/border/radius are supplied by the glow. */
.pt-card {
  min-width: 195px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.pt-card.border-glow-card > .border-glow-inner {
  padding: 14px 18px 0;
  border-radius: inherit;   /* clip the full-width CTA to the card's corners */
}

.pt-year {
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 154, 96, 0.7);
  margin-bottom: 7px;
}

.pt-label {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  color: rgba(255, 238, 215, 0.97);
  line-height: 1.2;
  margin-bottom: 3px;
}

.pt-company {
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(255, 190, 130, 0.65);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

.pt-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 154, 96, 0.85);
  border-top: 1px solid rgba(255, 154, 96, 0.1);
  /* bleeds to the card edges (the inner wrapper's rounded corners clip it) */
  margin: 10px -18px 0;
  padding: 13px 18px;
  transition: background 0.15s ease, color 0.15s ease;
}

.pt-cta:hover {
  background: rgba(255, 154, 96, 0.1);
  color: rgba(255, 200, 150, 1);
}

/* ── Transition Fade ─────────────────────────── */
.nav-fade {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #06061A;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease;
}

.nav-fade.fading {
  opacity: 1;
  pointer-events: all;
}

.nav-fade.arriving {
  opacity: 1;
  transition: none;
}

/* ── Mobile ──────────────────────────────────────
   The globe is pulled back on phones (see js/globe.js homePov), so tuck the
   header and nav into the corners with lighter padding and smaller type to
   give the smaller globe room and keep the chrome from crowding it. */
@media (max-width: 767px) {
  .globe-header {
    top: 22px;
    left: 22px;
  }
  .gh-name   { font-size: 25px; }
  .gh-title  { font-size: 8.5px; margin-top: 6px; }
  .gh-hint   { font-size: 7.5px; margin-top: 14px; }

  .globe-nav {
    bottom: calc(20px + env(safe-area-inset-bottom));
    right: 20px;
    gap: 8px;
  }
  .gnav-btn {
    font-size: 8.5px;
    padding: 7px 13px;
  }
}

/* ── Reduced motion ─────────────────────────────
   Auto-rotate itself is disabled in JS (globe.js checks the same
   media query); this covers the remaining CSS-driven motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}