/* Define CSS custom properties with arg- prefix */
:root {
  --arg-fade-distance: 20px;
  --arg-fade-duration: 0.6s;
  --arg-fade-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --arg-fade-delay: 0.1s;
}

/* Keyframes for fade animations */
@keyframes arg-fadeUp {
  0% { opacity: 0; transform: translateY(var(--arg-fade-distance)); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes arg-fadeDown {
  0% { opacity: 0; transform: translateY(calc(-1 * var(--arg-fade-distance))); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes arg-fadeLeft {
  0% { opacity: 0; transform: translateX(var(--arg-fade-distance)); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes arg-fadeRight {
  0% { opacity: 0; transform: translateX(calc(-1 * var(--arg-fade-distance))); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Base animation classes */
.arg-fade-up,
.arg-fade-down,
.arg-fade-left,
.arg-fade-right {
  opacity: 0;
  transform-origin: center;
  will-change: opacity, transform;
}

/* Reset state when not active */
.arg-fade-up:not(.arg-fade-active) { opacity: 0; transform: translateY(var(--arg-fade-distance)); }
.arg-fade-down:not(.arg-fade-active) { opacity: 0; transform: translateY(calc(-1 * var(--arg-fade-distance))); }
.arg-fade-left:not(.arg-fade-active) { opacity: 0; transform: translateX(var(--arg-fade-distance)); }
.arg-fade-right:not(.arg-fade-active) { opacity: 0; transform: translateX(calc(-1 * var(--arg-fade-distance))); }

/* Apply animations when active */
.arg-fade-up.arg-fade-active { animation: arg-fadeUp var(--arg-fade-duration) var(--arg-fade-easing) forwards; }
.arg-fade-down.arg-fade-active { animation: arg-fadeDown var(--arg-fade-duration) var(--arg-fade-easing) forwards; }
.arg-fade-left.arg-fade-active { animation: arg-fadeLeft var(--arg-fade-duration) var(--arg-fade-easing) forwards; }
.arg-fade-right.arg-fade-active { animation: arg-fadeRight var(--arg-fade-duration) var(--arg-fade-easing) forwards; }

/* Variation: Fast animation (0.3s) */
.arg-fade-fast {
  --arg-fade-duration: 0.3s;
}

/* Variation: Slow animation (0.9s) */
.arg-fade-slow {
  --arg-fade-duration: 0.9s;
}

/* Staggered delays */
.arg-fade-up:nth-child(1), .arg-fade-down:nth-child(1), .arg-fade-left:nth-child(1), .arg-fade-right:nth-child(1) { animation-delay: calc(var(--arg-fade-delay) * 1); }
.arg-fade-up:nth-child(2), .arg-fade-down:nth-child(2), .arg-fade-left:nth-child(2), .arg-fade-right:nth-child(2) { animation-delay: calc(var(--arg-fade-delay) * 2); }
.arg-fade-up:nth-child(3), .arg-fade-down:nth-child(3), .arg-fade-left:nth-child(3), .arg-fade-right:nth-child(3) { animation-delay: calc(var(--arg-fade-delay) * 3); }
.arg-fade-up:nth-child(4), .arg-fade-down:nth-child(4), .arg-fade-left:nth-child(4), .arg-fade-right:nth-child(4) { animation-delay: calc(var(--arg-fade-delay) * 4); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .arg-fade-up,
  .arg-fade-down,
  .arg-fade-left,
  .arg-fade-right {
    animation: none;
    opacity: 1;
    transform: translate(0, 0);
  }
}