/* Pariplex page transition: this overlay is deliberately opt-in so a page
   without the bootstrap script can never be obscured. */
html.page-loading {
  overflow: hidden;
}

#page-loader {
  --travel: 0;
  --reveal-duration: 700ms;
  --track-y: clamp(11px, 1.1vw, 14px);
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  display: none;
  overflow: hidden;
  isolation: isolate;
  pointer-events: all;
  background: transparent;
  opacity: 1;
}

html.page-loading #page-loader {
  display: block;
}

#page-loader[hidden] {
  display: none !important;
}

.loader-curtain--top,
.loader-curtain--bottom {
  position: absolute;
  z-index: 3;
  left: 0;
  width: 100%;
  background: #fff;
  will-change: transform;
}

.loader-curtain--top {
  top: 0;
  height: calc(50% + var(--track-y));
  transform-origin: right bottom;
}

.loader-curtain--bottom {
  bottom: 0;
  height: calc(50% - var(--track-y));
  transform-origin: right top;
}

.loader-truck {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 0;
  width: clamp(92px, 8.6vw, 110px);
  line-height: 0;
  transform: translate3d(calc(-8.25rem + (100vw + 16.5rem) * var(--travel)), -50%, 0);
  will-change: transform;
}

.loader-truck::after {
  position: absolute;
  right: 14%;
  bottom: -7px;
  left: 10%;
  height: 8px;
  content: "";
  opacity: 0.22;
  filter: blur(3px);
  border-radius: 50%;
  background: #06101d;
}

.loader-truck img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

#page-loader.is-revealing {
  pointer-events: none;
}

#page-loader.is-revealing .loader-curtain--top {
  transform: translate3d(0, calc(-100% - 32px), 0) rotate(-2.5deg);
  transition: transform var(--reveal-duration) cubic-bezier(0.65, 0, 0.2, 1);
}

#page-loader.is-revealing .loader-curtain--bottom {
  transform: translate3d(0, calc(100% + 32px), 0) rotate(2.5deg);
  transition: transform var(--reveal-duration) cubic-bezier(0.65, 0, 0.2, 1);
}

.loader-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  #page-loader {
    transition: opacity 120ms linear;
  }

  .loader-truck {
    display: none;
  }

  #page-loader.is-revealing {
    opacity: 0;
  }

  #page-loader.is-revealing .loader-curtain--top,
  #page-loader.is-revealing .loader-curtain--bottom {
    transform: none;
    transition: none;
  }
}