/* ============================================
   NAVIGATION LOADING OVERLAY
   ============================================ */

.chm-nav-loading {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 6, 8, .34);
  backdrop-filter: blur(3px) saturate(115%);
  -webkit-backdrop-filter: blur(3px) saturate(115%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.chm-nav-loading--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

html.chm-nav-loading-active,
html.chm-nav-loading-active body {
  overflow: hidden !important;
  touch-action: none;
}

.chm-nav-loading__spinner {
  width: 3rem;
  height: 3rem;
  position: relative;
}

.chm-nav-loading__ring {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .12);
  border-top-color: #ff9f1f;
  border-right-color: #f58a00;
  animation: chmNavSpin .78s linear infinite;
  box-shadow:
    0 0 18px rgba(245, 138, 0, .32),
    inset 0 0 10px rgba(245, 138, 0, .08);
}

.chm-nav-loading__ring::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-bottom-color: rgba(255, 208, 138, .75);
  animation: chmNavSpinReverse 1.15s linear infinite;
}

.chm-nav-loading--admin .chm-nav-loading__ring {
  border-top-color: var(--color-primary-light, #A8B79F);
  border-right-color: var(--color-primary, #76896B);
  box-shadow:
    0 0 18px rgb(var(--color-primary-rgb, 118 137 107) / .34),
    inset 0 0 10px rgb(var(--color-primary-rgb, 118 137 107) / .1);
}

.chm-nav-loading--admin .chm-nav-loading__ring::after {
  border-bottom-color: rgb(var(--color-accent-light-rgb, 242 164 90) / .75);
}

@keyframes chmNavSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes chmNavSpinReverse {
  to {
    transform: rotate(-360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chm-nav-loading {
    transition: none;
  }

  .chm-nav-loading__ring,
  .chm-nav-loading__ring::after {
    animation: none;
  }

  .chm-nav-loading__ring {
    border-top-color: #f58a00;
    border-right-color: #f58a00;
  }

  .chm-nav-loading--admin .chm-nav-loading__ring {
    border-top-color: var(--color-primary, #76896B);
    border-right-color: var(--color-primary, #76896B);
  }
}