/* Home page, "Four services. One team.", while the scroll drives the 3D
   diagram (story-scrub.js adds .story--scrub on desktop with the 3D view).

   The section pins under the header as one full screen: the diagram on one
   side, the services as a compact list on the other. Scrolling on moves the
   diagram from view to view and glides the list along with it. The section's
   extra height is only that scrolling room (about 60% of a screen per
   motion); it never shows as empty space, because the screen stays pinned
   through it. */
.section.story.story--scrub {
  --scrub-room: clamp(320px, 60vh, 680px);
  height: calc(100vh - var(--header-h) + var(--scrub-room) * 6);
  padding-block: 0;
}

.story--scrub .story-grid {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  overflow: clip;
}

.story--scrub .story-stage {
  position: relative;
  top: auto;
}

/* The list keeps its normal spacing; story-scrub.js slides it. */
.story--scrub .story-text {
  position: relative; /* the services' positions are measured from here */
  align-self: start;
  padding-block: clamp(28px, 7vh, 72px);
  will-change: transform;
}

.story--scrub .story-step,
.story--scrub .story-step[data-maquette-step="network"],
.story--scrub .story-text .vendors {
  min-height: 0;
  transition: opacity .45s ease;
}

/* The service in view stays clear; the others step back. */
.story--scrub.is-stepping .story-step:not(.is-current),
.story--scrub.is-stepping .story-text .vendors {
  opacity: .38;
}

/* Soft edges where the list slides under the header and off the bottom. */
.story--scrub .story-grid::before,
.story--scrub .story-grid::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  z-index: 1;
  height: clamp(24px, 6vh, 56px);
  pointer-events: none;
}

.story--scrub .story-grid::before {
  top: 0;
  background: linear-gradient(var(--c-surface), transparent);
}

.story--scrub .story-grid::after {
  bottom: 0;
  background: linear-gradient(transparent, var(--c-surface));
}