/* Estado de hidratação comum às telas analíticas.
 * Mantém a geometria dos cards enquanto a API é lida e impede que os
 * placeholders do HTML apareçam como se fossem dados reais. */

body.analytics-loading main {
  cursor: progress;
}

/* Route transitions keep the real canvas painted. Loading masks only the
 * data-bearing cards, never the whole page, so there is no black/blank frame. */
body.analytics-loading .stage,
body.analytics-loading .sidebar,
body.analytics-loading main {
  visibility: visible;
}
body.analytics-loading main {
  background-color: var(--analytics-theme-bg);
}

main :where(.kpi, .panel)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 40;
  border-radius: inherit;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease, visibility 0s linear 120ms;
}

body.analytics-loading main :where(.kpi, .panel) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

body.analytics-loading main :where(.kpi, .panel)::after {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
  background:
    linear-gradient(90deg, transparent 30%, color-mix(in srgb, var(--analytics-theme-accent) 8%, transparent) 48%, color-mix(in srgb, var(--analytics-theme-accent) 14%, transparent) 52%, transparent 70%) 0 0 / 220% 100%,
    linear-gradient(var(--analytics-theme-elevated), var(--analytics-theme-elevated)) 18px 18px / min(34%, 180px) 8px no-repeat,
    linear-gradient(var(--analytics-theme-surface-3), var(--analytics-theme-surface-3)) 18px 39px / min(52%, 290px) 6px no-repeat,
    linear-gradient(var(--analytics-theme-surface-2), var(--analytics-theme-surface-2)) 18px calc(100% - 20px) / min(44%, 240px) 6px no-repeat,
    var(--analytics-theme-surface-1);
  animation: analyticsSkeletonSweep 1.35s cubic-bezier(.4, 0, .2, 1) infinite;
}

body.analytics-ready main :where(.kpi, .panel)::after,
body.analytics-error main :where(.kpi, .panel)::after {
  opacity: 0;
  visibility: hidden;
}

@keyframes analyticsSkeletonSweep {
  from { background-position: 120% 0, 18px 18px, 18px 39px, 18px calc(100% - 20px), 0 0; }
  to { background-position: -120% 0, 18px 18px, 18px 39px, 18px calc(100% - 20px), 0 0; }
}

/* Runtime motion gate. `hold` survives reduce -> no-preference so removing the
 * media query cannot replay one-shot animations on already rendered content. */
body[data-analytics-motion="reduced"] *,
body[data-analytics-motion="reduced"] *::before,
body[data-analytics-motion="reduced"] *::after,
body[data-analytics-motion="hold"] *,
body[data-analytics-motion="hold"] *::before,
body[data-analytics-motion="hold"] *::after {
  animation: none !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  main :where(.kpi, .panel)::after {
    transition: none;
  }

  body.analytics-loading main :where(.kpi, .panel)::after {
    animation: none;
    background:
      linear-gradient(var(--analytics-theme-elevated), var(--analytics-theme-elevated)) 18px 18px / min(34%, 180px) 8px no-repeat,
      linear-gradient(var(--analytics-theme-surface-3), var(--analytics-theme-surface-3)) 18px 39px / min(52%, 290px) 6px no-repeat,
      linear-gradient(var(--analytics-theme-surface-2), var(--analytics-theme-surface-2)) 18px calc(100% - 20px) / min(44%, 240px) 6px no-repeat,
      var(--analytics-theme-surface-1);
  }
}