/* Content is visible by default. Scroll motion only plays after an element enters view. */
@media (prefers-reduced-motion: no-preference) {
  [data-dgp-motion].is-visible {
    animation-duration: 500ms;
    animation-timing-function: ease-out;
    animation-delay: var(--dgp-motion-delay, 0ms);
    animation-fill-mode: both;
  }
  [data-dgp-motion="headline"].is-visible { animation-name: dgp-motion-headline; animation-duration: 550ms; }
  [data-dgp-motion="rise"].is-visible { animation-name: dgp-motion-rise; }
  [data-dgp-motion="slide-left"].is-visible { animation-name: dgp-motion-left; }
  [data-dgp-motion="slide-right"].is-visible { animation-name: dgp-motion-right; }
  [data-dgp-motion="panel-right"].is-visible { animation-name: dgp-motion-panel; animation-duration: 550ms; }
  [data-dgp-motion="image-reveal"].is-visible { animation-name: dgp-motion-image; animation-duration: 550ms; }

  @keyframes dgp-motion-headline {
    from { opacity: .75; translate: 0 12px; }
    to { opacity: 1; translate: 0 0; }
  }
  @keyframes dgp-motion-rise {
    from { opacity: .75; translate: 0 12px; }
    to { opacity: 1; translate: 0 0; }
  }
  @keyframes dgp-motion-left {
    from { opacity: .75; translate: -12px 0; }
    to { opacity: 1; translate: 0 0; }
  }
  @keyframes dgp-motion-right {
    from { opacity: .75; translate: 12px 0; }
    to { opacity: 1; translate: 0 0; }
  }
  @keyframes dgp-motion-panel {
    from { opacity: .75; translate: 12px 0; }
    to { opacity: 1; translate: 0 0; }
  }
  @keyframes dgp-motion-image {
    from { opacity: .75; translate: 0 10px; }
    to { opacity: 1; translate: 0 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-dgp-motion] {
    animation: none !important;
    opacity: 1 !important;
    translate: none !important;
    filter: none !important;
  }
}