/* The heat belongs to the geography; only this presentation veil fades it.
   No grid-shaped clipping and no extra interactive surface over the page. */
.heat-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: var(--heat-opacity, .9);
  mask-image: radial-gradient(ellipse var(--heat-reach-x, 80vw) var(--heat-reach-y, 100vh) at var(--heat-x, 30vw) var(--heat-y, 50vh), #000 18%, rgba(0, 0, 0, var(--heat-shoulder, .24)) 64%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse var(--heat-reach-x, 80vw) var(--heat-reach-y, 100vh) at var(--heat-x, 30vw) var(--heat-y, 50vh), #000 18%, rgba(0, 0, 0, var(--heat-shoulder, .24)) 64%, transparent 100%);
  transition: opacity .8s ease;
}
.heat-field[hidden] { display: none; }
/* A scrolling page anchors the canvas to the document so the heat scrolls with the
   map; heat-field.js sizes it in px. Its fixed twin fades in behind the rest of the
   page by scroll position, which must not be smoothed (a fade has nothing to lag). */
.heat-field--page { position: absolute; inset: auto; top: 0; left: 0; width: auto; height: auto; }
.heat-field--backdrop { inset: auto; top: 0; left: 0; width: auto; height: auto; transition: none; }
/* The wave: one fixed canvas, no mask (heat-field.js vignettes each cell itself so the
   hero keeps its soft edge and the ember state can cover the page). It follows the map
   up by --heat-park, easing to a stop, then stays behind the page. Without scroll-linked
   animation the script does the same move. */
.heat-field--wave { transition: none; mask-image: none; -webkit-mask-image: none; inset: auto; top: 0; left: 0; width: auto; height: auto; will-change: transform; }
@supports (animation-timeline: scroll()) {
  .heat-field--native-park {
    animation: heat-park linear both;
    animation-timing-function: cubic-bezier(.3333, .6667, .6667, 1);
    animation-timeline: scroll(root block);
    animation-range: 0px calc(var(--heat-park, 0px) * 2);
  }
}
/* Fallback value is set by the script; scroll-linked animation takes over where supported. */
.heat-handoff { opacity: var(--heat-handoff, 1); }
@supports (animation-timeline: scroll()) {
  .heat-handoff {
    animation: heat-handoff ease-in-out both;
    animation-timeline: scroll(root block);
    animation-range: 0px calc(max(var(--heat-park, 0px), 120px) * 1.4);
  }
}
/* Once handed over, the map's controls are not just invisible: they cannot be tapped or focused. */
@keyframes heat-handoff { to { opacity: 0; visibility: hidden; } }
.heat-handoff-done .heat-handoff { visibility: hidden; }
@keyframes heat-park { to { transform: translate3d(0, calc(var(--heat-park, 0px) * -1), 0); } }
body:has(.is-earth-flight) > .heat-field { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .heat-field { transition: none; } }