/* Section pager (pager.js). Parked sections stay laid out, because the intro measures the
   hero, but they are hidden and the clip keeps them from adding scroll height. */
.shell { --page-width: 430px; overflow: clip; isolation: isolate; }
[data-page] { position: relative; }
[data-page].is-off,
[data-page].is-leaving { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; }
[data-page].is-off { visibility: hidden; }
/* Keep the actual main at its last viewport position underneath the folders. */
.hero.is-backdrop {
  position: fixed;
  top: var(--main-top, 0px);
  left: 50%;
  width: min(100%, var(--page-width));
  transform: translateX(-50%);
  visibility: visible;
  pointer-events: none;
  z-index: 0;
}
.benefit[data-page] { z-index: 2; }
.hero.is-backdrop .page-cue { animation: none; }
@media (min-width: 1000px) {
  .shell { --page-width: 390px; }
}
@media (max-width: 600px), (hover: none) and (pointer: coarse) {
  .shell { --page-width: 100vw; }
}

/* "next section" hint at the foot of the hero */
.page-cue {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 6px);
  transform: translateX(-50%) translateY(calc(var(--pull, 0) * -16px)); /* rises as the visitor pulls */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  color: #fff;
  font: 13px/1 var(--display);
  letter-spacing: .16em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
  transition: opacity .6s ease .3s;
}
.page-cue svg {
  width: 12px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: cue-bob 1.6s var(--ease) infinite;
}
@keyframes cue-bob {
  0%, 100% { transform: translateY(-3px); opacity: .55; }
  50% { transform: translateY(3px); opacity: 1; }
}
:is(.pre-intro, .is-intro) .page-cue { opacity: 0; pointer-events: none; }