/* App-owned navigation feedback. It is intentionally lightweight so route
 * changes never hide the page or imitate a cold framework boot. */
.nn-route-loading {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  position: fixed;
  right: 50%;
  bottom: 50%;
  z-index: 100;
  min-height: 22px;
  padding: 8px 12px;
  color: var(--nn-fg, #f5f5f0);
  background: rgba(117, 114, 110, 0.36);
  border: 1px solid color-mix(in srgb, var(--nn-accent, #d4af37) 35%, transparent);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transform: translate(50%, 50%) scale(.8);
  transition: opacity .16s ease, transform .16s ease;
  animation: nn-route-spin .7s linear infinite;
}
.nn-route-loading.is-visible { opacity: 1; transform: translate(50%, 50%) scale(1); }
.nn-route-loading::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 2px solid color-mix(in srgb, var(--nn-accent, #d4af37) 25%, transparent);
  border-top-color: var(--nn-accent, #d4af37);
  border-radius: 50%;
  animation: nn-route-spin .7s linear infinite;
}
.nn-route-loading-label { font-size: .8rem; letter-spacing: .03em; }
@keyframes nn-route-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .nn-route-loading { animation: none; }
}

html.nn-route-pending #punaithirali-root {
  opacity: 0;
  transition: opacity .12s ease;
}