/* Modern UI Phase 12 — Loading Experience | var.30 navigation performance fix */
:root {
  --loading-accent: #0d5c63;
  --loading-surface: #f7faf9;
  --loading-track: rgba(13, 92, 99, .18);
}
html[data-theme="dark"] {
  --loading-surface: #10191b;
  --loading-track: rgba(255, 255, 255, .16);
}

/* Thin, non-blocking progress indicator. */
html.ui-loading::before {
  content: "";
  position: fixed;
  z-index: 2147483646;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--loading-accent) 18%,
    var(--loading-accent) 58%,
    transparent 78%);
  transform: translateX(-75%);
  animation: grafo-loading-progress 1.05s ease-in-out infinite;
  pointer-events: none;
}

html.ui-loading body {
  background-color: var(--loading-surface);
}
/* var.30: loading state never hides or delays page content. */
html.ui-loading body > :not(script),
html.ui-ready body > :not(script) {
  opacity: 1;
}

/* Image loading states are subtle and preserve layout. */
img.ui-image-pending {
  opacity: .35;
  filter: saturate(.7);
  transition: opacity .28s ease, filter .28s ease;
}
img.ui-image-ready {
  opacity: 1;
  filter: none;
}
img.ui-image-error {
  opacity: .7;
}

/* Viewers and embedded documents get a stable loading surface. */
:where(iframe, embed, object).ui-frame-pending {
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent),
    var(--loading-track);
  background-size: 220% 100%;
  animation: grafo-loading-shimmer 1.2s linear infinite;
}
:where(iframe, embed, object).ui-frame-ready {
  animation: none;
  background: transparent;
}

/* Keep the theme button on the requested left side. */
.theme-toggle {
  left: max(14px, env(safe-area-inset-left)) !important;
  right: auto !important;
}
@media (max-width: 700px) {
  .theme-toggle { left: 10px !important; right: auto !important; }
}

@keyframes grafo-loading-progress {
  0% { transform: translateX(-75%); }
  100% { transform: translateX(115%); }
}
@keyframes grafo-loading-shimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  html.ui-loading::before { animation: none; transform: none; }
  img.ui-image-pending, img.ui-image-ready { transition: none; }
  :where(iframe, embed, object).ui-frame-pending { animation: none; }
}
@media print {
  html.ui-loading::before { display: none !important; }
  html.ui-loading body > :not(script), html.ui-ready body > :not(script) {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
}