/* Moderne CSS 3D-animatie voor "vlieg naar camera" effect */

/* Container voor de 3D-scene */
.image-animation-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  perspective: 1500px; /* Verhoogd voor nog meer diepte */
  overflow: hidden;
  z-index: 1;
}

/* Basis stijl voor alle afbeeldingen */
.flying-image {
  position: absolute;
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity; /* Helpt browser met optimaliseren */
  /* Voeg schaduw toe voor meer diepte-gevoel */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.3s ease, transform 0.3s ease, filter 0.3s ease;
  cursor: pointer;
}

/* Hover effect voor afbeeldingen */
.flying-image:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  transform: scale(1.05) translateZ(20px);
  filter: brightness(1.1);
  z-index: 5; /* Zorgt dat de hover-afbeelding boven andere komt */
}

/* Animatie voor elke afbeelding */
@keyframes moveToCamera {
  0% {
    transform: translateZ(-6000px) scale(0.15);
    opacity: 0;
    filter: blur(2px);
  }
  20% {
    opacity: 0.6;
    filter: blur(1px);
  }
  70% {
    opacity: 0.6;
    filter: blur(0px);
  }
  100% {
    /* Laat de afbeelding verder naar buiten afwijken om het midden nog meer te mijden 
       Eindschaal verhoogd naar 1.6 */
    transform: translateZ(500px) scale(1.6) translate(60px, 40px);
    opacity: 0;
    filter: blur(1px);
  }
}

/* Tweede animatievariant die naar een andere richting afwijkt */
@keyframes moveToCamera2 {
  0% {
    transform: translateZ(-6000px) scale(0.15);
    opacity: 0;
    filter: blur(2px);
  }
  20% {
    opacity: 0.6;
    filter: blur(1px);
  }
  70% {
    opacity: 0.6;
    filter: blur(0px);
  }
  100% {
    /* Laat de afbeelding verder naar buiten afwijken 
       Eindschaal verhoogd naar 1.7 */
    transform: translateZ(500px) scale(1.7) translate(-60px, -40px);
    opacity: 0;
    filter: blur(1px);
  }
}

/* Derde animatievariant voor nog meer variatie */
@keyframes moveToCamera3 {
  0% {
    transform: translateZ(-6000px) scale(0.15);
    opacity: 0;
    filter: blur(2px);
  }
  20% {
    opacity: 0.6;
    filter: blur(1px);
  }
  70% {
    opacity: 0.6;
    filter: blur(0px);
  }
  100% {
    /* Horizontale afwijking 
       Eindschaal verhoogd naar 1.8 */
    transform: translateZ(500px) scale(1.8) translate(80px, 0px);
    opacity: 0;
    filter: blur(1px);
  }
}

/* Vierde animatievariant voor een nog vollere ervaring */
@keyframes moveToCamera4 {
  0% {
    transform: translateZ(-6000px) scale(0.15);
    opacity: 0;
    filter: blur(2px);
  }
  20% {
    opacity: 0.6;
    filter: blur(1px);
  }
  70% {
    opacity: 0.6;
    filter: blur(0px);
  }
  100% {
    /* Verticale afwijking 
       Eindschaal verhoogd naar 1.9 */
    transform: translateZ(500px) scale(1.9) translate(0px, -80px);
    opacity: 0;
    filter: blur(1px);
  }
}

/* Verdeel de afbeeldingen over vier animatievarianten */
.flying-image:nth-child(4n) {
  animation: moveToCamera 22s linear infinite;
}

.flying-image:nth-child(4n+1) {
  animation: moveToCamera2 24s linear infinite;
}

.flying-image:nth-child(4n+2) {
  animation: moveToCamera3 20s linear infinite;
}

.flying-image:nth-child(4n+3) {
  animation: moveToCamera4 26s linear infinite;
}

/* Verschillende startpunten in de animatie voor meer spreiding */
.flying-image:nth-child(5n) {
  animation-delay: -4s;
}

.flying-image:nth-child(5n+1) {
  animation-delay: -8s;
}

.flying-image:nth-child(5n+2) {
  animation-delay: -12s;
}

.flying-image:nth-child(5n+3) {
  animation-delay: -16s;
}

.flying-image:nth-child(5n+4) {
  animation-delay: -20s;
}

/* Voeg subtiele rotatie toe voor meer dynamiek */
.flying-image:nth-child(3n) {
  animation-name: moveToCamera-rotate-right;
}

.flying-image:nth-child(3n+1) {
  animation-name: moveToCamera-rotate-left;
}

.flying-image:nth-child(3n+2) {
  animation-name: moveToCamera-rotate-alt;
}

@keyframes moveToCamera-rotate-right {
  0% {
    transform: translateZ(-6000px) scale(0.15) rotate(-5deg);
    opacity: 0;
    filter: blur(2px);
  }
  20% {
    opacity: 0.6;
    filter: blur(1px);
  }
  70% {
    opacity: 0.6;
    filter: blur(0px);
  }
  100% {
    /* Laat de afbeelding verder naar buiten afwijken 
       Eindschaal verhoogd naar 1.7 */
    transform: translateZ(500px) scale(1.7) translate(70px, 20px) rotate(8deg);
    opacity: 0;
    filter: blur(1px);
  }
}

@keyframes moveToCamera-rotate-left {
  0% {
    transform: translateZ(-6000px) scale(0.15) rotate(5deg);
    opacity: 0;
    filter: blur(2px);
  }
  20% {
    opacity: 0.6;
    filter: blur(1px);
  }
  70% {
    opacity: 0.6;
    filter: blur(0px);
  }
  100% {
    /* Laat de afbeelding verder naar buiten afwijken 
       Eindschaal verhoogd naar 1.8 */
    transform: translateZ(500px) scale(1.8) translate(-70px, 20px) rotate(-8deg);
    opacity: 0;
    filter: blur(1px);
  }
}

@keyframes moveToCamera-rotate-alt {
  0% {
    transform: translateZ(-6000px) scale(0.15) rotate(0deg);
    opacity: 0;
    filter: blur(2px);
  }
  20% {
    opacity: 0.6;
    filter: blur(1px);
  }
  70% {
    opacity: 0.6;
    filter: blur(0px);
  }
  100% {
    /* Laat de afbeelding verder naar buiten afwijken 
       Eindschaal verhoogd naar 1.9 */
    transform: translateZ(500px) scale(1.9) translate(0px, 70px) rotate(5deg);
    opacity: 0;
    filter: blur(1px);
  }
}