pc-size = 80px
pc-half = pc-size / 2
pc-half-negative = pc-half * -1
pc-font = 30px

pc-face(x, y, c)
  transform rotateX(x) rotateY(y) translateZ(pc-half)
  background-color rgba(c, 0.9)
  border 5px dashed darken(c, 15%)
  box-shadow 3px 3px 50px c
  opacity 1

.pc-cube
  opacity 0

@media screen and (min-width: 768px)
  .pc-cube,
  .pc-faces,
  .pc-face
    transform-style preserve-3d

  .pc-cube
    position fixed
    right 150px
    bottom 150px

    width pc-size
    height pc-size
    transition transform 0.7s
    animation pc-bounce-wrapper 5s alternate infinite

  // avoid opacity fade to 0 on page load, by adding opacity transition after load
  .pc-smooth
    transition-property all

  .pc-show
    opacity 1

  .pc-faces
    width 100%
    height 100%
    position absolute
    cursor wait
    user-select none
    transition all 1s
    animation pc-rotate-faces 1.8s alternate infinite

  .pc-face
    width pc-size
    height pc-size
    display block
    position absolute
    line-height pc-size / 3
    font-size pc-font
    font-weight bold
    text-align center
    transition all 1.2s
    color c-strong

  .pc-front
    pc-face(0, 0, c-pink-light)
    animation pc-glow-front 0.5s alternate infinite
    color c-pink

  .pc-back
    pc-face(180deg, 0, c-yellow-js)
    animation pc-glow-back 0.3s alternate infinite
    border-color darken(c-yellow-js, 30%)
    text-transform uppercase

  .pc-right
    pc-face(0, 90deg, c-blue-light)
    animation pc-glow-right 0.7s alternate infinite
    font-style italic
    border-style dotted

  .pc-left
    pc-face(0, -90deg, c-strongish)
    animation pc-glow-left 0.9s alternate infinite
    text-decoration underline

  .pc-top
    pc-face(90deg, 0, c-light)
    animation pc-glow-top 0.9s alternate infinite
    text-transform lowercase
    border-style double

  .pc-bottom
    pc-face(-90deg, 0, c-green-light)
    animation pc-glow-bottom 0.4s alternate infinite

@keyframes pc-glow-front
  0%
    background-color c-pink-light
  100%
    background-color lighten(c-pink-light, 30%)
    opacity 0.7
    font-size pc-font * 1.3

@keyframes pc-glow-back
  0%
    background-color c-yellow-js
  100%
    background-color lighten(c-yellow-js, 20%)
    opacity 0.7
    font-size pc-font * 0.6

@keyframes pc-glow-right
  0%
    background-color c-blue-light
    opacity 0.6
  100%
    background-color darken(c-blue-light, 30%)
    opacity 1
    font-size pc-font * 0.9

@keyframes pc-glow-left
  0%
    background-color c-strongish
    opacity 1
  100%
    background-color spin(c-strongish, 20%)
    opacity 0.8
    font-size pc-font * 0.4

@keyframes pc-glow-top
  0%
    background-color c-light
    opacity 1
  100%
    background-color #fff
    opacity 0.05
    font-size pc-font * 2

@keyframes pc-glow-bottom
  0%
    background-color c-green-light
    opacity 0.9
  100%
    background-color darken(c-green-light, 30%)
    opacity 0.05
    font-size pc-font * 1.3

@keyframes pc-bounce-wrapper
  0%
    transform inherit
  20%
    transform rotate(60deg)
  40%
    transform rotateX(-200deg)
  60%
    transform rotate(150deg)
  80%
    transform rotateX(150deg) rotateY(-125deg)
  100%
    transform rotateX(-40deg)

@keyframes pc-rotate-faces
  0%
    transform translateZ(pc-half-negative) rotateY(0deg)
  20%
    transform translateZ(pc-half-negative) rotateX(-180deg)
  40%
    transform translateZ(pc-half-negative) rotateY(-90deg)
  60%
    transform translateZ(pc-half-negative) rotateX(-90deg)
  80%
    transform translateZ(pc-half-negative) rotateY(90deg)
  100%
    transform translateZ(pc-half-negative) rotateX(90deg)