/* Animation Classes */
[data-animate="true"] .animate-element {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

[data-animate="true"] .animate-element.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Image hover animations */
[data-animation="image-hover"] {
  overflow: hidden;
  position: relative;
}

[data-animation="image-hover"] img {
  transition: transform 0.8s ease-out;
  transform: scale(1);
}

[data-animation="image-hover"].is-visible img {
  transform: scale(1.05);
}

/* Stagger items */
[data-animation="stagger-item"] {
  transition-delay: calc(var(--delay, 0) * 0.1s);
}

/* Slide animations */
[data-animation="slide-left"] {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

[data-animation="slide-left"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

[data-animation="slide-right"] {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

[data-animation="slide-right"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Fade in animation */
[data-animation="fade-in"] {
  opacity: 0;
  transition: opacity 1s ease-out;
}

[data-animation="fade-in"].is-visible {
  opacity: 1;
}

/* Float animation for images */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

.float-animation {
  animation: float 6s ease-in-out infinite;
}

/* Hero animation */
.hero-content {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.hero-content.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-image img {
  transition: transform 2s ease-out;
  transform: scale(1);
}

.hero-image.is-visible img {
  transform: scale(1.05);
}

/* Mobile optimizations */
@media (max-width: 768px) {
  [data-animate="true"] .animate-element {
    transform: translateY(20px);
  }

  [data-animation="slide-left"],
  [data-animation="slide-right"] {
    transform: translateY(20px);
  }

  [data-animation="slide-left"].is-visible,
  [data-animation="slide-right"].is-visible {
    transform: translateY(0);
  }
}