.transition-spin-out,
.transition-spin-in {
  --trans-in-dur: 1;
  --trans-out-dur: 1;
  --trans-del: 0;
}

.transition-spin-out .cube-3d-side {
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transform: rotateY(calc(1deg * var(--ry))) rotateX(calc(1deg * var(--rx)))
    translateZ(calc((var(--units) * (var(--width) + var(--offset)) * 0.5)));
  animation: spin-out calc(var(--trans-out-dur) * 1s) cubic-bezier(0.66, 0, 1, 0.33)
    calc(var(--trans-del) * 1s) forwards;
}

.transition-spin-out .cube-3d.token .cube-3d-side,
.transition-spin-out .cube-3d.ticket .cube-3d-side {
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transform: rotateY(calc(1deg * var(--ry))) rotateX(calc(1deg * var(--rx)))
    translateZ( calc( (var(--units) * ( var(--dep) + var(--offset)) * 0.5) - 1px) );
  animation: spin-out-ticket calc(var(--trans-out-dur) * 1s) cubic-bezier(0.66, 0, 1, 0.33)
    calc(var(--trans-del) * 1s) forwards;
}


.transition-spin-in .cube-3d-side {
  pointer-events: none;
  opacity: 0;
  visibility: visible;
  transform: rotateY(calc((1deg * var(--ry)) - 360deg))
    rotateX(calc((1deg * var(--rx))))
    translateZ(calc((var(--units) * (var(--width) + var(--offset)) * 0.5)));
  animation: spin-in calc(var(--trans-in-dur) * 1s) cubic-bezier(0, 0.66, 0.33, 1)
    calc(var(--trans-del) * 1s) forwards;
}

.transition-spin-in .cube-3d.token .cube-3d-side,
.transition-spin-in .cube-3d.ticket .cube-3d-side {
  pointer-events: none;
  opacity: 0;
  visibility: visible;
  transform: rotateY(calc((1deg * var(--ry)) - 360deg))
    rotateX(calc((1deg * var(--rx))))
    translateZ( calc( (var(--units) * ( var(--dep) + var(--offset)) * 0.5) - 1px) );
  animation: spin-in-ticket calc(var(--trans-in-dur) * 1s) cubic-bezier(0, 0.66, 0.33, 1)
    calc(var(--trans-del) * 1s) forwards;
}




.transition-spin-out .cube-3d-side:nth-child(5),
.transition-spin-out .cube-3d-side:nth-child(6) {
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transform: rotateY(calc((1deg * var(--ry)))) rotateX(calc(1deg * var(--rx)))
    translateZ(calc(var(--units) * (var(--height) + var(--offset)) * 0.5));
  animation: spin-out-tb calc(var(--trans-out-dur) * 1s)
    cubic-bezier(0.66, 0, 1, 0.33) calc(var(--trans-del) * 1s) forwards;
}

.transition-spin-in .cube-3d-side:nth-child(5),
.transition-spin-in .cube-3d-side:nth-child(6) {
  pointer-events: none;
  opacity: 0;
  visibility: visible;
  transform: rotateY(calc((1deg * var(--ry)) - 360deg))
    rotateX(calc(1deg * var(--rx)))
    translateZ(calc(var(--units) * (var(--height) + var(--offset)) * 0.5));
  animation: spin-in-tb calc(var(--trans-in-dur) * 1s)
    cubic-bezier(0, 0.66, 0.33, 1) calc(var(--trans-del) * 1s) forwards;
}

@keyframes spin-in {
  from {
    opacity: 0;
    visibility: visible;
    transform: rotateY(calc((1deg * var(--ry)) - 360deg))
      rotateX(calc((1deg * var(--rx))))
      translateZ(calc((var(--units) * (var(--width) + var(--offset)) * 0.5)));
  }
  to {
    opacity: 1;
    visibility: visible;
    transform: rotateY(calc(1deg * var(--ry))) rotateX(calc(1deg * var(--rx)))
      translateZ(calc((var(--units) * (var(--width) + var(--offset)) * 0.5)));
  }
}

@keyframes spin-out {
  from {
    opacity: 1;
    visibility: visible;
    transform: rotateY(calc(1deg * var(--ry))) rotateX(calc(1deg * var(--rx)))
      translateZ(calc((var(--units) * (var(--width) + var(--offset)) * 0.5)));
  }
  to {
    opacity: 0;
    visibility: hidden;
    transform: rotateY(calc((1deg * var(--ry)) + 360deg))
      rotateX(calc((1deg * var(--rx))))
      translateZ(calc((var(--units) * (var(--width) + var(--offset)) * 0.5)));
  }
}

@keyframes spin-in-tb {
  from {
    opacity: 0;
    visibility: visible;
    transform: rotateY(calc((1deg * var(--ry)) - 360deg))
      rotateX(calc(1deg * var(--rx)))
      translateZ(calc(var(--units) * (var(--height) + var(--offset)) * 0.5));
  }
  to {
    opacity: 1;
    visibility: visible;
    transform: rotateY(calc((1deg * var(--ry)))) rotateX(calc(1deg * var(--rx)))
      translateZ(calc(var(--units) * (var(--height) + var(--offset)) * 0.5));
  }
}

@keyframes spin-out-tb {
  from {
    opacity: 1;
    visibility: visible;
    transform: rotateY(calc((1deg * var(--ry)))) rotateX(calc(1deg * var(--rx)))
      translateZ(calc(var(--units) * (var(--height) + var(--offset)) * 0.5));
  }
  to {
    opacity: 0;
    visibility: hidden;
    transform: rotateY(calc((1deg * var(--ry)) + 360deg))
      rotateX(calc(1deg * var(--rx)))
      translateZ(calc(var(--units) * (var(--height) + var(--offset)) * 0.5));
  }
  
}
  
@keyframes spin-in-ticket {
  from {
    opacity: 0;
    visibility: visible;
    transform: rotateY(calc((1deg * var(--ry)) - 360deg))
      rotateX(calc((1deg * var(--rx))))
          translateZ( calc((var(--units) * ( var(--dep) + var(--offset)) * 0.5) - 1px) );


  }
  to {
    opacity: 1;
    visibility: visible;
    transform: rotateY(calc(1deg * var(--ry))) rotateX(calc(1deg * var(--rx)))
         translateZ( calc( (var(--units) * ( var(--dep) + var(--offset)) * 0.5) - 1px) );

  }
}

@keyframes spin-out-ticket {
  from {
    opacity: 1;
    visibility: visible;
    transform: rotateY(calc(1deg * var(--ry))) rotateX(calc(1deg * var(--rx)))
        translateZ( calc( (var(--units) * ( var(--dep) + var(--offset)) * 0.5) - 1px) );

  }
  to {
    opacity: 0;
    visibility: hidden;
    transform: rotateY(calc((1deg * var(--ry)) + 360deg))
      rotateX(calc((1deg * var(--rx))))
          translateZ( calc( (var(--units) * ( var(--dep) + var(--offset)) * 0.5) - 1px) );

  }
  
  
  
}
