/* For demo appearance only */
.scroll-animation--fly-in {
  padding-block: 1rem;
  margin-block: 1rem;
  border-block-end: 1px solid;
}

/* Only apply if the user did NOT request reduced motion */
@media (prefers-reduced-motion: no-preference) {
  /* Define the scroll animations */
  @keyframes fly-in-left {
      from {
          opacity: 0;
          translate: 100% 0 0; /* Starts offscreen to the right */
      }
      to {
          opacity: 1;
          translate: 0 0 0; /* Ends at its natural position */
      }
  }
  @keyframes fly-in-right {
      from {
          opacity: 0;
          translate: -100% 0 0; /* Starts offscreen to the left */
      }
      to {
          opacity: 1;
          translate: 0 0 0; /* Ends at its natural position */
      }
  }
  @keyframes fly-in-up {
      from {
          opacity: 0;
          translate: 0 100% 0; /* Starts offscreen to the bottom */
      }
      to {
          opacity: 1;
          translate: 0 0 0; /* Ends at its natural position */
      }
  }
  /* Apply the generic animation definitions */
  .scroll-animation--fly-in {
      animation-timing-function: linear; /* Sets a consistent animation timing */
      animation-direction: forwards; /* Tells the animation to retain the end result, rather than revert to the initial state */
      animation-duration: 0.5s; /* The duration can be adjusted, but the timeline drives it */
      animation-timeline: view(); /* Connect the animation to the view timeline */
      animation-range: entry 0% cover 50%; /* Starts when 0% is visible, ends when 50% is visible */
  }
  /* Apply the specific animations to each component */
  .fly-in--left {
      animation-name: fly-in-left;
  }
  .fly-in--right {
      animation-name: fly-in-right;
  }
  .fly-in--up {
      animation-name: fly-in-up;
  }

}