/* ============================================================
   BagsBrain Global Loader
   Spinning hex mark + "scanning blockchain..." text
   Use: <div class="bb-loader"><div class="bb-loader-hex">...</div><div class="bb-loader-text">scanning blockchain...</div></div>
   ============================================================ */

.bb-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 20px;
}

.bb-loader-hex {
  width: 56px;
  height: 56px;
  animation: bb-hex-spin 2s linear infinite;
  filter: drop-shadow(0 0 12px rgba(214, 92, 122, 0.4));
}

.bb-loader-hex svg {
  width: 100%;
  height: 100%;
}

@keyframes bb-hex-spin {
  to { transform: rotate(360deg); }
}

.bb-loader-text {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 11px;
  color: rgba(214, 92, 122, 0.7);
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: bb-loader-blink 1s step-end infinite;
}

@keyframes bb-loader-blink {
  50% { opacity: 0.3; }
}

/* Compact variant for inline use */
.bb-loader-sm {
  padding: 24px 16px;
  gap: 12px;
}
.bb-loader-sm .bb-loader-hex {
  width: 36px;
  height: 36px;
}
.bb-loader-sm .bb-loader-text {
  font-size: 9px;
}

/* Vibes mode - green theme */
.vibes .bb-loader-hex {
  filter: drop-shadow(0 0 12px rgba(43, 174, 118, 0.4));
}
.vibes .bb-loader-hex svg polygon,
.vibes .bb-loader-hex svg line,
.vibes .bb-loader-hex svg circle {
  stroke: #4FA97A !important;
}
.vibes .bb-loader-text {
  color: rgba(43, 174, 118, 0.7);
}