/* ═══════════════════════════════════════════════════════════
   Retixus laadscherm

   De animatie zit volledig in de CSS: de balk loopt in 0,2 s vol
   en daarna vaagt het scherm weg. De JS telt alleen het percentage
   mee en ruimt het element daarna op. Werkt de JS niet, dan
   verdwijnt het scherm dus alsnog.
   ═══════════════════════════════════════════════════════════ */

.ls {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;

  background: #061527;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  animation: ls-weg 0.18s ease 0.2s forwards;
}

.ls[hidden] {
  display: none;
}

.ls-logo {
  width: 220px;
  max-width: 55vw;
  height: auto;
  object-fit: contain;
}

.ls-voortgang {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.ls-pct {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #D4AF6A;
  /* Vaste cijferbreedte, anders wiebelt de tekst tijdens het tellen. */
  font-variant-numeric: tabular-nums;
}

.ls-baan {
  width: 240px;
  max-width: 55vw;
  height: 2px;
  background: rgba(98, 114, 130, 0.28);
  overflow: hidden;
}

.ls-balk {
  display: block;
  width: 0;
  height: 100%;
  background: #D4AF6A;
  animation: ls-vullen 0.2s linear forwards;
}

@keyframes ls-vullen {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes ls-weg {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* Wie beweging heeft uitgezet, wacht niet op een animatie. */
@media (prefers-reduced-motion: reduce) {
  .ls {
    display: none;
  }
}