/* Hide scrollbars during app load */
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

/* Hide scrollbars for webkit browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbars for Firefox */
html {
  scrollbar-width: none;
}

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #000000;
  animation: fadeIn 0.3s ease-out;
}

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

.indicator {
  width: 64px;
  height: 64px;
  margin-bottom: 40px;
}

/* Single pill progress bar */
.progress-bar-track {
  width: 260px;
  height: 10px;
  border-radius: 5px;
  background-color: #222222;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #EDE5C8 0%, #C8DCF5 35%, #78B0F8 65%, #4878E8 100%);
  transform-origin: left;
  transform: scaleX(0);
  animation: barFill 15s linear forwards;
}

@keyframes barFill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}