/* Styling for the pre-Flutter splash screen in index.html: the logo, the byte
   progress bar, and the percentage/filename detail row driven by splash.js. */

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000b1e;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.3s ease-out;
}

#loading.fade-out {
  opacity: 0;
}

#loading-logo {
  width: 120px;
  height: 120px;
  margin-bottom: 40px;
}

#loading-text {
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  margin-bottom: 30px;
}

#progress-container {
  width: 200px;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  overflow: hidden;
}

#progress-bar {
  height: 100%;
  background-color: white;
  width: 0%;
  transition: width 0.3s ease;
  border-radius: 2px;
}

/* A fixed-width row the same width as the progress bar. The percentage is
   anchored left (stationary, tabular digits) and the filename is anchored
   right and ellipsized, so neither part shifts the other as they change. */
#loading-detail {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 200px;
  margin-top: 14px;
  height: 16px;
  color: rgba(255, 255, 255, 0.7);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
}

#loading-percent {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.9);
}

#loading-file {
  flex: 1;
  min-width: 0;
  text-align: right;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Indeterminate sweep, used when the real download size is unknown. */
#progress-bar.indeterminate {
  width: 40% !important;
  transition: none;
  animation: indeterminate 1.2s ease-in-out infinite;
}

@keyframes indeterminate {
  0% { margin-left: -40%; }
  100% { margin-left: 100%; }
}