.object-3d.transition-explode-out,
.object-3d.transition-explode-in {
  --trans-in-dur: 1;
  --trans-out-dur: 1;
  --trans-del: 0;
}

.transition-opacity-out .cube-3d-side:nth-child( n + 7 ),
.transition-opacity-in .cube-3d-side:nth-child( n + 7 ) {
    display: none;

}


.object-3d.transition-explode-out > .cube-3d > .cube-3d-side {
  pointer-events: none;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation: explode calc(var(--trans-out-dur) * 1s) ease-in
    calc(var(--trans-del) * 1s) forwards;
}

.object-3d.transition-explode-in .cube-3d-side {
  pointer-events: none;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation: implode calc(var(--trans-in-dur) * 1s) ease-out
    calc(var(--trans-del) * 1s) forwards;
}

@keyframes explode {
  from {
    opacity: 1;
    visibility: visible;
    transform: default;
  }
  to {
    opacity: 0;
    visibility: hidden;
    transform: rotateY(calc(1deg * var(--ry))) rotateX(calc(1deg * var(--rx)))
      translateZ(calc(var(--units) * (var(--width) + var(--offset)) * 5))
      rotate3d(1, 1, 1, 180deg);
  }
}

@keyframes implode {
  from {
    opacity: 0;
    visibility: visible;
    transform: rotateY(calc(1deg * var(--ry))) rotateX(calc(1deg * var(--rx)))
      translateZ(calc(var(--units) * (var(--width) + var(--offset)) * 5))
      rotate3d(1, 1, 1, 180deg);
  }
  to {
    opacity: 1;
    visibility: visible;
    transform: default;
  }
}




.transition-spin-out .cube-3d.token .cube-3d-side,
.transition-spin-out .cube-3d.ticket .cube-3d-side {

  pointer-events: none;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation: explode-ticket calc(var(--trans-out-dur) * 1s) ease-in
    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;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation: implode calc(var(--trans-in-dur) * 1s) ease-out
    calc(var(--trans-del) * 1s) forwards;
}

@keyframes explode-ticket {
  from {
    opacity: 1;
    visibility: visible;
    transform: default;
  }
  to {
    opacity: 0;
    visibility: hidden;
    transform: rotateY(calc(1deg * var(--ry))) rotateX(calc(1deg * var(--rx)))
      translateZ(calc(var(--units) * (var(--dep) + var(--offset)) * 5))
      rotate3d(1, 1, 1, 180deg);      
  }
}

@keyframes implode-ticket {
  from {
    opacity: 0;
    visibility: visible;
    transform: rotateY(calc(1deg * var(--ry))) rotateX(calc(1deg * var(--rx)))
      translateZ(calc(var(--units) * (var(--dep) + var(--offset)) * 5))
      rotate3d(1, 1, 1, 180deg);
  }
  to {
    opacity: 1;
    visibility: visible;
    transform: default;
  }
}
