/* ============================
   Noctra – Core Variables
============================ */
:root {
  --noctra-bg: #050507;
  --noctra-accent: #7C5CFF;
  --noctra-accent-soft: rgba(124, 92, 255, 0.45);
  --noctra-muted: #9AA0B3;
}

/* ============================
   Noctra Hourglass (SVG)
============================ */

.noctra-hourglass {
  width: 36px;
  height: 36px;

  color: var(--noctra-accent);
  transform-origin: 50% 50%;

  animation: hourglass-spin 2.2s ease-in-out infinite;
}

/* ============================
   Loader Wrapper (Glow seguro)
============================ */

.noctra-loader {
  display: grid;
  place-items: center;

  filter: drop-shadow(0 0 14px var(--noctra-accent-soft));
}

/* ============================
   Block UI (seu uso atual)
============================ */

.block-ui {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(
    180deg,
    rgba(5, 7, 7, 0.65),
    rgba(5, 7, 7, 0.45)
  );

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.block-ui.is-active {
  opacity: 1;
  pointer-events: auto;
}

.block-ui-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;

  padding: 28px 32px;
  border-radius: 16px;

  background: radial-gradient(
    400px 200px at 50% -40%,
    rgba(124, 92, 255, 0.12),
    rgba(18, 24, 38, 0.85)
  );

  border: 1px solid rgba(124, 92, 255, 0.18);

  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.block-ui-text {
  font-size: 0.9rem;
  color: var(--noctra-muted);
  letter-spacing: 0.02em;
}

/* ============================
   Animations
============================ */

@keyframes hourglass-spin {
  0% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(180deg);
  }
  55% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}