/* Animation Definition */
@keyframes cspFadeInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes cspFadeInUp {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Initial Hidden State */
.csp-left-image,
.csp-arrow,
.csp-right-image {
  opacity: 0;
  will-change: transform, opacity;
}

/* Trigger Animations when Container is Visible */
.csp-image-animation.is-visible .csp-left-image,
.csp-image-animation.is-visible .csp-arrow,
.csp-image-animation.is-visible .csp-right-image {
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
  animation-fill-mode: forwards;
}

/* Specific Animations & Sequenced Delays */
.csp-image-animation.is-visible .csp-left-image {
  animation-name: cspFadeInRight;
  animation-delay: 0.1s;
}

.csp-image-animation.is-visible .csp-arrow {
  animation-name: cspFadeInUp;
  animation-delay: 1.1s;
}

.csp-image-animation.is-visible .csp-right-image {
  animation-name: cspFadeInUp;
  animation-delay: 2.1s;
}

/* 4. Accessibility */
@media (prefers-reduced-motion: reduce) {
  .csp-left-image,
  .csp-arrow,
  .csp-right-image {
    opacity: 1;
    transform: none !important;
  }
  .csp-image-animation.is-visible .csp-left-image,
  .csp-image-animation.is-visible .csp-arrow,
  .csp-image-animation.is-visible .csp-right-image {
    animation: none !important;
  }
}