/* 
Important Utilities

fade-up
fade-down
fade-left
fade-right
zoom-in
flip-in
bounce-in
slide-in-blur
rotate-in
pop-up
wiggle-in
fade-in-stretch
*/

/* ===== FADE UP ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-up.animate {
  animation: fadeUp 0.8s ease-out forwards;
  opacity: 1;
  transform: translateY(0);
}

/* ===== FADE DOWN ===== */
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-down {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-down.animate {
  opacity: 1;
  transform: translateY(0);
  animation: fadeDown 0.8s ease-out forwards;
}

/* ===== FADE LEFT ===== */
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

.fade-left {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-left.animate {
  opacity: 1;
  transform: translateX(0);
  animation: fadeLeft 0.8s ease-out forwards;
}

/* ===== FADE RIGHT ===== */
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

.fade-right {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-right.animate {
  opacity: 1;
  transform: translateX(0);
  animation: fadeRight 0.8s ease-out forwards;
}

/* ===== ZOOM IN ===== */
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

.zoom-in {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.zoom-in.animate {
  opacity: 1;
  transform: scale(1);
  animation: zoomIn 0.8s ease-out forwards;
}

/* ===== FLIP IN ===== */
@keyframes flipIn {
  from { opacity: 0; transform: rotateY(90deg); }
  to { opacity: 1; transform: rotateY(0); }
}

.flip-in {
  opacity: 0;
  transform: rotateY(90deg);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  transform-style: preserve-3d;
}
.flip-in.animate {
  opacity: 1;
  transform: rotateY(0);
  animation: flipIn 0.8s ease-out forwards;
}

/* ===== BOUNCE IN ===== */
@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.05); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

.bounce-in {
  opacity: 0;
  transform: scale(0.3);
}
.bounce-in.animate {
  animation: bounceIn 0.8s ease-out forwards;
}

/* ===== SLIDE IN BLUR ===== */
@keyframes slideInBlur {
  from { opacity: 0; transform: translateY(50px); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.slide-in-blur {
  opacity: 0;
  transform: translateY(50px);
  filter: blur(5px);
}
.slide-in-blur.animate {
  animation: slideInBlur 0.8s ease-out forwards;
}

/* ===== ROTATE IN ===== */
@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-180deg) scale(0.5); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}

.rotate-in {
  opacity: 0;
  transform: rotate(-180deg) scale(0.5);
}
.rotate-in.animate {
  animation: rotateIn 0.8s ease-out forwards;
}

/* ===== POP UP ===== */
@keyframes popUp {
  0%   { opacity: 0; transform: scale(0.5); }
  80%  { transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

.pop-up {
  opacity: 0;
  transform: scale(0.5);
}
.pop-up.animate {
  animation: popUp 0.8s ease-out forwards;
}

/* ===== WIGGLE IN ===== */
@keyframes wiggleIn {
  0%   { opacity: 0; transform: translateX(-100px); }
  50%  { opacity: 1; transform: translateX(10px); }
  70%  { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.wiggle-in {
  opacity: 0;
  transform: translateX(-100px);
}
.wiggle-in.animate {
  animation: wiggleIn 0.8s ease-out forwards;
}

/* ===== FADE IN STRETCH ===== */
@keyframes fadeInStretch {
  0%   { opacity: 0; transform: scaleX(0.5); }
  100% { opacity: 1; transform: scaleX(1); }
}

.fade-in-stretch {
  opacity: 0;
  transform: scaleX(0.5);
  transform-origin: left;
}
.fade-in-stretch.animate {
  animation: fadeInStretch 0.8s ease-out forwards;
}