/* Photo-real globe skin (index_3). Needs <canvas id="globeTex"> in .globe-wrap + js/earth-texture.js.
   Same look as the index_2 globe, without the rest of the v2 theme. */
.globe-real #globeTex { position: absolute; border-radius: 50%; pointer-events: none; }
.globe-real .globe-wrap > svg#globe { position: relative; }
.globe-real .g-sphere { fill: none; }
.globe-real .g-grat { stroke: rgba(255, 255, 255, .06); }
.globe-real .g-land { fill: transparent; stroke: rgba(255, 255, 255, .14); stroke-width: .5; }
.globe-real .g-on { fill: rgba(255, 255, 255, .14); stroke: rgba(255, 255, 255, .9); stroke-width: .9; }
.globe-real .g-on.on { fill: rgba(210, 15, 23, .55); stroke: #fff; }
.globe-real .g-tr { fill: rgba(210, 15, 23, .75); stroke: #fff; filter: none; }
.globe-real .g-arc { stroke: rgba(255, 255, 255, .6); stroke-width: 1.2; }
.globe-real .g-arc.on { stroke: #fff; stroke-width: 2.6; }
.globe-real .g-flow { stroke: #ff6a70; stroke-width: 2.4; }
.globe-real .g-dot { fill: #fff; stroke: #d20f17; stroke-width: 2; }
.globe-real .g-pulse { stroke: #fff; }
.globe-real .g-ist-dot { fill: #d20f17; stroke: #fff; }
/* blue atmosphere halo instead of the accent-coloured one */
.globe-real .globe-wrap { --accent-rgb: 140, 180, 255; }

/* ---------- Cinematic skin ---------- */
/* layer order: back orbit → photo globe → vector overlay → front orbit */
.globe-real .hero-inner > div:first-child { position: relative; z-index: 3; }
.globe-real .g-orbit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.globe-real .g-orbit.back { z-index: 0; }
.globe-real #globeTex { z-index: 1; }
.globe-real .globe-wrap > svg#globe { z-index: 2; }
.globe-real .g-orbit.front { z-index: 3; }
.globe-real .globe-tip { z-index: 6; }
.globe-real .o-ring { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1.1; }
.globe-real .o-ring2 { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1; stroke-dasharray: 2 9; animation: oDash 40s linear infinite; }
.globe-real .o-sat { fill: #fff; filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px rgba(255, 120, 130, .9)); }
@keyframes oDash { to { stroke-dashoffset: -440; } }

/* lighting: soft sun highlight top-left, deep limb shadow, brand-red reflected rim bottom-right */
.globe-real .g-shade { display: none; }
.globe-real .g-light, .globe-real .g-rim { display: block; }
.globe-real .g-halo { display: none; }
.globe-real .globe-wrap::before { /* outer glow that blends the globe into the red stage */
  content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
  left: -18%; top: -18%; width: 136%; height: 136%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 0 60px 6px rgba(255, 210, 214, .18), 0 40px 120px 10px rgba(20, 0, 3, .55);
}
.globe-real .globe-wrap::after { /* contact shadow under the globe */
  content: ""; position: absolute; z-index: 0; pointer-events: none; left: 8%; right: 8%; bottom: -26%; height: 12%;
  background: radial-gradient(closest-side, rgba(15, 0, 2, .55), transparent); filter: blur(8px);
}
.globe-real .g-land { stroke: rgba(255, 255, 255, .1); }
.globe-real .g-on { fill: rgba(255, 255, 255, .1); stroke: rgba(255, 255, 255, .75); stroke-width: .8; }
.globe-real .g-arc { stroke: rgba(255, 255, 255, .45); stroke-width: 1; }
.globe-real .globe-wrap.focus .g-arc:not(.on), .globe-real .globe-wrap.focus .g-flow:not(.on) { opacity: .08; }

/* hint now sits in the text column */
.globe-real .globe-hint.inline { position: static; transform: none; margin-top: 22px; background: transparent; border: 0; padding: 0; backdrop-filter: none; color: var(--ink-3); }
@media (max-width: 900px) { .globe-real .globe-hint.inline { display: none; } }
@media (prefers-reduced-motion: reduce) { .globe-real .o-sat { display: none; } }