/*
  Shared page loading animation.
  Keep loading order updates in this file and loading_order.js only.
*/

:root {
  --page-load-fade-duration: 0.3s;
  --page-load-step: 25ms;
}

[data-fade],
[data-load-fade],
.site-logo,
.site-menu-button,
.site-mobile-topbar__line {
  opacity: 0;
}

[data-load-fade] {
  transition: opacity var(--page-load-fade-duration) ease-out;
  transition-delay: var(--page-load-delay, 0ms);
}

[data-load-fade].is-loaded {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  [data-load-fade] {
    opacity: 1;
    transition: none;
  }
}