/* Neutral, full-height color panels: source sections keep all their geometry. */
[data-component-name="hero"] { --stack-order: 0; }
[data-component-name="landing-scroll-panel"][data-scroll-panel="base"] { --stack-order: 1; }
[data-component-name="landing-scroll-panel"][data-scroll-panel="planning"] { --stack-order: 2; }
[data-component-name="landing-scroll-panel"][data-scroll-panel="operations"] { --stack-order: 3; }
[data-component-name="landing-scroll-panel"][data-scroll-panel="closing"] { --stack-order: 4; }

/* clip, unlike hidden, does not turn main into a separate scrolling ancestor.
   Tall panels scroll completely before their bottom edge pins; the following
   color then moves over them using native scrolling, in either direction.
   No JS/unsupported browser/reduced motion: ordinary source document flow. */
@supports (position: sticky) and (overflow: clip) {
  @media (prefers-reduced-motion: no-preference) {
    #main[data-stack-ready="true"] {
      overflow: clip;
      isolation: isolate;
    }
    #main[data-stack-ready="true"] > [data-component-name="hero"],
    #main[data-stack-ready="true"] > [data-component-name="landing-scroll-panel"] {
      position: sticky;
      top: var(--stack-offset, 0px);
      z-index: var(--stack-order);
    }
    /* The source reserves this curve's height in hero's final grid row.
       Keep that row intact, but paint its identical edge on the incoming card
       so the rounded lip travels with it instead of staying on the video. */
    #main[data-stack-ready="true"] > [data-component-name="hero"]::after {
      background-color: transparent;
      box-shadow: none;
    }
    #main[data-stack-ready="true"] > [data-scroll-panel="base"]::before {
      content: "";
      position: absolute;
      bottom: calc(100% - 1px);
      left: 0;
      right: 0;
      height: var(--space-3xl);
      border-radius: 3rem 3rem 0 0;
      background-color: #02090a;
      box-shadow: 0 1px 0 0 #272c3166 inset;
      pointer-events: none;
    }
    /* Retain the source's shared one-pixel section seams at new group edges. */
    #main[data-stack-ready="true"] > [data-component-name="landing-scroll-panel"]:not(:last-child) {
      margin-bottom: -1px;
    }
    /* No following card needs to cover the last panel. Its normal-flow origin
       also provides a stable reference for section-link navigation. */
    #main[data-stack-ready="true"] > [data-component-name="landing-scroll-panel"]:last-child {
      position: relative;
      top: auto;
    }
  }
}