/* MAPFX — the descent. Pair with mapfx.js.
   One montage stretched across a page navigation: it covers the load,
   pushes into the deepest tile, and hands off to the page scaling up
   out of it. */

.mapfx-curtain {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #0E1219;
  pointer-events: none;
  will-change: opacity;
}

.mapfx-curtain canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* nothing moves underneath while the curtain is up */
html.mapfx-curtain-open,
html.mapfx-curtain-open body {
  overflow: hidden;
}

/* The landing. The map is still pushing outward when this starts, so the
   page has to travel the SAME way — growing into place, not shrinking into
   it. Scaling down from 1.07 (which is what this used to do) reverses the
   direction mid-move and is what made the arrival feel like a stumble.
   Same easing as the canvas push, started on the same frame, so the two
   read as one deceleration. */
/* 1050ms and easeOutCubic — identical to the canvas push in mapfx.js, and
   started on the same frame. Change one, change the other, or the dissolve
   stops being invisible. The page is fully opaque by 40%, before the curtain
   starts to lift, so what you see across the seam is one move, not a fade. */
html.mapfx-landing body > *:not(.mapfx-curtain) {
  animation: mapfx-land 1050ms cubic-bezier(.215, .61, .355, 1) both;
  will-change: transform, opacity;
}

@keyframes mapfx-land {
  from { opacity: 0; transform: scale(.94); }
  26%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mapfx-curtain { display: none; }
  html.mapfx-landing body > *:not(.mapfx-curtain) { animation: none; }
  html.mapfx-curtain-open,
  html.mapfx-curtain-open body { overflow: auto; }
}