/* ============================================
   Ruffwell — Animations
   Scroll-triggered fade animations + wiggle
   ============================================ */

/* --- Base state: hidden before animation triggers --- */

[data-animate="fade-up"],
.anim-fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-animate="fade-right"],
.anim-fade-right {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-animate="fade-left"],
.anim-fade-left {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Triggered state: visible --- */

[data-animate="fade-up"].animate-in,
.anim-fade-up.animate-in {
  opacity: 1;
  transform: translateY(0);
}

[data-animate="fade-right"].animate-in,
.anim-fade-right.animate-in {
  opacity: 1;
  transform: translateX(0);
}

[data-animate="fade-left"].animate-in,
.anim-fade-left.animate-in {
  opacity: 1;
  transform: translateX(0);
}

/* --- Wiggle: form validation shake --- */

@keyframes wiggle-anim {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-6px); }
  40%  { transform: translateX(5px); }
  60%  { transform: translateX(-3px); }
  80%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

.wiggle {
  animation: wiggle-anim 0.4s ease;
}