.sheet.sheet--silenced{animation:none;opacity:0;}

.modal.is-tearing > .sheet,
.modal.is-porting > .sheet{visibility:hidden;}

.modal.is-tearing,
.modal.is-porting{pointer-events:none;overflow:hidden;}

.modal.is-tearing{animation:sheet-close-fade 660ms linear both;}
.modal.is-porting{animation:sheet-close-fade 1200ms linear both;}

@keyframes sheet-close-fade{
  0%{opacity:1;}
  96%{opacity:1;}
  100%{opacity:0;}
}

.tear,
.portal{
  position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden;
}

.tear__half{
  position:fixed;
  top:var(--sc-top);left:var(--sc-left);
  width:var(--sc-w);height:var(--sc-h);
  margin:0;overflow:hidden;
  contain:paint;
  transform-origin:50% 50%;
  will-change:transform,opacity;
  backface-visibility:hidden;
}

.tear__half > .sheet{
  position:absolute;left:0;top:var(--sc-crop);
  width:var(--sc-w);margin:0;
  animation:none !important;opacity:1;
}

.tear__half--left{animation:tear-drift-left 660ms cubic-bezier(.22,.68,.3,1) both;}
.tear__half--right{animation:tear-drift-right 660ms cubic-bezier(.22,.68,.3,1) both;}

@keyframes tear-drift-left{
  0%{opacity:1;transform:scale(var(--sc-fit)) translate3d(0,0,0) rotate(0);}
  10%{opacity:1;transform:scale(var(--sc-fit)) translate3d(-4%,-.4%,0) rotate(-2deg);}
  55%{opacity:.92;transform:scale(calc(var(--sc-fit) * .93)) translate3d(-46%,3%,0) rotate(-9deg);}
  100%{
    opacity:0;
    transform:scale(calc(var(--sc-fit) * .82)) translate3d(-104%,8%,0) rotate(var(--tear-spin));
  }
}

@keyframes tear-drift-right{
  0%{opacity:1;transform:scale(var(--sc-fit)) translate3d(0,0,0) rotate(0);}
  10%{opacity:1;transform:scale(var(--sc-fit)) translate3d(4%,-.4%,0) rotate(2deg);}
  55%{opacity:.92;transform:scale(calc(var(--sc-fit) * .93)) translate3d(46%,3%,0) rotate(9deg);}
  100%{
    opacity:0;
    transform:scale(calc(var(--sc-fit) * .82)) translate3d(104%,7%,0) rotate(var(--tear-spin));
  }
}

@media(prefers-reduced-motion:reduce){
  .modal.is-tearing,
  .modal.is-porting,
  .tear__half{animation:none !important;}
  .tear{display:none;}
}

@media print{
  .modal.is-tearing,
  .modal.is-porting,
  .tear__half{animation:none !important;}
  .tear{display:none;}
}

.is-capture .modal.is-tearing,
.is-capture .modal.is-porting,
.is-capture .tear__half{animation:none !important;}

.is-capture .tear{display:none;}