/* ========================================
   FLYING OBJECTS STYLES
   File: css/flying-objects.css
   ======================================== */

/* Container - Fixed position, behind content */
#flying-objects-container,
.flying-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 🔥 Jangan ganggu klik user */
  z-index: 500; /* 🔥 Di bawah content utama */
  overflow: hidden;
}

/* Flying Object Base */
.flying-object {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
  opacity: 1;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
  animation-fill-mode: forwards;
  /* animation-timing-function: linear; */
}

/* 🔥 ANIMATIONS */

/* 🔥 BRUTAL ANIMATIONS - More extreme positions */

@keyframes flyLeftToRight {
  0% {
    transform: translateX(-200px) translateY(0) rotate(-180deg);
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateX(calc(100vw + 200px)) translateY(-150px) rotate(540deg);
    opacity: 1;
  }
}

@keyframes flyRightToLeft {
  0% {
    transform: translateX(calc(100vw + 200px)) translateY(0) rotate(540deg);
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateX(-200px) translateY(-150px) rotate(-180deg);
    opacity: 1;
  }
}

@keyframes flyTopToBottom {
  0% {
    transform: translateX(0) translateY(-200px) rotate(-360deg);
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateX(150px) translateY(calc(100vh + 200px)) rotate(180deg);
    opacity: 1;
  }
}

@keyframes flyDiagonal {
  0% {
    transform: translateX(-200px) translateY(-200px) rotate(-720deg);
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateX(calc(100vw + 200px)) translateY(calc(100vh + 200px)) rotate(720deg);
    opacity: 1;
  }
}

/* 🔥 NEW: Erratic/Jerky Movement */
@keyframes flyErratic {
  0% {
    transform: translateX(-200px) translateY(0) rotate(-360deg) scale(0.5);
    opacity: 1;
  }
  10% {
    transform: translateX(10vw) translateY(-50px) rotate(-280deg) scale(0.7);
    opacity: 1;
  }
  20% {
    transform: translateX(20vw) translateY(30px) rotate(-200deg) scale(0.9);
    opacity: 1;
  }
  30% {
    transform: translateX(35vw) translateY(-80px) rotate(-120deg) scale(1.1);
    opacity: 1;
  }
  40% {
    transform: translateX(50vw) translateY(50px) rotate(-40deg) scale(0.8);
    opacity: 1;
  }
  50% {
    transform: translateX(60vw) translateY(-30px) rotate(40deg) scale(1);
    opacity: 1;
  }
  60% {
    transform: translateX(70vw) translateY(70px) rotate(120deg) scale(0.9);
    opacity: 1;
  }
  70% {
    transform: translateX(80vw) translateY(-50px) rotate(200deg) scale(1.1);
    opacity: 1;
  }
  80% {
    transform: translateX(90vw) translateY(30px) rotate(280deg) scale(0.8);
    opacity: 1;
  }
  90% {
    transform: translateX(100vw) translateY(-20px) rotate(360deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(calc(100vw + 200px)) translateY(-100px) rotate(540deg) scale(0.9);
    opacity: 1;
  }
}

/* Fly: Left → Right */
/* @keyframes flyLeftToRight {
  0% {
    transform: translateX(-150px) translateY(0) rotate(-40deg);
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(calc(100vw + 150px)) translateY(-100px) rotate(120deg);
    opacity: 1;
  }
} */

/* Fly: Right → Left */
/* @keyframes flyRightToLeft {
  0% {
    transform: translateX(calc(100vw + 150px)) translateY(0) rotate(105deg);
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(-150px) translateY(-100px) rotate(-110deg);
    opacity: 1;
    -webkit-transform: translateX(-150px) translateY(-100px) rotate(-110deg);
    -moz-transform: translateX(-150px) translateY(-100px) rotate(-110deg);
    -ms-transform: translateX(-150px) translateY(-100px) rotate(-110deg);
    -o-transform: translateX(-150px) translateY(-100px) rotate(-110deg);
}
} */

/* Fly: Top → Bottom */
/* @keyframes flyTopToBottom {
  0% {
    transform: translateX(0) translateY(-150px) rotate(0deg);
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(100px) translateY(calc(100vh + 150px)) rotate(120deg);
    opacity: 1;
  }
} */

/* Fly: Diagonal */
/* @keyframes flyDiagonal {
  0% {
    transform: translateX(-150px) translateY(-150px) rotate(-315deg);
    opacity: 1;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(calc(100vw + 150px)) translateY(calc(100vh - 150px)) rotate(195deg);
    opacity: 1;
  }
} */

/* 🔥 RESPONSIVE SIZING */
@media screen and (max-width: 768px) {
  .flying-object {
    max-width: 250px;
    max-height: 250px;
  }
}

@media screen and (min-width: 769px) {
  .flying-object {
    max-width: 5000px;
    max-height: 5000px;
  }
}

/* 🔥 DARK MODE */
@media (prefers-color-scheme: dark) {
  .flying-object {
    filter: drop-shadow(0 4px 6px rgba(255, 255, 255, 0.2)) brightness(0.9);
  }
}

/* 🔥 REDUCED MOTION (Accessibility) */
@media (prefers-reduced-motion: reduce) {
  .flying-object {
    animation: none !important;
    opacity: 0.3 !important;
  }
}