.transition-tweenPlane-in,
.transition-tweenPlane-out,
.transition-tweenPlane-resize {
  --trans-in-dur: 1;
  --trans-out-dur: 1;
  --trans-del: 0;
  --top: 0px;
  --left: 0px;
  --x: 0px;
  --tx: 0px;
  --y: 0px;
  --ty: 0px;
  --sx: 1;
  --tsx: 1;
  --sy: 1;
  --tsy: 1;
  --o: 1;
  --to: 1;
  position: fixed;
  top: var(--top);
  left: var(--left);
}

.transition-tweenPlane-resize {
  pointer-events: all !important;
  visibility: visible !important;
  opacity: var(--to);
  transform: translate(var(--tx), var(--ty)) scale(var(--tsx), var(--tsy)) !important;
  animation: none;
}

.transition-tweenPlane-in {
  pointer-events: all !important;
  visibility: visible !important;
  opacity: var(--o);
  transform: translate(var(--x), var(--y)) scale(var(--sx), var(--sy));
  animation: tweenPlane-in calc(var(--trans-in-dur) * 1s)
    cubic-bezier(0.5, 0, 0.5, 1) calc(var(--trans-del) * 1s) forwards;
}

.transition-tweenPlane-out {
  pointer-events: none;
  visibility: visible !important;
  opacity: var(--to);
  transform: translate(var(--tx), var(--ty)) scale(var(--tsx), var(--tsy));
  animation: tweenPlane-out calc(var(--trans-out-dur) * 1s)
    cubic-bezier(0.5, 0, 0.5, 1) calc(var(--trans-del) * 1s) forwards;
}

@keyframes tweenPlane-in {
  from {
    opacity: var(--o);
    transform: translate(var(--x), var(--y)) scale(var(--sx), var(--sy));
  }
  to {
    opacity: var(--to);
    transform: translate(var(--tx), var(--ty)) scale(var(--tsx), var(--tsy));
  }
}

@keyframes tweenPlane-out {
  from {
    opacity: var(--to);
    transform: translate(var(--tx), var(--ty)) scale(var(--tsx), var(--tsy));
  }
  to {
    opacity: var(--o);
    transform: translate(var(--x), var(--y)) scale(var(--sx), var(--sy));
  }
}
