/**
 * page-loader.css
 *
 * Dandiran WooCommerce Theme — Page Transition Loading Bar
 *
 * A thin bar pinned to the very top of the viewport (above the
 * header) that fills left-to-right with a green gradient while the
 * browser navigates to the next page — the classic YouTube/NProgress
 * top-loading bar, driven by assets/js/page-loader.js.
 *
 * width is anchored from `left: 0`, so it always grows physically
 * left-to-right regardless of the site's RTL text direction (the
 * `direction` property doesn't affect a plain fixed-position box's
 * width growth).
 */

.dnd-page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 6px;
  z-index: 100000;
  background: linear-gradient(268deg, #ff5d5d, #c01e2d);
  opacity: 0;
  pointer-events: none;
  transition:
    width 0.5s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.25s ease;
}

.dnd-page-loader.is-active {
  opacity: 1;
}

/* Grows toward — but deliberately not all the way to — 100%, so it
   keeps looking "alive" no matter how long navigation actually
   takes. Only reaches 100% via .is-done, see page-loader.js. */
.dnd-page-loader.is-loading {
  width: 78%;
}

.dnd-page-loader.is-done {
  width: 100%;
  transition:
    width 0.25s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.35s ease 0.15s;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .dnd-page-loader {
    transition: opacity 0.2s ease;
  }
}