/* ==========================================================================
   USAIndiaCFO — /familyoffice/ first screen, Compare svc-hero option e (meeting 2, 22 Oct 2026)
   site/globe3d.py · assets/js/globe3d.js · palette: assets/css/landmarks.css (.lmx)

   The real 3D globe (three.js, lazily) turning slowly with the six landmark figures on it,
   the 13 services floating round it as links.
   .g3d__globe   a square box: the SVG poster (first paint, reduced motion, no WebGL), the
                 WebGL canvas laid over it by globe3d.js (.g3d--gl cross-fades) — no shift
   .g3d__grp     the two service groups: >= 1200px two floating arcs round the globe
                 (India left, the USA right, a heading each); below that compact lists
                 under the globe; < 1200px the order is crumb · headline · globe · lede ·
                 actions · services, so the figure and the headline share the first screen
   Motion: transform / opacity only; none under prefers-reduced-motion.
   ========================================================================== */

.g3d { --g-in: var(--lm-p-in); --g-us: var(--lm-p-us); }
.g3d [data-grp="in"] { --gc: var(--g-in); }
.g3d [data-grp="us"] { --gc: var(--g-us); }

.g3d__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: clamp(20px, 2.6vw, 44px); align-items: center; min-height: calc(88svh - var(--head-h)); }

/* ── the globe box ───────────────────────────────────────────────────── */
.g3d__globe { position: relative; aspect-ratio: 1 / 1; }
.g3d__poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.g3d__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s var(--ease); }
.g3d .g3d-po { transition: opacity .8s var(--ease); }
.g3d--gl .g3d__gl { opacity: 1; }
.g3d--gl .g3d-po { opacity: 0; }
/* early (html.uic-3d — site/landmarks3d.py early_script decided before the first paint that the 3D will run):
   the poster's globe never shows (its halo and the services do), so there is no flat globe to swap; the 3D
   globe fades in quickly with its first frame. No frame in time, or an error: the class goes and the poster
   fades in as before. */
html.uic-3d .g3d:not(.g3d--gl) .g3d-po { opacity: 0; transition: none; }
html.uic-3d .g3d__gl { transition-duration: .45s; }

.lmx .g3d-atmo { stroke: none; }
.lmx .g3d-grat { fill: none; stroke: rgba(255, 255, 255, .32); stroke-width: .7; }
.lmx .g3d-in { fill: var(--lm-in1); stroke: var(--lm-in2); stroke-width: .9; stroke-linejoin: round; }
.lmx .g3d-in--dot { stroke-width: .4; }
.lmx .g3d-hl0 { stop-color: rgba(255, 255, 255, .34); } .lmx .g3d-hl1 { stop-color: rgba(255, 255, 255, 0); }
.lmx .g3d-disc { fill: var(--pc); stroke: #fff; stroke-width: 1.4; }
.lmx .g3d-gl { filter: drop-shadow(0 1px 1.2px rgba(var(--dark-rgb), .28)); }
.lmx .g3d-lab { font: 600 10px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; fill: var(--ink);
  paint-order: stroke; stroke: rgba(var(--ground-rgb), .92); stroke-width: 3px; stroke-linejoin: round; }

/* ── the services ────────────────────────────────────────────────────── */
.g3d__list { list-style: none; margin: 0; padding: 0; }
.g3d__gh { display: flex; align-items: center; gap: 9px; margin: 0; font: 600 11px/1.3 Inter, sans-serif; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.g3d__gk { flex: none; width: 18px; height: 2px; border-radius: 2px; background: var(--gc); }
.g3d__pill { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 15px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .9); background: color-mix(in srgb, var(--gc) 7%, rgba(255, 255, 255, .92));
  border: 1px solid rgba(var(--dark-rgb), .07); border-color: color-mix(in srgb, var(--gc) 22%, rgba(255, 255, 255, .6));
  box-shadow: 0 6px 18px rgba(var(--dark-rgb), .07), 0 1px 2px rgba(var(--dark-rgb), .05);
  font: 500 13px/1.2 Inter, sans-serif; color: var(--ink); white-space: nowrap; text-decoration: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
a.g3d__pill:hover { background: #fff; color: var(--bronze-deep); border-color: color-mix(in srgb, var(--gc) 45%, #fff);
  box-shadow: 0 10px 24px rgba(var(--dark-rgb), .12), 0 1px 2px rgba(var(--dark-rgb), .06); }
a.g3d__pill:focus-visible { outline: 2px solid var(--bronze-bright); outline-offset: 2px; background: #fff; color: var(--bronze-deep); }

/* ── >= 1200px: the globe with the two floating arcs ─────────────────── */
@media (min-width: 1200px) {
  .g3d__copy { max-width: 520px; }
  .g3d__scene { position: relative; container-type: inline-size; aspect-ratio: 100 / 74; margin-right: calc(var(--gutter) * -.6);
    --box: 68cqi; --ring: calc(var(--box) * .4 + 18px); --gx: 54%; }
  .g3d__globe { position: absolute; left: var(--gx); top: 50%; width: var(--box); translate: -50% -50%; }
  .g3d__grp[data-side="l"] { --rx: calc(var(--ring) - 10px); }
  .g3d__grp[data-side="r"] { --rx: var(--ring); }
  .g3d__grp { position: absolute; inset: 0; pointer-events: none; }
  /* the group's name sits just above its first label, aligned with it */
  .g3d__gh { position: absolute; left: calc(var(--gx) + var(--cx) * var(--rx)); top: calc(50% + var(--cy) * var(--ring) - 38px);
    pointer-events: auto; }
  .g3d__grp[data-side="l"] .g3d__gh { translate: -100% -50%; flex-direction: row-reverse; padding-right: 4px; }
  .g3d__grp[data-side="r"] .g3d__gh { translate: 0 -50%; padding-left: 4px; }
  .g3d__li { position: absolute; left: calc(var(--gx) + var(--cx) * var(--rx)); top: calc(50% + var(--cy) * var(--ring));
    pointer-events: auto; }
  .g3d__grp[data-side="l"] .g3d__li { translate: -100% -50%; }
  .g3d__grp[data-side="r"] .g3d__li { translate: 0 -50%; }
  /* floating: each label drifts on its own slow beat; it holds still under the pointer or in focus */
  .g3d__pill { animation: g3d-float calc(5.6s + var(--i) * .43s) ease-in-out infinite; animation-delay: calc(var(--i) * -1.7s); }
  .g3d__grp:hover .g3d__pill, .g3d__grp:focus-within .g3d__pill { animation-play-state: paused; }
}
@media (min-width: 1200px) and (max-width: 1359px) {
  /* narrower desktops: a slightly smaller globe, more centred, so the longest labels stay on screen */
  .g3d__scene { --box: 62cqi; --gx: 51%; }
  .g3d__grp[data-side="r"] { --rx: calc(var(--ring) - 6px); }
  .g3d__pill { min-height: 34px; padding: 7px 14px; }
}
@supports not (width: 1cqi) {
  /* browsers without container units: the same sizes from the viewport */
  @media (min-width: 1200px) { .g3d__scene { --box: min(37vw, 540px); } }
}
@keyframes g3d-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -6px, 0); } }

/* ── < 1200px: one column; headline, globe, lede, actions, the two groups ─ */
@media (max-width: 1199px) {
  .g3d__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 0; align-items: start; }
  .g3d__copy, .g3d__scene { display: contents; }
  .g3d__crumb { order: 1; }
  .g3d__head { order: 2; max-width: 680px; }
  .g3d__globe { order: 3; width: min(100%, 520px); justify-self: center; margin: clamp(0px, 1.5vw, 12px) 0 -4px; }
  .g3d__lede { order: 4; max-width: 640px; }
  .g3d__acts { order: 5; }
  .g3d__grp { order: 6; margin-top: 30px; }
  .g3d__grp + .g3d__grp { margin-top: 22px; }
  .g3d__gh { margin-bottom: 11px; }
  .g3d__list { display: flex; flex-wrap: wrap; gap: 8px; }
  .g3d .lmk__lede { margin-top: 10px; }
  .g3d .lmk__acts { margin-top: 26px; }
}
@media (min-width: 700px) and (max-width: 1199px) {
  .g3d__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; }
  .g3d__grid > * > *, .g3d__crumb, .g3d__head, .g3d__globe, .g3d__lede, .g3d__acts { grid-column: 1 / -1; }
  .g3d__grp { grid-column: auto; }
  .g3d__grp + .g3d__grp { margin-top: 30px; }
}
/* tablets: the headline and the whole globe share the first screen (QA 22 Oct 2026; 180px = crumb + eyebrow + headline) */
@media (min-width: 601px) and (max-width: 1199px) {
  .g3d__globe { width: min(100%, 520px, max(320px, calc(100svh - var(--head-h) - clamp(28px, 4vw, 56px) - 180px - var(--mb) - 24px))); }
}
@media (max-width: 600px) {
  .g3d .lmk__acts { gap: 10px 22px; margin-top: 22px; }
  .g3d .lmk__acts .btn { width: auto; flex: 1 1 auto; }
  .g3d__globe { width: min(100%, 420px); margin: 2px 0 -6px; }
  .g3d__pill { min-height: 36px; padding: 8px 13px; font-size: 13px; white-space: normal; }
  .lmx .g3d-lab { font-size: 13.5px; stroke-width: 3.6px; }
}

@media (prefers-reduced-motion: reduce) {
  .g3d__pill { animation: none !important; }
  .g3d__gl, .g3d .g3d-po, .g3d__pill { transition: none !important; }
}