/* Global first-paint splash + top progress bar (observe-only; non-blocking). */

#blenny-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 20000;
  pointer-events: none;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    var(--blenny-celestial, #279af1) 0%,
    var(--blenny-slate-mid, #3372a3) 50%,
    var(--blenny-celestial, #279af1) 100%
  );
  background-size: 200% 100%;
  transition: opacity 0.18s ease, transform 0.35s ease;
}

#blenny-loading-bar.is-active {
  opacity: 1;
  transform: scaleX(0.35);
  animation: blenny-loading-bar-pulse 1.1s ease-in-out infinite;
}

#blenny-loading-bar.is-finishing {
  opacity: 1;
  transform: scaleX(1);
  animation: none;
  transition: opacity 0.25s ease 0.12s, transform 0.2s ease;
}

#blenny-loading-bar.is-finishing.is-hidden {
  opacity: 0;
}

@keyframes blenny-loading-bar-pulse {
  0% { background-position: 100% 0; transform: scaleX(0.28); }
  50% { background-position: 0% 0; transform: scaleX(0.72); }
  100% { background-position: 100% 0; transform: scaleX(0.28); }
}

#blenny-loading-splash {
  position: fixed;
  inset: 0;
  z-index: 19999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-canvas, #fafbfc);
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

#blenny-loading-splash.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#blenny-loading-splash .blenny-loading-splash__mark {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 3px solid var(--blenny-celestial-soft, rgba(39, 154, 241, 0.12));
  border-top-color: var(--blenny-celestial, #279af1);
  animation: blenny-loading-spin 0.75s linear infinite;
}

@keyframes blenny-loading-spin {
  to { transform: rotate(360deg); }
}

html[data-theme="dark"] #blenny-loading-splash {
  background: var(--color-canvas, #0f1720);
}

/* No splash on popup shells — bar only */
html.blenny-loading--no-splash #blenny-loading-splash {
  display: none !important;
}