/**
 * Viewport Class Manager Animations
 * A comprehensive collection of animations for viewport transitions
 * Version: 1.1.0
 */

/* Basic Visibility Classes
--------------------------- */
.visible {
  opacity: 1;
  transition: opacity 0.5s ease;
}

.hidden {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Fade Animations
----------------- */
.fade-in {
  animation: fadeIn 1.5s ease-in-out forwards;
}

.fade-out {
  animation: fadeOut 1.5s ease-in-out forwards;
}

/* Rotate Animations
------------------- */
.rotate-fade-in-5-cw {
  animation: rotate-5-cw 1s ease-in-out forwards;
}

.rotate-fade-in-5-ccw {
  animation: rotate-5-ccw 1s ease-in-out forwards;
}

.rotate-fade-in-15-cw {
  animation: rotate-15-cw 1.2s ease-in-out forwards;
}

.rotate-fade-in-15-ccw {
  animation: rotate-15-ccw 1.2s ease-in-out forwards;
}

/* Slide Animations
----------------- */
.slide-up {
  animation: slideUp 1.5s ease-in-out forwards;
}

.slide-down {
  animation: slideDown 1.5s ease-in-out forwards;
}

.slide-left {
  animation: slideLeft 1.5s ease-in-out forwards;
}

.slide-right {
  animation: slideRight 1.5s ease-in-out forwards;
}

/* Scale Animations
----------------- */
.scale-up {
  animation: scaleUp 1.2s ease-in-out forwards;
}

.scale-down {
  animation: scaleDown 1.2s ease-in-out forwards;
}

/* Combined Animations
-------------------- */
.slide-up-fade {
  animation: slideUpFade 1.5s ease-in-out forwards;
}

.slide-down-fade {
  animation: slideDownFade 1.5s ease-in-out forwards;
}

.scale-fade {
  animation: scaleFade 1.2s ease-in-out forwards;
}

/* Bounce Animations
------------------ */
.bounce-in {
  animation: bounceIn 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.bounce-up {
  animation: bounceUp 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Flip Animations
---------------- */
.flip-x {
  animation: flipX 1.5s ease-in-out forwards;
  backface-visibility: hidden;
}

.flip-y {
  animation: flipY 1.5s ease-in-out forwards;
  backface-visibility: hidden;
}

/* Keyframes Definitions
--------------------- */

/* Fade Keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Rotate Keyframes */
@keyframes rotate-5-cw {
  from {
    opacity: 0;
    transform: rotate(0deg);
  }
  to {
    opacity: 1;
    transform: rotate(5deg);
  }
}

@keyframes rotate-5-ccw {
  from {
    opacity: 0;
    transform: rotate(0deg);
  }
  to {
    opacity: 1;
    transform: rotate(-5deg);
  }
}

@keyframes rotate-15-cw {
  from {
    opacity: 0;
    transform: rotate(0deg);
  }
  to {
    opacity: 1;
    transform: rotate(15deg);
  }
}

@keyframes rotate-15-ccw {
  from {
    opacity: 0;
    transform: rotate(0deg);
  }
  to {
    opacity: 1;
    transform: rotate(-15deg);
  }
}

/* Slide Keyframes */
@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideLeft {
  from {
    transform: translateX(50px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideRight {
  from {
    transform: translateX(-50px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Scale Keyframes */
@keyframes scaleUp {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scaleDown {
  from {
    transform: scale(1.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Combined Animations Keyframes */
@keyframes slideUpFade {
  from {
    transform: translateY(30px) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes slideDownFade {
  from {
    transform: translateY(-30px) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes scaleFade {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Bounce Keyframes */
@keyframes bounceIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9);
    opacity: 0.9;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes bounceUp {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  50% {
    transform: translateY(-10px);
    opacity: 0.8;
  }
  70% {
    transform: translateY(5px);
    opacity: 0.9;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Flip Keyframes */
@keyframes flipX {
  from {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  to {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes flipY {
  from {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  to {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}