mixin cube(className)
  .cube(class=className)
    - let s = 0
    while s < 6
      .cube__side
      - s++
.scene
  .plane
    - let c = 0
    while c < 8
      +cube(`cube--${c}`)
      .shadow(class=`shadow--${c}`)
      - c++

*
*:after
*:before
  box-sizing border-box


:root
  --hue 185
  --radius 5.5
  --size 4

body
  min-height 100vh
  background 'hsl(%s, 20%, 70%)' % var(--hue)
  overflow hidden
  margin 0
  padding 0


[type='checkbox']
  position absolute
  left 100%
  opacity 0
  height 0
  width 0



.scene
  perspective 800px
  transform-style preserve-3d
  height 100vh
  width 100vw
  display flex
  align-items center
  justify-content center

.plane
  height 5vmin
  width 5vmin
  transform-style preserve-3d
  transform rotateX(-40deg) rotateY(-45deg) rotateX(90deg)
  // transform rotateX(-0deg) rotateY(-0deg) rotateX(90deg)

@keyframes jump
  0%, 30%, 100%
    transform translate3d(calc((var(--x) * var(--radius)) * 1vmin), calc((var(--y) * var(--radius)) * -1vmin), 0)
  15%
    transform translate3d(calc((var(--x) * var(--radius)) * 1vmin), calc((var(--y) * var(--radius)) * -1vmin), 3.5vmin)

.cube
.shadow
  --width var(--size)
  --height var(--size)
  --depth var(--size)
  height calc(var(--depth) * 1vmin)
  width calc(var(--width) * 1vmin)
  transform-style preserve-3d
  position absolute
  font-size 1rem
  animation jump 0.8s calc(var(--d) * 1s) infinite
  transform translate3d(calc((var(--x) * var(--radius)) * 1vmin), calc((var(--y) * var(--radius)) * -1vmin), 0)

  & > div:nth-of-type(1)
    background 'hsl(%s, 60%, 50%)' % var(--hue)
    height calc(var(--height) * 1vmin)
    width 100%
    transform-origin 50% 50%
    transform rotateX(-90deg)
    position absolute
    top 50%
    left 50%
    transform translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc((var(--depth) / 2) * 1vmin))

  & > div:nth-of-type(2)
    background 'hsl(%s, 60%, 60%)' % var(--hue)
    height calc(var(--height) * 1vmin)
    width 100%
    transform-origin 50% 50%
    transform translate(-50%, -50%) rotateX(-90deg) rotateY(180deg) translate3d(0, 0, calc((var(--depth) / 2) * 1vmin))
    position absolute
    top 50%
    left 50%

  & > div:nth-of-type(3)
    background 'hsl(%s, 60%, 60%)' % var(--hue)
    height calc(var(--height) * 1vmin)
    width calc(var(--depth) * 1vmin)
    transform translate(-50%, -50%) rotateX(-90deg) rotateY(90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vmin))
    position absolute
    top 50%
    left 50%

  & > div:nth-of-type(4)
    background 'hsl(%s, 60%, 55%)' % var(--hue)
    height calc(var(--height) * 1vmin)
    width calc(var(--depth) * 1vmin)
    transform translate(-50%, -50%) rotateX(-90deg) rotateY(-90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vmin))
    position absolute
    top 50%
    left 50%

  & > div:nth-of-type(5)
    background 'hsl(%s, 60%, 45%)' % var(--hue)
    height calc(var(--depth) * 1vmin)
    width calc(var(--width) * 1vmin)
    transform translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * 1vmin))
    position absolute
    top 50%
    left 50%

  & > div:nth-of-type(6)
    background 'hsl(%s, 60%, 65%)' % var(--hue)
    height calc(var(--depth) * 1vmin)
    width calc(var(--width) * 1vmin)
    transform translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * -1vmin)) rotateX(180deg)
    position absolute
    top 50%
    left 50%

.shadow
  animation none
  background radial-gradient(hsl(0, 0%, 0%), transparent)
  transform translate3d(calc((var(--x) * var(--radius)) * 1vmin), calc((var(--y) * var(--radius)) * -1vmin), calc(var(--size) * -0.5vmin)) scale(1)
  animation shadow 0.8s calc(var(--d) * 1s) infinite

@keyframes shadow
  0%, 30%, 100%
    transform translate3d(calc((var(--x) * var(--radius)) * 1vmin), calc((var(--y) * var(--radius)) * -1vmin), calc(var(--size) * -0.5vmin)) scale(1)
  15%
    transform translate3d(calc((var(--x) * var(--radius)) * 1vmin), calc((var(--y) * var(--radius)) * -1vmin), calc(var(--size) * -0.5vmin)) scale(0.85)
    opacity 0.2
.cube
.shadow

  &--0
    --x 1
    --y 0
    --d -0.7

  &--1
    --x 1
    --y -1
    --d -0.6

  &--2
    --x 0
    --y -1
    --d -0.5

  &--3
    --x -1
    --y -1
    --d -0.4

  &--4
    --x -1
    --y 0
    --d -0.3

  &--5
    --x -1
    --y 1
    --d -0.2

  &--6
    --x 0
    --y 1
    --d -0.1

  &--7
    --x 1
    --y 1
    --d -0

// Nah