/* Base styles for animated sections */
[data-animate] {
  opacity: 0;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Class added when element is in view */
[data-animate].animate-in {
  opacity: 1;
  transform: none !important;
}

/* Fly-in Animations */
[data-animate="fly-left"] {
  transform: translateX(-100px);
}

[data-animate="fly-right"] {
  transform: translateX(100px);
}

[data-animate="fly-top"] {
  transform: translateY(-100px);
}

[data-animate="fly-bottom"] {
  transform: translateY(100px);
}

[data-animate="fly-top-left"] {
  transform: translate(-100px, -100px);
}

[data-animate="fly-top-right"] {
  transform: translate(100px, -100px);
}

[data-animate="fly-bottom-left"] {
  transform: translate(-100px, 100px);
}

[data-animate="fly-bottom-right"] {
  transform: translate(100px, 100px);
}

/* Zoom Animations */
[data-animate="zoom-in"] {
  transform: scale(0.8);
}

[data-animate="zoom-out"] {
  transform: scale(1.2);
}

/* Rotate Animations */
[data-animate="rotate-left"] {
  transform: rotate(-15deg);
}

[data-animate="rotate-right"] {
  transform: rotate(15deg);
}

/* Special Effects */
[data-animate="bounce"] {
  transform: translateY(200px);
  animation-duration: 0.8s;
  animation-fill-mode: both;
}

[data-animate="bounce"].animate-in {
  animation-name: bounceIn;
}

[data-animate="flip"] {
  transform: perspective(1000px) rotateY(90deg);
  transform-origin: left;
  animation-duration: 0.8s;
  animation-fill-mode: both;
}

[data-animate="flip"].animate-in {
  animation-name: flipIn;
}

[data-animate="fade"] {
  opacity: 0;
  transition: opacity 0.8s ease-out;
}

/* Keyframe Animations */
@keyframes bounceIn {
  0% {
    transform: translateY(200px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes flipIn {
  to {
    transform: perspective(1000px) rotateY(0);
  }
}

/* Staggered Animations - Add delay to child elements */
[data-animate-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

[data-animate-stagger].animate-in > * {
  opacity: 1;
  transform: none;
}

/* Add different delays for staggered items */
[data-animate-stagger="0.1s"] > * {
  transition-delay: calc(var(--i) * 0.1s);
}

[data-animate-stagger="0.2s"] > * {
  transition-delay: calc(var(--i) * 0.2s);
}