@property --rotateX {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --rotateY {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --rotateZ {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes c1 {
  0% {
    transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  8.333% {
    transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  16.666% {
    transform: var(--translate) rotateX(0deg) rotateY(-90deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  25% {
    transform: var(--translate) rotateX(0deg) rotateY(-90deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  33.333% {
    transform: var(--translate) rotateX(-90deg) rotateY(-90deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  41.666% {
    transform: var(--translate) rotateX(-90deg) rotateY(-90deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  50% {
    transform: var(--translate) rotateX(-90deg) rotateY(-90deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  58.333% {
    transform: var(--translate) rotateX(-90deg) rotateY(-90deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  66.666% {
   transform: var(--translate) rotateX(-90deg) rotateY(-90deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  75% {
    transform: var(--translate) rotateX(0deg) rotateY(-90deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  83.333% {
   transform: var(--translate) rotateX(0deg) rotateY(-90deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  91.666% {
    transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  100% {
    transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
}

@keyframes c2 {
  0% {
    transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  8.333% {
    transform: var(--translate) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  16.666% {
    transform: var(--translate) rotateX(90deg) rotateY(0deg) rotateZ(90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  25% {
    transform: var(--translate) rotateX(90deg) rotateY(90deg) rotateZ(90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  33.333% {
    transform: var(--translate) rotateX(90deg) rotateY(90deg) rotateZ(90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  41.666% {
    transform: var(--translate) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateY(-90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  50% {
    transform: var(--translate) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(-90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  58.333% {
    transform: var(--translate) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateY(-90deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  66.666% {
   transform: var(--translate) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  75% {
    transform: var(--translate) rotateX(90deg) rotateY(90deg) rotateZ(90deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  83.333% {
   transform: var(--translate) rotateX(90deg) rotateY(0deg) rotateZ(90deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  91.666% {
    transform: var(--translate) rotateX(90deg) rotateY(0deg) rotateZ(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  100% {
    transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
}

@keyframes c3 {
  0% {
    transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  8.333% {
    transform: var(--translate) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  16.666% {
    transform: var(--translate) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  25% {
    transform: var(--translate) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  33.333% {
    transform: var(--translate) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  41.666% {
    transform: var(--translate) rotateX(90deg) rotateY(0deg) rotateZ(-90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  50% {
    transform: var(--translate) rotateX(90deg) rotateY(0deg) rotateZ(-90deg) rotateX(-90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  58.333% {
    transform: var(--translate) rotateX(90deg) rotateY(0deg) rotateZ(-90deg) rotateX(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  66.666% {
   transform: var(--translate) rotateX(90deg) rotateY(0deg) rotateZ(-90deg) rotateX(0deg) rotateZ(90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  75% {
    transform: var(--translate) rotateX(90deg) rotateY(0deg) rotateZ(-90deg) rotateX(0deg) rotateZ(90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  83.333% {
   transform: var(--translate) rotateX(90deg) rotateY(0deg) rotateZ(-90deg) rotateX(0deg) rotateZ(90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  91.666% {
    transform: var(--translate) rotateX(90deg) rotateY(0deg) rotateZ(-90deg) rotateX(0deg) rotateZ(90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  100% {    
    transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
}

@keyframes c4 {
  0% {
    transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  8.333% {
    transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  16.666% {
    transform: var(--translate) rotateX(0deg) rotateY(-90deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  25% {
    transform: var(--translate) rotateX(0deg) rotateY(-90deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  33.333% {
    transform: var(--translate) rotateX(0deg) rotateY(-90deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  41.666% {
    transform: var(--translate) rotateX(0deg) rotateY(-90deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  50% {
    transform: var(--translate) rotateX(0deg) rotateY(-90deg) rotateZ(0deg) rotateX(90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  58.333% {
    transform: var(--translate) rotateX(0deg) rotateY(-90deg) rotateZ(0deg) rotateX(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  66.666% {
   transform: var(--translate) rotateX(0deg) rotateY(-90deg) rotateZ(0deg) rotateX(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  75% {
    transform: var(--translate) rotateX(0deg) rotateY(-90deg) rotateZ(0deg) rotateX(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  83.333% {
    transform: var(--translate) rotateX(0deg) rotateY(-90deg) rotateZ(0deg) rotateX(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  91.666% {
    transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) rotateX(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  100% {
   transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
}

@keyframes c5 {
  0% {
    transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  8.333% {
    transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  16.666% {
    transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  25% {
    transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  33.333% {
    transform: var(--translate) rotateX(-90deg) rotateY(0deg) rotateZ(90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  41.666% {
    transform: var(--translate) rotateX(-90deg) rotateY(0deg) rotateZ(180deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  50% {
    transform: var(--translate) rotateX(-90deg) rotateY(0deg) rotateZ(180deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  58.333% {
    transform: var(--translate) rotateX(-90deg) rotateY(0deg) rotateZ(180deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  66.666% {
   transform: var(--translate) rotateX(-90deg) rotateY(0deg) rotateZ(90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  75% {
    transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  83.333% {
    transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  91.666% {
    transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  100% {
   transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
}

@keyframes c6 {
  0% {
    transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  8.333% {
    transform: var(--translate) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  16.666% {
    transform: var(--translate) rotateX(90deg) rotateY(0deg) rotateZ(90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  25% {
    transform: var(--translate) rotateX(90deg) rotateY(90deg) rotateZ(90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  33.333% {
    transform: var(--translate) rotateX(90deg) rotateY(90deg) rotateZ(90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  41.666% {
    transform: var(--translate) rotateX(90deg) rotateY(90deg) rotateZ(90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  50% {
    transform: var(--translate) rotateX(90deg) rotateY(90deg) rotateZ(90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  58.333% {
    transform: var(--translate) rotateX(90deg) rotateY(90deg) rotateZ(90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  66.666% {
   transform: var(--translate) rotateX(90deg) rotateY(90deg) rotateZ(90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  75% {
    transform: var(--translate) rotateX(90deg) rotateY(90deg) rotateZ(90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  83.333% {
    transform: var(--translate) rotateX(90deg) rotateY(0deg) rotateZ(90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  91.666% {
    transform: var(--translate) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  100% {
   transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
}

@keyframes c7 {
  0% {
    transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  8.333% {
    transform: var(--translate) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  16.666% {
    transform: var(--translate) rotateX(90deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  25% {
    transform: var(--translate) rotateX(90deg) rotateY(90deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  33.333% {
    transform: var(--translate) rotateX(90deg) rotateY(90deg) rotateZ(-90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  41.666% {
    transform: var(--translate) rotateX(90deg) rotateY(90deg) rotateZ(-90deg) rotateY(90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  50% {
    transform: var(--translate) rotateX(90deg) rotateY(90deg) rotateZ(-90deg) rotateY(90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  58.333% {
    transform: var(--translate) rotateX(90deg) rotateY(90deg) rotateZ(-90deg) rotateY(90deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  66.666% {
   transform: var(--translate) rotateX(90deg) rotateY(90deg) rotateZ(-90deg) rotateY(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  75% {
    transform: var(--translate) rotateX(90deg) rotateY(90deg) rotateZ(0deg) rotateY(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  } 
  83.333% {
   transform: var(--translate) rotateX(90deg) rotateY(0deg) rotateZ(0deg) rotateY(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  91.666% {
    transform: var(--translate) rotateX(90deg) rotateY(0deg) rotateZ(0deg) rotateY(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  100% {
   transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
}

@keyframes c8 {
  0% {
    transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  8.333% {
    transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  16.666% {
    transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  25% {
    transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  33.333% {
    transform: var(--translate) rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  41.666% {
    transform: var(--translate) rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  50% {
    transform: var(--translate) rotateX(-90deg) rotateY(-90deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  58.333% {
    transform: var(--translate) rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  66.666% {
   transform: var(--translate) rotateX(-90deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  75% {
    transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  83.333% {
    transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  91.666% {
    transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
  100% {
   transform: var(--translate) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(calc(var(--offset-x) * var(--position)), calc(var(--offset-y) * var(--position)), calc(var(--offset-z) * var(--position)));
  }
}

/* @keyframes c1 {
    0% {
        --rotateY: 0deg; 
    } 33% {
        --rotateY: 90deg; 
        --rotateX: 0deg;
    } 66% {
        --rotateY: 90deg; 
        --rotateX: 90deg;
        --rotateZ: 0deg;
    } 100% {
        --rotateZ: 90deg;
        --rotateY: 0deg; 
        --rotateX: 0deg;
    }
}

@keyframes c2 {
    0% {
        --rotateY: 0deg; 
    } 33% {
        --rotateY: 90deg; 
        --rotateX: 0deg;
    } 66% {
        --rotateY: 90deg; 
        --rotateX: 90deg;
    } 100% {
        --rotateY: 90deg; 
        --rotateX: 90deg;
    }
}

@keyframes c3 {
    0% {
        --rotateY: 0deg; 
    } 33% {
        --rotateY: 90deg; 
    } 66% {
        --rotateY: 90deg; 
    } 100% {
        --rotateY: 0deg; 
    }
}

@keyframes c4 {
    0% {
        --rotateY: 0deg; 
    } 33% {
        --rotateY: 90deg; 
    } 66% {
        --rotateY: 90deg; 
    } 100% {
        --rotateY: 0deg; 
    }
}

@keyframes c6 {
    0% {
        --rotateY: 0deg; 
    } 33% {
        --rotateY: 0deg; 
        --rotateX: 0deg;
    } 66% {
        --rotateY: 0deg; 
        --rotateX: 90deg;
        --rotateZ: 0deg; 
    } 100% {
        --rotateY: 0deg; 
        --rotateX: 90deg;
        --rotateZ: 90deg; 
    }
}

@keyframes c8 {
    0% {
        --rotateY: 0deg; 
    } 33% {
        --rotateY: 0deg; 
        --rotateX: 0deg;
    } 66% {
        --rotateY: 0deg; 
        --rotateX: 90deg;
    } 100% {
        --rotateY: 0deg; 
        --rotateX: 90deg;
    }
} */