:root{
  --page-transition-duration:1000ms;
  --page-transition-canvas:#3c3f3d;
  --page-transition-canvas-image:
    linear-gradient(180deg,rgba(255,255,255,.018),transparent 50%,rgba(0,0,0,.025)),
    linear-gradient(90deg,#363937 0 20%,#393c3a 20% 40%,#3c3f3d 40% 60%,#3f4240 60% 80%,#424543 80% 100%);
  background-color:var(--page-transition-canvas);
  background-image:var(--page-transition-canvas-image);
  background-repeat:no-repeat;
  background-position:0 0;
  background-size:100% 100%;
  background-attachment:fixed;
}

html.page-transition-enabled.page-transition-booting,
html.page-transition-enabled.page-transition-leaving{
  background-color:var(--page-transition-canvas);
}

html.page-transition-enabled.page-transition-booting body{
  opacity:0;
}

.page-transition{
  position:fixed;
  z-index:24;
  inset:0;
  overflow:hidden;
  pointer-events:auto;
  contain:strict;
}

.page-transition__row{
  position:absolute;
  left:-2px;
  width:calc(100% + 4px);
  height:calc(50% + 6px);
  display:flex;
}

.page-transition__row--top{top:0}
.page-transition__row--bottom{bottom:0}

.page-transition__block{
  --block-tone:#3c3f3d;
  flex:1 1 20%;
  min-width:0;
  margin-right:-.5px;
  margin-left:-.5px;
  background-color:var(--block-tone);
  transform:translate3d(0,0,0) scaleY(1);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transition-property:transform;
  transition-duration:var(--page-transition-duration);
  will-change:transform;
}

.page-transition__block:nth-child(1){--block-tone:#363937}
.page-transition__block:nth-child(2){--block-tone:#393c3a}
.page-transition__block:nth-child(3){--block-tone:#3c3f3d}
.page-transition__block:nth-child(4){--block-tone:#3f4240}
.page-transition__block:nth-child(5){--block-tone:#424543}

.page-transition__row--top .page-transition__block{
  transform-origin:top center;
  background-image:linear-gradient(180deg,rgba(255,255,255,.018),transparent);
}

.page-transition__row--bottom .page-transition__block{
  transform-origin:bottom center;
  background-image:linear-gradient(180deg,transparent,rgba(0,0,0,.025));
}

.page-transition--entry .page-transition__block{
  transition-delay:var(--reveal-delay);
  transition-timing-function:cubic-bezier(.87,0,.13,1);
}

.page-transition--entry.is-revealing .page-transition__block{
  transform:translate3d(0,0,0) scaleY(0);
}

.page-transition--exit .page-transition__block{
  transform:translate3d(0,0,0) scaleY(0);
  transition-delay:var(--cover-delay);
  transition-timing-function:cubic-bezier(.16,1,.3,1);
}

.page-transition--exit.is-covering .page-transition__block{
  transform:translate3d(0,0,0) scaleY(1);
}

/* Seal the last covered frame before the browser replaces the document. */
.page-transition--exit.is-locked{
  background-color:var(--page-transition-canvas);
  background-image:var(--page-transition-canvas-image);
  background-repeat:no-repeat;
  background-position:0 0;
  background-size:100% 100%;
}

@media(prefers-reduced-motion:reduce){
  html.page-transition-enabled.page-transition-booting body{opacity:1}
  .page-transition{display:none}
}