@keyframes heroZoom {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

@keyframes overlayFlow {
  from { background-position: 0% 0%; }
  to { background-position: 100% 100%; }
}

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes scroll {
  0%   { opacity: 0; transform: translateY(-2px); }
  50%  { opacity: 1; transform: translateY(2px); }
  100% { opacity: 0; transform: translateY(6px); }
}

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

@keyframes fadeInDown {
  0%   { opacity: 0; transform: translateY(-30px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes scrollCarousel {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes imageEntrance {
  0% {
    opacity: 0;
    transform: perspective(1000px) translateX(120px) rotateY(-25deg) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: perspective(1000px) translateX(0) rotateY(10deg) scale(1);
  }
}

@media (max-width: 768px) {
  @keyframes imageEntrance {
    0% {
      opacity: 0;
      transform: perspective(1000px) translateX(0px) rotateY(-90deg) scale(0.8);
    }
    100% {
      opacity: 1;
      transform: perspective(1000px) translateX(0) rotateY(0deg) scale(1);
    }
  }
}


@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

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


/* Ensure the track uses the variable-driven animation */
.carousel-track {
  animation-name: scrollCarousel;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}