/* Scroll Animation Utilities */
/*
  Elements use class .sa and data attributes to select animation:
  - data-sa: fade-in | fade-in-up | fade-in-down | fade-in-left | fade-in-right | zoom-in
  - data-sa-duration: e.g. 600ms | 0.6s
  - data-sa-delay: e.g. 120ms | 0.12s
  - data-sa-once: "true" (default) or "false"
  - Container stagger: data-sa-stagger=".child-selector" + optional data-sa-stagger-step="120ms"
*/

.sa {
  opacity: 0;
  will-change: transform, opacity;
}

.sa.sa-show {
  opacity: 1;
}

/* Mapping data-sa values to animations */
[data-sa="fade-in"].sa-show {
  animation: sa-fade-in var(--sa-duration, 600ms) ease var(--sa-delay, 0ms) both;
}

[data-sa="fade-in-up"].sa-show {
  animation: sa-fade-in-up var(--sa-duration, 600ms) ease var(--sa-delay, 0ms) both;
}

[data-sa="fade-in-down"].sa-show {
  animation: sa-fade-in-down var(--sa-duration, 600ms) ease var(--sa-delay, 0ms) both;
}

[data-sa="fade-in-left"].sa-show {
  animation: sa-fade-in-left var(--sa-duration, 600ms) ease var(--sa-delay, 0ms) both;
}

/* Use existing keyframes from animation.css for fade-in-right */
[data-sa="fade-in-right"].sa-show {
  animation: fade-in-right var(--sa-duration, 700ms) cubic-bezier(0.2, 0.8, 0.2, 1) var(--sa-delay, 0ms) both;
}

[data-sa="zoom-in"].sa-show {
  animation: sa-zoom-in var(--sa-duration, 600ms) ease var(--sa-delay, 0ms) both;
}

/* Keyframes */
@keyframes sa-fade-in {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes sa-fade-in-up {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes sa-fade-in-down {
  from {
    opacity: 0;
    transform: translate3d(0, -16px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes sa-fade-in-left {
  from {
    opacity: 0;
    transform: translate3d(16px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes sa-zoom-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}