/*
 * File: css/base/animations.css
 * Logic: Shared keyframes used by hero slideshow variants.
 */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, var(--switch-translation), 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Opt-in scroll entrance — used by .wsdt-enter-* utilities */
@keyframes wsdt-bounce-in-up {
  0% {
    opacity: 0;
    transform: translate3d(0, var(--space-lg), 0);
  }

  55% {
    opacity: 1;
    transform: translate3d(0, calc(var(--space-xs) * -1), 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes wsdt-bounce-in-left {
  0% {
    opacity: 0;
    transform: translate3d(calc(var(--space-lg) * -1), 0, 0);
  }

  55% {
    opacity: 1;
    transform: translate3d(var(--space-xs), 0, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes wsdt-bounce-in-right {
  0% {
    opacity: 0;
    transform: translate3d(var(--space-lg), 0, 0);
  }

  55% {
    opacity: 1;
    transform: translate3d(calc(var(--space-xs) * -1), 0, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}