/* ---------- ANIMATIONS ---------- */

/* Fade In */
.fade-in{
  animation:fadeIn 1.2s ease forwards;
}

@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(30px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Slide In Left */
.slide-left{
  animation:slideLeft 1.2s ease forwards;
}

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

/* Slide In Right */
.slide-right{
  animation:slideRight 1.2s ease forwards;
}

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

/* Zoom In */
.zoom-in{
  animation:zoomIn 1s ease forwards;
}

@keyframes zoomIn{
  from{
    opacity:0;
    transform:scale(.9);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

/* Floating animation */
.float{
  animation:float 3s ease-in-out infinite;
}

@keyframes float{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
  100%{ transform:translateY(0); }
}