@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.header-pop {
  /* Startpositie: verborgen boven het scherm */
  transform: translateY(-100%);
  opacity: 0;
  
  /* Animatie-eigenschappen */
  animation: slideDown 0.4s ease-out forwards;
  
  /* Optioneel: voeg een kleine vertraging toe voor betere UX */
  animation-delay: 0.2s;
}

/* Keyframes voor de slide-down animatie */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.content-pop {
  /* Startpositie: kleine offset onder de normale positie */
  transform: translateY(30px);
  opacity: 0;
  
  /* Animatie start na header-pop (0.2s delay + 0.6s duration = 0.8s) */
  animation: slideUp 0.3s ease-out forwards;
  animation-delay: 0.7s;
}

/* Keyframes voor de slide-up animatie */
@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.decrypt-pop {
  animation: 
    zoomBounceLoop 2s ease-in-out 1.9s infinite;
}

/* Zoom-bounce loop animatie */
@keyframes zoomBounceLoop {
  0% {
    transform: scale(1);
  }
  8% {
    transform: scale(1.15);
  }
  16% {
    transform: scale(0.95);
  }
  24% {
    transform: scale(1.05);
  }
  32% {
    transform: scale(1);
  }
  /* Pauze van 32% tot 100% (68% van de tijd) */
  100% {
    transform: scale(1);
  }
}

#decrypt-bar {
  /* Startpositie: onzichtbaar */
  opacity: 0;
  
  /* Animatie start na content-pop (zelfde timing als decrypt-pop) */
  animation: fadeIn 0.3s ease-out 1.3s forwards;
}

/* Als je alsnog de class-based approach wilt gebruiken */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}