/**
 * Duck Mode CSS - Falling Duck Animations
 * 
 * Provides CSS animations for ducks falling from the top of the screen
 * in a snowflake-like effect
 */

/* Keyframes for falling animation with horizontal drift */
@keyframes duckFall {
  0% {
    transform: translateY(-50px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(calc(100vh + 50px)) translateX(var(--drift)) rotate(var(--rotation));
    opacity: 0;
  }
}

/* Duck element styling */
.duck {
  position: fixed;
  top: -50px;
  width: 32px;
  height: 32px;
  pointer-events: none; /* Non-blocking - doesn't interfere with user interactions */
  z-index: 9999;
  animation: duckFall linear infinite;
  will-change: transform, opacity; /* Optimize for animation performance */
}

/* Variation classes for different animation speeds and drifts */
.duck-1 {
  left: 10%;
  animation-duration: 10s;
  animation-delay: 0s;
  --drift: 30px;
  --rotation: 15deg;
}

.duck-2 {
  left: 25%;
  animation-duration: 12s;
  animation-delay: 1s;
  --drift: -20px;
  --rotation: -10deg;
}

.duck-3 {
  left: 40%;
  animation-duration: 8s;
  animation-delay: 2s;
  --drift: 40px;
  --rotation: 20deg;
}

.duck-4 {
  left: 55%;
  animation-duration: 11s;
  animation-delay: 0.5s;
  --drift: -30px;
  --rotation: -15deg;
}

.duck-5 {
  left: 70%;
  animation-duration: 9s;
  animation-delay: 1.5s;
  --drift: 25px;
  --rotation: 12deg;
}

.duck-6 {
  left: 85%;
  animation-duration: 10.5s;
  animation-delay: 2.5s;
  --drift: -35px;
  --rotation: -18deg;
}

.duck-7 {
  left: 15%;
  animation-duration: 11.5s;
  animation-delay: 3s;
  --drift: 20px;
  --rotation: 8deg;
}

.duck-8 {
  left: 60%;
  animation-duration: 9.5s;
  animation-delay: 0.8s;
  --drift: -25px;
  --rotation: -12deg;
}

/* Paused state (for when app is backgrounded) */
.duck.paused {
  animation-play-state: paused;
}