html.page-transition-pending,
html.page-transition-pending body {
  background: #fff;
}

html.page-transition-pending::before {
  position: fixed;
  z-index: 1400;
  inset: 0;
  display: block;
  content: '';
  background: #fff;
}

.check6ix-page-transition {
  position: fixed;
  z-index: 1350;
  inset: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  pointer-events: all;
  isolation: isolate;
  contain: layout paint;
}

.check6ix-page-transition__tiles {
  --tile: 170px;
  --cols: 8;
  --rows: 6;
  --wave-step: 48ms;
  position: absolute;
  inset: calc(-1 * var(--tile));
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--tile));
  grid-template-rows: repeat(var(--rows), var(--tile));
}

.check6ix-page-transition__tile {
  display: block;
  margin: -1.5px;
  background: #fff;
  transform: skewX(-8deg) scaleX(1.04);
  transform-origin: left center;
}

.check6ix-page-transition--outgoing .check6ix-page-transition__tile {
  transform: skewX(-8deg) scaleX(0);
}

.check6ix-page-transition--outgoing.is-animating .check6ix-page-transition__tile,
.check6ix-page-transition--incoming.is-revealing .check6ix-page-transition__tile {
  transition: transform 250ms cubic-bezier(.16, .78, .3, 1);
  transition-delay: calc(var(--wave) * var(--wave-step) + var(--parity) * 70ms + var(--row) * 4ms);
}

.check6ix-page-transition--outgoing.is-animating .check6ix-page-transition__tile {
  transform: skewX(-8deg) scaleX(1.04);
}

.check6ix-page-transition--incoming.is-revealing .check6ix-page-transition__tile {
  transform: skewX(-8deg) scaleX(0);
}

@media (prefers-reduced-motion: reduce) {
  html.page-transition-pending::before,
  .check6ix-page-transition {
    display: none !important;
  }
}