/* ======================================================
   RIGHT PANEL (GLOBE)
====================================================== */
.right {
  background: var(--bg);
  position: relative;
  overflow: hidden;
  height: 100%;
}

/* Ghost GLOBAL text */
.globe-ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 96px;
  font-weight: 900;
  color: rgba(255,255,255,0.025);
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.05em;
  z-index: 0;
  white-space: nowrap;
}

/* Dashed rotating circles */
.deco-circle {
  position: absolute;
  border: 1px dashed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.deco-circle.c1 {
  width: 320px; height: 320px;
  border-color: rgba(232,87,58,0.15);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: rotate-slow 40s linear infinite;
}
.deco-circle.c2 {
  width: 460px; height: 460px;
  border-color: rgba(204,255,0,0.08);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: rotate-slow 60s linear infinite reverse;
}
.deco-circle.c3 {
  width: 200px; height: 200px;
  border-color: rgba(255,110,132,0.1);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: rotate-slow 25s linear infinite;
}
@keyframes rotate-slow {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Diagonal accent lines */
.deco-line {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.deco-line.l1 {
  width: 200px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,87,58,0.3), transparent);
  top: 20%; right: -20px;
  transform: rotate(-30deg);
}
.deco-line.l2 {
  width: 160px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(204,255,0,0.2), transparent);
  bottom: 25%; left: -10px;
  transform: rotate(28deg);
}
.deco-line.l3 {
  width: 120px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,110,132,0.2), transparent);
  top: 65%; right: 10%;
  transform: rotate(-20deg);
}

/* Globe container */
#globe-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Overlay card */
.globe-overlay {
  position: absolute;
  bottom: -140px;
  left: 16px;
  right: 16px;
  background: rgba(17,17,17,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 14px 14px 14px 16px;
  z-index: 20;
  border-left: 2px solid var(--o);
  transition: bottom 0.45s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.globe-overlay.visible { bottom: 10px; pointer-events: all; }
.ov-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; }
.ov-tag { font-size: 7px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-family: var(--m); padding: 2px 6px; }
.ov-close {
  width: 18px; height: 18px;
  background: var(--s3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  border: none; outline: none;
  color: var(--t2);
  font-size: 10px;
  transition: background 0.2s;
}
.ov-close:hover { background: var(--s4); }
.ov-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; line-height: 1.3; }
.ov-summary { font-size: 9px; color: var(--t2); line-height: 1.5; margin-bottom: 6px; }
.ov-foot { display: flex; align-items: center; gap: 8px; font-family: var(--m); font-size: 8px; color: var(--t3); }