.workflow-thread-animated {
  /*
    this is also set in workflow-thread.ts
    based on prefers-reduced-motion
  */
  --thread-animation-interval: 0ms;
}

/*
  If the user has expressed their preference for
  reduced motion, then don't use animations.
*/
@media (prefers-reduced-motion: reduce) {
  .workflow-postable-animated,
  .workflow-milestone-banner-animated,
  .workflow-date-divider-animated {
    animation: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use animations.
*/
@media (prefers-reduced-motion: no-preference) {
  .workflow-postable-animated,
  .workflow-milestone-banner-animated,
  .workflow-date-divider-animated {
    /* min() is to respect the duration thread interval duration set during development */
    animation:
      thread-item-revealed ease-out
      min(var(--thread-item-reveal-duration, 200ms), var(--thread-animation-interval)) backwards;
  }

  .workflow-postable-animated,
  .workflow-date-divider-animated {
    --thread-item-reveal-duration: 200ms;
  }

  .workflow-postable-animated--has-card {
    --thread-item-reveal-duration: 400ms;
  }

  .workflow-milestone-banner-animated {
    /*
    this is 1s in XD.
    However, setting to 800ms so we don't look like we have 2 items being added at once
    when there is a completed milestone and a message coming right after it
    Alternatively we can make the interval > 1s and set this to 1s.
    */
    --thread-item-reveal-duration: 800ms;
  }
}

@keyframes thread-item-revealed {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }

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