@keyframes motion-page-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

html.motion-ready [data-page-transition] {
  opacity: 1;
  transition: opacity 0.2s ease;
}

html.motion-ready [data-page-transition].is-page-entering {
  animation: motion-page-enter 1.25s ease both;
}

html.motion-ready [data-page-transition].is-page-leaving {
  opacity: 0;
}

html.motion-ready [data-reveal] {
  opacity: 0;
  transition: opacity 1.25s ease;
}

html.motion-ready [data-reveal].is-revealed {
  opacity: 1;
}

[data-fade-frame] {
  position: relative;
}

[data-fade-frame] [data-fade-image] {
  transition: opacity 1.25s ease;
}

[data-fade-frame] [data-fade-clone] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  pointer-events: none;
  transition: opacity 1.25s ease;
}

[data-fade-frame].is-crossfading [data-fade-image] {
  opacity: 0;
}

[data-fade-frame] [data-fade-clone].is-fading {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready [data-page-transition],
  html.motion-ready [data-reveal],
  [data-fade-frame] [data-fade-image],
  [data-fade-frame] [data-fade-clone] {
    animation: none !important;
    transition: none !important;
  }

  html.motion-ready [data-page-transition],
  html.motion-ready [data-reveal] {
    opacity: 1 !important;
  }

  [data-fade-frame] [data-fade-clone] {
    opacity: 0 !important;
  }

  [data-fade-frame] [data-fade-image] {
    opacity: 1 !important;
  }
}