/* ==========================================================================
   USAIndiaCFO — /indiacfo/ India Gate first screens (meeting 2, 22 Oct 2026)
   site/india_gate3d.py · assets/js/lmk-io.js · assets/js/lmk-gate3d.js
   Additive to assets/css/landmarks.css (palette, drawing classes, .lmk copy).

   1. india d / e / f: the figure's rise (landmarks.css lm-rise / lm-in) waits
      until the figure enters the viewport — lmk-io.js sets data-io="in".
      Only where scripting is on (no JS = the old first-paint rise).
   2. india f: the 3D India Gate (canvas over the d/e drawing, which is the
      static fallback and the LCP) with the services floating around it as
      plain links. >= 1100px the links sit around the monument; below that
      the figure (cropped to the gate) and the links under it, so the
      headline and the whole gate share the phone's first screen.
   Motion: transform / opacity only; none under prefers-reduced-motion.
   ========================================================================== */

/* ── 1. the rise starts in view ─────────────────────────────────────── */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .lmk[data-scene="india"]:not([data-io="in"]) :is(.lm-t, .lm-brk, .lmk__pill, .lmk__th, .ig3__li) { animation-play-state: paused; }
}

/* ── 2. option f ─────────────────────────────────────────────────────── */
.ig3__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  grid-template-areas: "head scene" "body scene"; grid-template-rows: auto auto; column-gap: clamp(28px, 3.4vw, 60px);
  align-content: center; min-height: calc(88svh - var(--head-h)); }
.ig3__head { grid-area: head; align-self: end; max-width: 540px; }
.ig3__body { grid-area: body; align-self: start; max-width: 540px; }
.ig3__scene { grid-area: scene; align-self: center; position: relative; min-width: 0; }
.ig3__stage { position: relative; }
.ig3__frame { position: relative; aspect-ratio: 600 / 640; }
.ig3__art { position: absolute; inset: 0; }
.ig3__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ig3__gl { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .9s var(--ease); }
.ig3__gl canvas { display: block; width: 100% !important; height: 100% !important; }
/* the 3D gate replaces the drawn one (same box, same footprint); sky, sun, trees and lawn stay drawn */
.ig3--gl .ig3__gl { opacity: 1; }
.ig3 .ig3__svg .lm-t { transition: opacity .9s var(--ease); }
.ig3--gl .ig3__svg .lm-t { opacity: 0; }

/* the links: plain pills, tinted by phase (no dots, lines or labels) */
.ig3__links { list-style: none; margin: 0; padding: 0; }
.ig3__li { animation: ig3-in .6s var(--ease) backwards; animation-delay: calc(.85s + var(--i) * .035s); }
.ig3__pill { display: inline-flex; align-items: center; min-height: 32px; padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--lm-pill); background: color-mix(in srgb, var(--tc) 6%, var(--lm-pill));
  border: 1px solid rgba(var(--dark-rgb), .07); border-color: color-mix(in srgb, var(--tc) 26%, transparent);
  box-shadow: 0 8px 18px -6px rgba(var(--dark-rgb), .16), 0 1px 2px rgba(var(--dark-rgb), .06);
  font: 500 12.5px/1.15 Inter, sans-serif; letter-spacing: .005em; color: var(--ink); white-space: nowrap; text-decoration: none;
  animation: ig3-float var(--fd, 6s) ease-in-out var(--fo, 0s) infinite;
  transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
a.ig3__pill:hover, a.ig3__pill:focus-visible { background: #fff; color: var(--bronze-deep); border-color: color-mix(in srgb, var(--tc) 55%, transparent);
  box-shadow: 0 12px 24px -8px rgba(var(--dark-rgb), .24), 0 1px 2px rgba(var(--dark-rgb), .08); animation-play-state: paused; }
a.ig3__pill:focus-visible { outline: 2px solid var(--bronze-bright); outline-offset: 3px; }
@keyframes ig3-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ig3-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (min-width: 1100px) {
  .ig3__links { position: absolute; inset: 0; pointer-events: none; }
  .ig3__li { position: absolute; top: var(--y); translate: 0 -50%; pointer-events: auto; }
  .ig3__li[data-side="l"] { right: calc(100% - var(--x)); }
  .ig3__li[data-side="r"] { left: var(--x); }
  .ig3__li[data-side="c"] { left: var(--x); translate: -50% -50%; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .ig3__pill { font-size: 11.5px; padding: 6px 11px; min-height: 28px; }
}
@media (max-width: 1099px) {
  .ig3__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "scene" "body"; min-height: 0; row-gap: 18px; }
  .ig3__head, .ig3__body { max-width: 640px; }
  .ig3__scene { width: 100%; max-width: 600px; margin: 0 auto; }
  /* the gate, cropped to it: viewBox x 60–540, y 180–640; the sky dissolves upward into the page */
  .ig3__frame { aspect-ratio: 480 / 460; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 15%); mask-image: linear-gradient(to bottom, transparent 0, #000 15%); }
  .ig3__art { inset: auto; left: -12.5%; top: -39.13%; width: 125%; height: 139.13%; }
  .ig3__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 8px; margin-top: 14px; }
  .ig3__li[data-tier="2"]:not([data-tier="2"] ~ [data-tier="2"]), .ig3__li[data-tier="3"]:not([data-tier="3"] ~ [data-tier="3"]) { margin-left: 10px; }
  .ig3__pill { min-height: 34px; padding: 8px 13px; font-size: 13px; }
  @keyframes ig3-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
}
@media (max-width: 600px) {
  .ig3__grid { row-gap: 14px; }
  .ig3 h1.display-lg { font-size: clamp(2rem, 8.4vw, 2.4rem); }
  .ig3__pill { white-space: normal; font-size: 12.5px; padding: 7px 12px; min-height: 32px; }
  .ig3__links { gap: 8px 7px; }
}

/* ── 3. india d / e on tablets (601-1099): headline, the WHOLE gate, then the lede, actions, proof and the services
   (QA 22 Oct 2026: at 768 and 1024 the gate sat entirely below the first screen). The copy, scene and stage boxes
   dissolve so their parts can be ordered; the drawing is sized by the screen height (viewBox 600 x 640), no crop.
   180px = crumb + eyebrow + headline. ─────────────────────────────────────────────────────────────────────── */
@media (min-width: 601px) and (max-width: 1099px) {
  .lmk[data-scene="india"]:not(.ig3) .lmk__grid { row-gap: 0; }
  .lmk[data-scene="india"]:not(.ig3) :is(.lmk__copy, .lmk__scene, .lmk__stage) { display: contents; }
  .lmk[data-scene="india"]:not(.ig3) .phero__crumb { order: 1; }
  .lmk[data-scene="india"]:not(.ig3) .lmk__copy > .stack-sm { order: 2; }
  .lmk[data-scene="india"]:not(.ig3) .lmk__svg { order: 3; justify-self: center; margin: 18px 0 0;
    --ih: max(340px, calc(100svh - var(--head-h) - clamp(28px, 4vw, 56px) - 180px - var(--mb) - 30px));
    width: min(100%, calc(var(--ih) * .9375)); }
  .lmk[data-scene="india"]:not(.ig3) .lmk__lede { order: 4; }
  .lmk[data-scene="india"]:not(.ig3) .lmk__acts { order: 5; }
  .lmk[data-scene="india"]:not(.ig3) .lmk__proof { order: 6; }
  .lmk[data-scene="india"]:not(.ig3) .lmk__tiers { order: 7; margin-top: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .ig3__li, .ig3__pill { animation: none; }
  .ig3__gl, .ig3 .ig3__svg .lm-t { transition: none; }
}