// ---------------------------------------------------------------------------
+keyframes(hinge)
  0%
    +rotate(0)
    +transform-origin(top left)
    +animation-timing-function(ease-in-out)
  20%, 60%
    +rotate(80deg)
    +transform-origin(top left)
    +animation-timing-function(ease-in-out)
  40%
    +rotate(60deg)
    +transform-origin(top left)
    +animation-timing-function(ease-in-out)
  80%
    +transform(rotate(60deg) translateY(0))
    +opacity(1)
    +transform-origin(top left)
    +animation-timing-function(ease-in-out)
  100%
    +translateY(700px)
    +opacity(0)


// ---------------------------------------------------------------------------
+keyframes(rollIn)
  0%
    +opacity(0)
    +transform(translateX(-100%) rotate(-120deg))
  100%
    +opacity(1)
    +transform(translateX(0px) rotate(0deg))


// ---------------------------------------------------------------------------
+keyframes(rollOut)
  0%
    +opacity(1)
    +transform(translateX(0px) rotate(0deg))
  100%
    +opacity(0)
    +transform(translateX(-100%) rotate(-120deg))