.page-transition{
  --transition-edge:clamp(120px,17.96875vw,345px);
  position:fixed;
  inset:0;
  z-index:200;
  overflow:hidden;
  visibility:hidden;
  pointer-events:none;
  touch-action:none;
}
.page-transition.is-active{visibility:visible;pointer-events:auto}
.transition-curtain{
  position:absolute;
  inset:0;
  transform:translate3d(0,calc(100% + var(--transition-edge)),0);
}
.transition-curtain::before,.transition-curtain::after{
  content:'';
  position:absolute;
  left:0;
  width:100%;
  height:var(--transition-edge);
  background-position:center bottom;
  background-size:auto 100%;
  background-repeat:repeat-x;
}
.transition-curtain::before{bottom:calc(100% - 1px)}
.transition-curtain::after{top:calc(100% - 1px);transform:scaleY(-1)}
.transition-curtain--red{background:#b20b0f}
.transition-curtain--red::before,.transition-curtain--red::after{background-image:url('/assets/transition-edge-red.png')}
.transition-curtain--black{background:#000}
.transition-curtain--black::before,.transition-curtain--black::after{background-image:url('/assets/transition-edge-black.png')}
.transition-blocks{position:absolute;inset:0;pointer-events:none}
.transition-block{position:absolute;background:#b20b0f;opacity:0;box-shadow:inset 0 2px #c12124,inset 0 -2px #960d10;transform-origin:50% 100%}
.transition-logo{
  position:absolute;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  opacity:0;
  transform:scale(.96);
}
.transition-logo>.source-image{width:clamp(180px,20.25vw,345px);max-width:75vw}
.page-transition.is-covered .transition-curtain{transform:translate3d(0,0,0)}
.page-transition.is-covered .transition-logo{opacity:1;transform:scale(1)}
html.is-transitioning{overflow:hidden;scroll-behavior:auto}
@media(prefers-reduced-motion:reduce){.page-transition{display:none}}