/* ==========================================================================
   USAIndiaCFO — v27 · home-window.css
   "The window": the REAL Insights Constellation, embedded, as the
   homepage's main motion.

   The iframe (/constellation/?embed=1) is laid out at the FULL stage size,
   always — so the open state is the page itself, pixel for pixel. The card
   is that same full-size frame scaled DOWN (scale <= 1) with a radius, the
   slab's lip and the clay cast shadow. Two gestures, each one continuous
   motion: open + reveal (card -> full viewport while the iframe plays its
   reveal), then cover + close + glide (the iframe covers while the frame
   shrinks back into the card and the page glides on to the next section).

   Mechanics:
     · the section is a 3-stage-tall track with a sticky 100svh stage; its
       three stops (card · revealed · card) are scroll positions (section
       top + k * stage height), so the scrollbar and back-navigation stay
       meaningful — js/home-window.js drives the scroll.
     · .win__frame carries the transform (perspective / rise / rotateX /
       scale <= 1) and a clip-path for the radius (and, below 940px, the
       vertical crop that keeps the card between the header and the bar).
       At rest in the open state the transform is "none" and will-change is
       off, so the browser rasterises the iframe at 1:1.
     · the cast shadow and the lip are authored for the card (their px are
       divided by --s0, the card scale) and simply fade as the card opens.
   JS: js/home-window.js. Design tokens: css/clay.css (not edited).
   ========================================================================== */

.win {
  position: relative;
  height: 100svh;                       /* JS sets the pinned track length */
  --s0: .72;                            /* card scale, written by JS */
  --cy: 0px;                            /* card crop (frame px), written by JS */
}
.win__stage {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
}
.win__rise { position: absolute; inset: 0; }

/* ── the slab: the full-size frame, scaled down ───────────────────────── */
.win__frame, .win__shadow {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  transform-origin: 50% 50%;
  /* no-JS / first paint: the card at rest (JS takes over) */
  transform: perspective(1400px) translate3d(0, 44px, 0) rotateX(7deg) scale(var(--s0));
}
.win__frame {
  background: #f2efe7;                  /* the constellation's own ground */
  overflow: hidden;
  isolation: isolate;
}
.win--moving .win__frame, .win--moving .win__shadow { will-change: transform; }

.win__embed {
  display: block; width: 100%; height: 100%; border: 0;
  background: #f2efe7;
  pointer-events: none;                 /* the page scrolls around the card */
}
.win--live .win__embed { pointer-events: auto; }   /* revealed: hover, click, drag, zoom */

/* the cast — only the cast; on screen it is --clay-lg's, so its px are
   authored at card scale (divided by --s0). It sits ABOVE the frame: an
   outer box-shadow paints only outside its box, so it falls on the corner
   caps exactly as it would on the ground. */
.win__shadow {
  top: var(--cy); bottom: var(--cy); height: auto;
  pointer-events: none;
  border-radius: calc(var(--r-xl) / var(--s0));
  box-shadow:
    calc( 3px / var(--s0)) calc( 5px / var(--s0)) calc( 8px / var(--s0)) rgba(var(--shade), .07),
    calc(10px / var(--s0)) calc(18px / var(--s0)) calc(28px / var(--s0)) rgba(var(--shade), .12),
    calc(23px / var(--s0)) calc(38px / var(--s0)) calc(60px / var(--s0)) rgba(var(--shade), .11);
  will-change: opacity;
}

/* the lip: thickness, top hairline and the pointer's light, on the card's rect */
.win__edge {
  position: absolute; left: 0; right: 0; top: var(--cy); bottom: var(--cy); z-index: 2;
  pointer-events: none;
  border-radius: calc(var(--r-xl) / var(--s0));
  will-change: opacity;                 /* its own layer: fading it repaints nothing */
  box-shadow: inset 0 calc(-5px / var(--s0)) calc(10px / var(--s0)) rgba(var(--shade), .11),
              inset 0 calc( 1px / var(--s0)) calc( 1px / var(--s0)) rgba(255, 255, 255, .65);
}
/* a ring that catches a warm light where the pointer is — the lip of the
   slab picking up bronze, only while the slab is a slab */
.win__edge::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: calc(2px / var(--s0));
  background: radial-gradient(calc(300px / var(--s0)) calc(300px / var(--s0)) at var(--mx, 50%) var(--my, -30%),
              rgba(216, 162, 74, .9), rgba(216, 162, 74, 0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: var(--lit, 0);
  transition: opacity .5s var(--ease);
}

/* the rounded corners: four ground-coloured caps (colour sampled from the
   page's fixed --ground at each corner by JS), scaled to nothing as the card
   opens — a transform, so the radius animates without repainting a mask */
.win__cap {
  --rm: calc(var(--r-xl) / var(--s0));
  position: absolute; z-index: 3; display: block;
  width: var(--rm); height: var(--rm);
  pointer-events: none;
  will-change: transform;
}
.win__cap--tl { left: 0; top: var(--cy); transform-origin: 0 0;
  background: radial-gradient(circle at 100% 100%, transparent calc(var(--rm) - 1px), var(--c, #f3f0e8) var(--rm)); }
.win__cap--tr { right: 0; top: var(--cy); transform-origin: 100% 0;
  background: radial-gradient(circle at 0 100%, transparent calc(var(--rm) - 1px), var(--c, #f3f0e8) var(--rm)); }
.win__cap--bl { left: 0; bottom: var(--cy); transform-origin: 0 100%;
  background: radial-gradient(circle at 100% 0, transparent calc(var(--rm) - 1px), var(--c, #f3f0e8) var(--rm)); }
.win__cap--br { right: 0; bottom: var(--cy); transform-origin: 100% 100%;
  background: radial-gradient(circle at 0 0, transparent calc(var(--rm) - 1px), var(--c, #f3f0e8) var(--rm)); }

/* ── the stage's own control: "Open the full map" ──────────────────────── */
.win__ui {
  position: absolute; z-index: 4;
  top: 100px; right: var(--gutter);
  display: flex; align-items: center; gap: 10px;
  transition: transform .6s var(--ease);
}
.win--open .win__ui { transform: translate3d(0, -76px, 0); }   /* the header has gone */

.win__open {
  display: inline-flex; align-items: center;
  height: 38px; border-radius: var(--r-pill);
  /* opaque, no backdrop blur: it sits over a moving map */
  background: linear-gradient(178deg, #fbf9f4 0%, #f0ebe1 100%);
  box-shadow: var(--clay-sm);
}
.win__open {
  gap: 8px; padding: 0 16px 0 18px;
  font: 500 12.5px/1 Inter, sans-serif; letter-spacing: .02em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease);
}
.win__open svg { color: #a8762f; transition: transform .3s var(--ease); }
.win__open:hover { color: var(--ink); transform: translate3d(-1px, -2px, 0); box-shadow: var(--clay-md); }
.win__open:hover svg { transform: translate3d(1px, -1px, 0); }
.win__open:active { transform: none; box-shadow: var(--clay-in); }

/* ── while the frame is the viewport, the site chrome steps aside ──────── */
html.win-chrome .hdr {
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease),
              backdrop-filter .4s var(--ease), height .4s var(--ease),
              transform .6s var(--ease);
}
html.win-chrome .mbar { transition: transform .6s var(--ease); }
html.win-immersive .hdr { transform: translate3d(0, calc(-100% - 56px), 0); }
html.win-immersive .mbar { transform: translate3d(0, calc(100% + 40px), 0); }

/* ── small screens: no perspective; the card is the full width minus the
      gutter, cropped (--cy) to sit between the header and the bottom bar ── */
@media (max-width: 940px) {
  .win__frame, .win__shadow { transform: translate3d(0, 30px, 0) scale(var(--s0)); }
  .win__frame { clip-path: inset(var(--cy) 0 var(--cy) 0 round calc(var(--r-xl) / var(--s0))); }
  .win__cap { display: none; }          /* the crop's clip-path rounds the corners here */
  .win__edge::after { display: none; }
  .win__ui { top: 94px; }
  .win--open .win__ui { transform: translate3d(0, -76px, 0); }
  .win__open { padding: 0 14px 0 15px; font-size: 12px; }
}

/* ── reduced motion: the card, standing still; nothing pinned ─────────── */
.win--static { height: auto; }
.win--static .win__stage { position: relative; }