/* Seven staggered strips with borderless, subtly alternating tones for white pages. */
html.fpt-arriving:not(.fpt-ready) {
  background: var(--fpt-color, #fafafa) !important;
}
html.fpt-arriving:not(.fpt-ready) body {
  visibility: hidden !important;
}
html.fpt-arriving.fpt-ready body {
  visibility: visible !important;
}

.fpt-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483646 !important;
  display: flex !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background: transparent !important;
  isolation: isolate;
}
.fpt-strip {
  position: relative;
  display: block !important;
  box-sizing: border-box !important;
  flex: 0 0 calc(100% / 7 + 1px) !important;
  height: 100% !important;
  margin: 0 -1px 0 0 !important;
  background: var(--fpt-color, #fafafa) !important;
  will-change: transform;
  backface-visibility: hidden;
}
.fpt-strip:nth-child(even)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(50, 55, 50, .045);
}
.fpt-overlay--exit .fpt-strip {
  transform: translate3d(0, var(--fpt-start-y), 0);
  transition: transform var(--fpt-cover-time, 550ms) cubic-bezier(.76, 0, .19, 1) var(--fpt-delay, 0ms);
}
.fpt-overlay--exit.is-covering .fpt-strip {
  transform: translate3d(0, 0, 0);
}
.fpt-overlay--arrival .fpt-strip {
  transform: translate3d(0, 0, 0);
  transition: transform var(--fpt-reveal-time, 610ms) cubic-bezier(.74, 0, .18, 1) var(--fpt-delay, 0ms);
}
.fpt-overlay--arrival.is-revealing .fpt-strip {
  transform: translate3d(0, var(--fpt-start-y), 0);
}

@media (prefers-reduced-motion: reduce) {
  .fpt-strip { transition: none !important; }
  html.fpt-arriving:not(.fpt-ready) body { visibility: visible !important; }
}
