/* Base state: hidden */
[data-animate] {
  opacity: 0;
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
  will-change: opacity, transform;
}

/* Directions (optional, via data-animate="fade-up" etc.) */
[data-animate],
[data-animate="fade-up"] {
  transform: translateY(24px);
}

[data-animate="fade-down"] {
  transform: translateY(-24px);
}

[data-animate="fade-left"] {
  transform: translateX(24px);
}

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

/* Final state when visible */
[data-animate].wf-in-view {
  opacity: 1;
  transform: translate(0, 0);
}

/* Optional: per-element delay via data-animate-delay=".1s" */
[data-animate][data-animate-delay] {
  transition-delay: var(--wf-animate-delay, 0s);
}


/* FADE-IN (no movement, only opacity) */
[data-animate="fade-in"] {
  transform: none;                  /* no shift */
}

[data-animate="fade-in"].wf-in-view {
  transform: none;                  /* stays still */
}

[data-animate="fade-in"] {
  opacity: 0;
  transform: none;
  transition: opacity 0.6s ease-out;   /* no transform transition needed */
}