.loading-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, #0b0f18, #020409);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
  transition: opacity 1s ease, visibility 1s ease;
}

.loading-overlay.fade-out {
  opacity: 0;
  visibility: hidden;
}

.progress-bar {
  width: 80%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.progress-bar::before {
  content: "";
  position: absolute;
  top: 0; left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, rgb(0, 166, 255), rgb(0, 130, 217), rgb(0, 110, 255));
  animation: progress-move 1.2s linear infinite;
  border-radius: 4px;
}

@keyframes progress-move {
  0% { left: -40%; }
  100% { left: 100%; }
}

body:not(.hall-visible) main,
body:not(.hall-visible) header,
body:not(.hall-visible) footer {
  opacity: 0;
  pointer-events: none;
}

body.hall-visible main,
body.hall-visible header,
body.hall-visible footer {
  animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(1.02); }
  to { opacity: 1; transform: scale(1); }
}