/* ============================================================
   Startup animation overlay styles
   The overlay sits on top of the page content (position: fixed)
   and fades out when the animation completes.
   ============================================================ */

#startup-overlay {
  position: fixed;
  inset: 0;                        /* covers the full viewport */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  z-index: 9999;
  font-family: 'Courier New', Courier, monospace;
  color: #00FF30;
  opacity: 1;
  transition: opacity 0.8s ease;  /* smooth fade out */
}

/* Added by startup.js when the animation finishes */
#startup-overlay.fade-out {
  opacity: 0;
  pointer-events: none;           /* stop it intercepting clicks while fading */
}

/* Inner wrapper — replaces the old .container (which conflicts with Bootstrap) */
.startup-inner {
  text-align: center;
}

.logo-container {
  position: relative;
  width: 350px;
  height: 350px;
  margin-bottom: 100px;
}

img.logo {
  width: 100%;
  height: auto;
}

.neon-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border: 1px solid #00FF30;
  border-radius: 50%;
  box-shadow: 0 0 20px #00FF30, 0 0 30px #00FF30, 0 0 40px #00FF30;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 20px #00FF30, 0 0 30px #00FF30, 0 0 40px #00FF30;
  }
  50% {
    box-shadow: 0 0 30px #00FF30, 0 0 40px #00FF30, 0 0 50px #00FF30;
  }
}

.progress-container {
  width: 80%;
  margin: 20px auto 0;
  text-align: center;
}

.progress-bar {
  width: 100%;
  height: 10px;
  background-color: black;
  border: 2px solid #00FF30;
  overflow: hidden;
}

.progress-bar::after {
  content: '';
  display: block;
  height: 100%;
  width: 0;
  background-color: #00FF30;
  animation: loadProgress 5s linear forwards;
}

@keyframes loadProgress {
  to {
    width: 100%;
  }
}

.progress-text {
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
}