/* ===== Loading UI - Thinking Nine Animation ===== */

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  background: rgba(5, 5, 5, 0.95);
  z-index: 9999;
  opacity: 1;
  transition: opacity 300ms ease;
  pointer-events: auto;
  will-change: opacity;
}

.loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
  will-change: auto;
}

.loading-container {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 12px;
  max-width: 200px;
  will-change: transform;
}

.loading-frame {
  width: min(35vmin, 180px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  will-change: transform;
}

.loading-frame svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  backface-visibility: hidden;
  perspective: 1000px;
  shape-rendering: crispEdges;
  image-rendering: optimizeSpeed;
}

.loading-meta {
  display: grid;
  gap: 4px;
  text-align: center;
  color: #f5f5f5;
  font-family: Inter, system-ui, sans-serif;
}

.loading-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.loading-tag {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}

/* ===== Smooth fade transitions ===== */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.loading-overlay.show {
  animation: fadeIn 200ms ease forwards;
}

.loading-overlay.hide {
  animation: fadeOut 300ms ease forwards;
}