/* 1. Dit zorgt ervoor dat de container netjes gecentreerd staat en duwt het geheel iets omhoog */
.center-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    gap: 15px; /* Dit bepaalt exact de afstand tussen de afbeeldingen en de tekst */
    box-sizing: border-box;
    padding-bottom: 8vh; /* HIERMEE DUW JE ALLES HOGER: Verhoog dit percentage om het nog hoger te zetten */
}

/* 2. De image-stack gebruikt nu grid zonder storende visuele transforms */
.image-stack {
  display: inline-grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
  max-width: 300px; 
  width: 100%;
}

.image-stack img {
  grid-column: 1;
  grid-row: 1;
  width: 100%; 
  height: auto;
}

/* 3. De laadtekst sluit nu direct aan dankzij de 'gap' hierboven */
#loading-text-fixed {
    margin-top: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    color: #4a5568;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: center;
}

/* 3. De laadtekst sluit nu direct aan dankzij de 'gap' hierboven */
#loading-text {
    margin-top: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    color: #4a5568;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: center;
}

/* Specifieke laag-volgorde */
.layer-bg { z-index: 1; }
.layer-middle { z-index: 2; }
.layer-top { z-index: 3; }

/* Animatie 1: Pulserend schild */
.pulse {
  animation: pulseAnimation 2s infinite ease-in-out;
}

@keyframes pulseAnimation {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Animatie 2: Roterende cirkel */
.rotate {
  animation: rotateAnimation 8s infinite linear;
}

@keyframes rotateAnimation {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
}