/* Βασικά styles για animated στοιχεία */
.animated-box {
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}

/* Όταν ενεργοποιηθεί */
.animated-box.animate {
  visibility: visible;
  opacity: 1;
}

/* Animation γενικές ρυθμίσεις */
.animate[data-animation] {
  animation-duration: 1s;
  animation-fill-mode: both;
}

/* ===== Bounce In Left ===== */
@keyframes bounceInLeft {
  0% { opacity: 0; transform: translateX(-3000px); }
  60% { opacity: 1; transform: translateX(25px); }
  75% { transform: translateX(-10px); }
  90% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}
.animate[data-animation="bounceInLeft"] {
  animation-name: bounceInLeft;
}

/* ===== Fade In Up ===== */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate[data-animation="fadeInUp"] {
  animation-name: fadeInUp;
}

/* ===== Zoom In ===== */
@keyframes zoomIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; }
  100% { transform: scale(1); }
}
.animate[data-animation="zoomIn"] {
  animation-name: zoomIn;
}

/* ===== Slide In Right ===== */
@keyframes slideInRight {
  0% { opacity: 0; transform: translateX(100%); }
  100% { opacity: 1; transform: translateX(0); }
}
.animate[data-animation="slideInRight"] {
  animation-name: slideInRight;
}

/* ===== Flip In X ===== */
@keyframes flipInX {
  0% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    transform: perspective(400px) rotateX(10deg);
  }
  100% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}
.animate[data-animation="flipInX"] {
  animation-name: flipInX;
}