/* === KEYFRAMES === */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

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

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

@keyframes bounce {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-8px); }
  50%  { transform: translateY(0); }
  75%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}
@keyframes scale {
  0% { transform: scale(0.9); }
  50%   {  transform: scale(1.1); }
  100% { transform: scale(0.9); }
}

/* === UTILITY CLASSES === */


/* variants */
.fade-in{
  animation: fadeIn ease-in-out .5s;
}
.fade-up{
  animation: fadeUp ease-in-out .5s;
}
.slide-left{
  animation: slideInLeft ease-in-out .5s;
}
.slide-right{
  animation: slideInRight ease-in-out .5s;
}
.zoom-in{
  animation: zoomIn ease-in-out .5s;
}
.bounce{
  animation: bounce 900ms ease both;
}
.scalling{
  animation: scale ease-in-out 2s infinite;
}