/* ==========================================================================
   USAIndiaCFO — 3D landmarks with floating links (Compare svc-hero e, 22 Oct 2026)
   site/landmarks3d.py · assets/js/landmarks3d.js (+ a scene module per page)
   Palette + copy styles: assets/css/landmarks.css (.lmx, .lmk).

   .lm3d__fig    the figure: a fixed-height box (no layout shift when the 3D
                 arrives); the still is scaled by its HEIGHT, the links sit at
                 % heights and cqh offsets from the axis (container query units
                 of this box), so they hug the structure at any size
   .lm3d__art    the still (SVG) + the WebGL canvas (landmarks3d.js) over it
   .lm3d__links  the services: real links, floating (transform only)
   Layout:  >= 1100px copy left, figure right (as option d)
            601-1099px copy, figure, then the lede + actions
            <= 600px  eyebrow + headline + the WHOLE figure in the first screen
                      (above the phone bar), the lede + actions just below
   Reduced motion: nothing floats; the 3D is one still frame.
   ========================================================================== */

.lm3d__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  grid-template-areas: "top scene" "more scene"; grid-template-rows: 1fr 1fr; column-gap: clamp(24px, 3.4vw, 56px);
  min-height: calc(88svh - var(--head-h)); }
.lm3d__first { display: contents; }
.lm3d__top { grid-area: top; align-self: end; max-width: 540px; }
.lm3d__more { grid-area: more; align-self: start; max-width: 540px; }
.lm3d__scene { grid-area: scene; align-self: center; min-width: 0; }

/* ── the figure ──────────────────────────────────────────────────────── */
.lm3d__fig { position: relative; container-type: size; height: clamp(520px, calc(100svh - var(--head-h) - 110px), 720px); }
.lm3d__art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lm3d__still { position: absolute; top: 0; left: 50%; height: 100%; width: auto; max-width: none;
  aspect-ratio: calc(var(--vbw) / var(--vbh)); transform: translateX(-50%); display: block; overflow: visible; }
/* the links are the clouds here: the drawing's own clouds would read as stray pills */
.lm3d__still .cloud { display: none; }
.lm3d__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .9s var(--ease); }
.lm3d__fig.is-gl .lm3d__gl { opacity: 1; }
.lm3d__fig.is-gl .lm3d__still .lm-t { animation: none; opacity: 0; transition: opacity .7s var(--ease); }
/* early (html.uic-3d — site/landmarks3d.py early_script decided before the first paint that the 3D will run):
   the still's landmark never shows, so there is no flat building to swap; its backdrop (sky, sun, skyline,
   ground) and the links show as usual, and the 3D building fades in quickly over them with its first frame.
   No frame in time, or an error: the class goes and the drawing rises in as before. */
html.uic-3d .lm3d__fig:not(.is-still) .lm3d__still .lm-t { animation: none; opacity: 0; transition: none; }
html.uic-3d .lm3d__gl { transition-duration: .45s; }

/* ── the links ───────────────────────────────────────────────────────── */
.lm3d__links { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.lm3d__li { position: absolute; top: calc(var(--y) * 1%); display: flex; translate: 0 -50%; pointer-events: none;
  max-width: calc(50% - var(--hx) * 1cqh - 4px);
  animation: lm3d-in .7s var(--ease) backwards; animation-delay: calc(.55s + var(--y) * .012s); }
.lm3d__li[data-side="l"] { right: calc(50% + var(--hx) * 1cqh); justify-content: flex-end; }
.lm3d__li[data-side="r"] { left: calc(50% + var(--hx) * 1cqh); }
.lm3d__pill { pointer-events: auto; display: inline-flex; flex-wrap: wrap; align-items: center; align-content: center; column-gap: .3em;
  min-height: 34px; padding: 7px 15px;
  border-radius: var(--r-pill, 999px); text-decoration: none;
  font: 500 13px/1.2 Inter, sans-serif; letter-spacing: .005em; color: var(--ink);
  background: var(--lm-pill); background: color-mix(in srgb, var(--tc) 8%, var(--lm-pill));
  border: 1px solid rgba(var(--dark-rgb), .07); border-color: color-mix(in srgb, var(--tc) 26%, transparent);
  box-shadow: 0 10px 22px -10px rgba(var(--dark-rgb), .22), 0 1px 2px rgba(var(--dark-rgb), .06);
  animation: lm3d-float var(--fd, 7s) ease-in-out var(--fdl, 0s) infinite alternate;
  transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), scale .25s var(--ease); }
.lm3d__w { display: inline-block; }
a.lm3d__pill:hover { background: #fff; color: var(--bronze-deep); scale: 1.04;
  box-shadow: 0 14px 26px -10px rgba(var(--dark-rgb), .28), 0 1px 2px rgba(var(--dark-rgb), .08); }
a.lm3d__pill:focus-visible { outline: 2px solid var(--bronze-bright); outline-offset: 2px; background: #fff; color: var(--bronze-deep); }
/* reading or aiming: nothing moves under the pointer or the focus */
.lm3d__fig:hover .lm3d__pill, .lm3d__fig:focus-within .lm3d__pill { animation-play-state: paused; }

@keyframes lm3d-float { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--fx, 0px), var(--fy, -6px), 0); } }
@keyframes lm3d-in { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }

/* ── 601-1099: one column; the figure under the headline ─────────────── */
@media (max-width: 1099px) {
  .lm3d__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "scene" "more"; grid-template-rows: auto;
    min-height: 0; }
  .lm3d__top, .lm3d__more { max-width: 640px; }
  .lm3d__scene { margin-top: 18px; }
  .lm3d__fig { height: clamp(480px, calc(56vw + 120px), 680px); max-width: 760px; margin: 0 auto; }
  .lm3d__more .lmk__lede { margin-top: 20px; }
}

/* ── tablets (601-1099): as on phones, the headline and the WHOLE figure share the first screen (QA 22 Oct 2026:
   at 1024 x 768 the figure ran below the fold); the lede + actions follow ── */
@media (min-width: 601px) and (max-width: 1099px) {
  .lm3d__grid { display: block; }
  .lm3d__first { display: flex; flex-direction: column;
    max-height: calc(100svh - var(--head-h) - clamp(28px, 4vw, 56px) - var(--mb) - 12px); }
  .lm3d__top, .lm3d__more { align-self: stretch; }
  .lm3d__scene { flex: 0 1 680px; align-self: stretch; min-height: 400px; margin-top: 18px; }
  .lm3d__fig { height: 100%; }
}

/* ── phones: the headline and the WHOLE figure in the first screen ───── */
@media (max-width: 600px) {
  .lmk.lm3d { padding-top: calc(var(--head-h) + 28px); }
  .lm3d__grid { display: block; }
  /* the screen under the header and above the phone bar (60px) */
  .lm3d__first { display: flex; flex-direction: column;
    height: calc(100svh - var(--head-h) - 28px - 60px - env(safe-area-inset-bottom, 0px) - 6px); min-height: 500px; max-height: 760px; }
  .lm3d__top, .lm3d__more { align-self: stretch; }
  .lmk.lm3d .eyebrow { margin-bottom: 10px; }
  .lmk.lm3d h1.display-lg { font-size: clamp(1.72rem, 7.8vw, 2.05rem); line-height: 1.08; max-width: 18ch; }
  .lm3d__scene { flex: 1 1 0; align-self: stretch; min-height: 0; margin-top: 8px; }
  .lm3d__fig { height: 100%; max-width: none; margin: 0 calc(8px - var(--gutter)); }
  .lm3d__more .lmk__lede { margin-top: 18px; }
  .lmk.lm3d .lmk__acts { margin-top: 24px; }
  .lmk.lm3d .lmk__acts .btn { width: 100%; }
  .lmk.lm3d .lmk__ghost { min-height: 40px; }
  .lm3d__li { max-width: calc(50% - var(--mhx) * 1cqh - 3px); }
  .lm3d__li[data-side="l"] { right: calc(50% + var(--mhx) * 1cqh); }
  .lm3d__li[data-side="r"] { left: calc(50% + var(--mhx) * 1cqh); }
  .lm3d__pill { position: relative; min-height: 28px; padding: 5px 10px; font-size: 12px; line-height: 1.18;
    box-shadow: 0 6px 14px -7px rgba(var(--dark-rgb), .26), 0 1px 2px rgba(var(--dark-rgb), .06); }
  /* the tap target is at least 32px tall, beyond the drawn pill */
  .lm3d__pill::before { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: max(100%, 34px); translate: 0 -50%; }
}

/* small phones (360 class): 18 links around the tower ran edge to edge (QA 22 Oct 2026); a slightly smaller pill
   leaves air between neighbours, the tap target stays 34px */
@media (max-width: 380px) {
  .lm3d__pill { min-height: 26px; padding: 4px 9px; font-size: 11.5px; line-height: 1.14; }
}

@media (prefers-reduced-motion: reduce) {
  .lm3d__li, .lm3d__pill { animation: none; }
  .lm3d__gl, .lm3d__fig.is-gl .lm3d__still .lm-t, .lm3d__pill { transition: none; }
}
@media print {
  .lm3d__gl { display: none; }
  .lm3d__li, .lm3d__pill { animation: none; }
}