/* BASE */
.slide-up,
.slide-down,
.slide-left,
.slide-right,
.slide-up-left,
.slide-up-right,
.slide-down-left,
.slide-down-right,
.fade-up,
.fade-down,
.fade-left,
.fade-right,
.fade-up-left,
.fade-up-right,
.fade-down-left,
.fade-down-right,
.zoom-up,
.zoom-down,
.zoom-left,
.zoom-right,
.zoom-up-left,
.zoom-up-right,
.zoom-down-left,
.zoom-down-right,
.flip-x-up,
.flip-x-down,
.flip-x-left,
.flip-x-right,
.flip-y-up,
.flip-y-down,
.flip-y-left,
.flip-y-right {
  opacity: 0;
  transition: all 0.8s ease-out;
}

/* SLIDE */
.slide-up         { transform: translateY(80px); }
.slide-down       { transform: translateY(-70px); }
.slide-left       { transform: translateX(80px); }
.slide-right      { transform: translateX(-80px); }
.slide-up-left    { transform: translate(80px, 80px); }
.slide-up-right   { transform: translate(-80px, 80px); }
.slide-down-left  { transform: translate(70px, -80px); }
.slide-down-right { transform: translate(-70px, -80px); }

/* FADE */
.fade-up          { transform: translateY(80px); }
.fade-down        { transform: translateY(-70px); }
.fade-left        { transform: translateX(80px); }
.fade-right       { transform: translateX(-80px); }
.fade-up-left     { transform: translate(80px, 80px); }
.fade-up-right    { transform: translate(-80px, 80px); }
.fade-down-left   { transform: translate(70px, -80px); }
.fade-down-right  { transform: translate(-70px, -80px); }

/* ZOOM */
.zoom-up          { transform: scale(0.7) translateY(80px); }
.zoom-down        { transform: scale(0.7) translateY(-70px); }
.zoom-left        { transform: scale(0.7) translateX(80px); }
.zoom-right       { transform: scale(0.7) translateX(-70px); }
.zoom-up-left     { transform: scale(0.7) translate(80px, 80px); }
.zoom-up-right    { transform: scale(0.7) translate(-70px, 80px); }
.zoom-down-left   { transform: scale(0.7) translate(80px, -80px); }
.zoom-down-right  { transform: scale(0.7) translate(-70px, -80px); }

/* FLIP-X */
.flip-x-up        { transform: rotateX(90deg); transform-origin: top; }
.flip-x-down      { transform: rotateX(-90deg); transform-origin: bottom; }
.flip-x-left      { transform: rotateX(90deg); transform-origin: left; }
.flip-x-right     { transform: rotateX(-90deg); transform-origin: right; }

/* FLIP-Y */
.flip-y-up        { transform: rotateY(90deg); transform-origin: top; }
.flip-y-down      { transform: rotateY(-90deg); transform-origin: bottom; }
.flip-y-left      { transform: rotateY(90deg); transform-origin: left; }
.flip-y-right     { transform: rotateY(-90deg); transform-origin: right; }

/* VISIBILE: resetta tutte le trasformazioni */
.slide-up.visible,
.slide-down.visible,
.slide-left.visible,
.slide-right.visible,
.slide-up-left.visible,
.slide-up-right.visible,
.slide-down-left.visible,
.slide-down-right.visible,
.fade-up.visible,
.fade-down.visible,
.fade-left.visible,
.fade-right.visible,
.fade-up-left.visible,
.fade-up-right.visible,
.fade-down-left.visible,
.fade-down-right.visible,
.zoom-up.visible,
.zoom-down.visible,
.zoom-left.visible,
.zoom-right.visible,
.zoom-up-left.visible,
.zoom-up-right.visible,
.zoom-down-left.visible,
.zoom-down-right.visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.flip-x-up.visible,
.flip-x-down.visible,
.flip-x-left.visible,
.flip-x-right.visible,
.flip-y-up.visible,
.flip-y-down.visible,
.flip-y-left.visible,
.flip-y-right.visible {
  opacity: 1;
  transform: rotateX(0) rotateY(0);
}