/* Desktop section hand-offs: the incoming paper panel scrolls over the final
   view of the preceding section. Mobile keeps the normal document flow. */
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  html.home-page .magic-home > main {
    isolation: isolate;
  }

  html.home-page .magic-home .magic-tablet,
  html.home-page .magic-home .magic-supply[data-supply-motion="gsap-voyage"] {
    position: relative;
    border-radius: clamp(22px, 2.2vw, 34px) clamp(22px, 2.2vw, 34px) 0 0;
    transform: translateZ(0);
  }

  html.home-page .magic-home .magic-tablet {
    z-index: 4;
    background: #fff;
    box-shadow: 0 -22px 52px rgb(23 49 57 / 14%);
  }

  /* Pin the map as the transport section rises over it. */
  html.home-page .magic-home .home-trade-map-slot {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  html.home-page .magic-home .magic-supply[data-supply-motion="gsap-voyage"] {
    z-index: 5;
    background: var(--magic-paper, #fbfbf8);
    box-shadow: 0 -24px 58px rgb(23 49 57 / 16%);
  }

  html.home-page .magic-home .magic-home-updates {
    position: relative;
    z-index: 6;
  }
}

/* The overview content is always present on its final light surface. A single
   dark cover continues the facts panel visually, then retracts upward to reveal
   copy and artwork together. These styles are JS-gated so no-script, mobile
   and reduced-motion visitors keep the original static presentation. */
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  html.home-page .shift-business-overview.is-overview-reveal-ready {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background: #f3f3ef;
  }

  html.home-page .shift-business-overview .shift-overview-color-reveal {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    pointer-events: none;
    background: #191c1b;
    transform: scaleY(0);
    transform-origin: top center;
    backface-visibility: hidden;
  }

  html.home-page .shift-business-overview.is-overview-reveal-ready > :not(.shift-overview-color-reveal) {
    position: relative;
    z-index: 1;
  }
}