/* Scroll Animations */
[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

[data-animate].animated {
  opacity: 1;
  transform: translateY(0);
}

/* Fade left / right */
[data-animate="fade-left"] {
  transform: translateX(-30px);
}
[data-animate="fade-left"].animated {
  transform: translateX(0);
}

[data-animate="fade-right"] {
  transform: translateX(30px);
}
[data-animate="fade-right"].animated {
  transform: translateX(0);
}

/* Zooms */
[data-animate="zoom-in"] {
  transform: scale(0.85);
}
[data-animate="zoom-in"].animated {
  transform: scale(1);
}

[data-animate="zoom-out"] {
  transform: scale(1.15);
}
[data-animate="zoom-out"].animated {
  transform: scale(1);
  opacity: 1;
}

/* Slide-ins (fixed: no more 100%) */
[data-animate="slide-in-left"] {
  transform: translateX(-40px);
}
[data-animate="slide-in-left"].animated {
  transform: translateX(0);
  opacity: 1;
}

[data-animate="slide-in-right"] {
  transform: translateX(40px);
}
[data-animate="slide-in-right"].animated {
  transform: translateX(0);
  opacity: 1;
}

[data-animate="slide-in-top"] {
  transform: translateY(-40px);
}
[data-animate="slide-in-top"].animated {
  transform: translateY(0);
  opacity: 1;
}

[data-animate="slide-in-bottom"] {
  transform: translateY(40px);
}
[data-animate="slide-in-bottom"].animated {
  transform: translateY(0);
  opacity: 1;
}

/* Scale / 3D */
[data-animate="slide-in-center"] {
  transform: scale(0.5);
}
[data-animate="slide-in-center"].animated {
  transform: scale(1);
  opacity: 1;
}

[data-animate="slide-in-3d"] {
  transform: rotateY(90deg);
  transform-origin: top;
}
[data-animate="slide-in-3d"].animated {
  transform: rotateY(0deg);
  opacity: 1;
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

/* Spins */
[data-animate="spin-left"] {
  transform: rotateY(-180deg);
  transform-origin: left;
  opacity: 0;
}
[data-animate="spin-left"].animated {
  transform: rotateY(0deg);
  opacity: 1;
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

[data-animate="spin-right"] {
  transform: rotateY(180deg);
  transform-origin: right;
  opacity: 0;
}
[data-animate="spin-right"].animated {
  transform: rotateY(0deg);
  opacity: 1;
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

/* Rotates */
[data-animate="rotate-left"] {
  transform: rotate(-180deg);
  opacity: 0;
}
[data-animate="rotate-left"].animated {
  transform: rotate(0deg);
  opacity: 1;
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

[data-animate="rotate-right"] {
  transform: rotate(180deg);
  opacity: 0;
}
[data-animate="rotate-right"].animated {
  transform: rotate(0deg);
  opacity: 1;
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}