.sa-base > * {
  transition:
    opacity var(--sa-duration, 500ms) ease var(--sa-delay, 0ms),
    transform var(--sa-duration, 500ms) ease var(--sa-delay, 0ms),
    filter var(--sa-duration, 500ms) ease var(--sa-delay, 0ms);
}

/* fade */
.sa-effect-fade > *,
.sa-effect-fade.sa-exit-up > *,
.sa-effect-fade.sa-exit-down > * {
  opacity: 0;
}
.sa-effect-fade.sa-visible > * {
  opacity: 1;
}

/* floatUp — enters from below, exits upward */
.sa-effect-floatUp > *,
.sa-effect-floatUp.sa-exit-down > * {
  opacity: 0;
  transform: translateY(40px);
}
.sa-effect-floatUp.sa-exit-up > * {
  opacity: 0;
  transform: translateY(-40px);
}
.sa-effect-floatUp.sa-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* floatDown — enters from above, exits downward */
.sa-effect-floatDown > *,
.sa-effect-floatDown.sa-exit-down > * {
  opacity: 0;
  transform: translateY(-40px);
}
.sa-effect-floatDown.sa-exit-up > * {
  opacity: 0;
  transform: translateY(40px);
}
.sa-effect-floatDown.sa-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* slideLeft — enters from right */
.sa-effect-slideLeft > *,
.sa-effect-slideLeft.sa-exit-down > * {
  opacity: 0;
  transform: translateX(50px);
}
.sa-effect-slideLeft.sa-exit-up > * {
  opacity: 0;
  transform: translateX(-50px);
}
.sa-effect-slideLeft.sa-visible > * {
  opacity: 1;
  transform: translateX(0);
}

/* slideRight — enters from left */
.sa-effect-slideRight > *,
.sa-effect-slideRight.sa-exit-down > * {
  opacity: 0;
  transform: translateX(-50px);
}
.sa-effect-slideRight.sa-exit-up > * {
  opacity: 0;
  transform: translateX(50px);
}
.sa-effect-slideRight.sa-visible > * {
  opacity: 1;
  transform: translateX(0);
}

/* zoomIn */
.sa-effect-zoomIn > *,
.sa-effect-zoomIn.sa-exit-down > * {
  opacity: 0;
  transform: scale(0.85);
}
.sa-effect-zoomIn.sa-exit-up > * {
  opacity: 0;
  transform: scale(1.1);
}
.sa-effect-zoomIn.sa-visible > * {
  opacity: 1;
  transform: scale(1);
}

/* blurIn */
.sa-effect-blurIn > *,
.sa-effect-blurIn.sa-exit-up > *,
.sa-effect-blurIn.sa-exit-down > * {
  opacity: 0;
  filter: blur(8px);
}
.sa-effect-blurIn.sa-visible > * {
  opacity: 1;
  filter: blur(0px);
}

/* Respect reduced-motion preferences — skip the moving/blurring parts,
   keep only the opacity fade so content still "arrives" gently. */
@media (prefers-reduced-motion: reduce) {
  .sa-base > * {
    transition: opacity var(--sa-duration, 500ms) ease var(--sa-delay, 0ms);
  }
  .sa-effect-floatUp > *,
  .sa-effect-floatUp.sa-exit-up > *,
  .sa-effect-floatUp.sa-exit-down > *,
  .sa-effect-floatDown > *,
  .sa-effect-floatDown.sa-exit-up > *,
  .sa-effect-floatDown.sa-exit-down > *,
  .sa-effect-slideLeft > *,
  .sa-effect-slideLeft.sa-exit-up > *,
  .sa-effect-slideLeft.sa-exit-down > *,
  .sa-effect-slideRight > *,
  .sa-effect-slideRight.sa-exit-up > *,
  .sa-effect-slideRight.sa-exit-down > *,
  .sa-effect-zoomIn > *,
  .sa-effect-zoomIn.sa-exit-up > *,
  .sa-effect-zoomIn.sa-exit-down > *,
  .sa-effect-blurIn > *,
  .sa-effect-blurIn.sa-exit-up > *,
  .sa-effect-blurIn.sa-exit-down > * {
    transform: none;
    filter: none;
  }
}