/* Instant-on-load entrance animations. Linked from index.html (pre-JS) and index.css (app). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes load-fade {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .landing-enter .enter-eyebrow {
    animation: load-fade 280ms cubic-bezier(0.16, 1, 0.3, 1) 50ms both;
  }

  .landing-enter .enter-headline {
    animation: load-fade 440ms cubic-bezier(0.16, 1, 0.3, 1) 110ms both;
  }

  .landing-enter .enter-subhead {
    animation: load-fade 440ms cubic-bezier(0.16, 1, 0.3, 1) 250ms both;
  }

  .landing-enter .enter-cta {
    animation: load-fade 440ms cubic-bezier(0.16, 1, 0.3, 1) 380ms both;
  }

  .landing-enter .enter-balance {
    animation: load-fade 440ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both;
  }

  .landing-enter .enter-bar-top {
    animation: load-fade 440ms ease-out 450ms both;
  }

  .landing-enter .enter-bar-bottom {
    animation: load-fade 440ms ease-out 520ms both;
  }

  .landing-enter .enter-axis {
    animation: load-fade 280ms ease-out 620ms both;
  }
}