.motion-preview .site-shell {
  overflow: visible;
}

/* Full-width sheets keep the current content widths and vertical spacing. */
.motion-preview main > section {
  position: relative;
  isolation: isolate;
  --section-paper: var(--paper);
}

.motion-preview main > section::before {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, rgba(25, 25, 24, 0.035) 1px, transparent 1px) 0 0 / 96px 96px,
    var(--section-paper);
  content: "";
  pointer-events: none;
}

.motion-preview #fit {
  --section-paper: #e7ebe5;
}

.motion-preview #fees {
  --section-paper: #e8e5e1;
}

.motion-preview #contact {
  --section-paper: #e7ebe5;
}

.motion-preview .section > * {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 620ms ease,
    transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
}

.motion-preview .section > :nth-child(2) {
  transition-delay: 70ms;
}

.motion-preview .section.is-waiting > * {
  opacity: 0;
  transform: translateY(28px);
}

.motion-preview .section:target > *,
.motion-preview .section:focus-within > * {
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

@media (max-width: 700px) {
  .motion-preview .section > * {
    transition-duration: 450ms, 520ms;
  }

  .motion-preview .section.is-waiting > * {
    transform: translateY(18px);
  }

  .motion-preview .section:target > *,
  .motion-preview .section:focus-within > * {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce), print {
  .motion-preview .section > *,
  .motion-preview .section.is-waiting > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}