/* duck-rain.css
   Lightweight, robust stylesheet for the duck rain effect.
   Designed to work with a simple JS that injects <img class="falling-duck"> elements.
   - Uses 'top' and 'opacity' for the falling animation so inline transform (scale)
     applied by JS is preserved on the element.
   - Keeps pointer-events: none so ducks don't block taps.
   - Respects prefers-reduced-motion and provides smaller sizes on narrow screens.
*/

/* Base falling duck style */
.falling-duck {
  position: fixed;
  top: -140px;                /* start above the viewport */
  left: 0;                    /* JS should set a specific left positioning */
  width: 60px;                /* default width; JS may override this */
  height: auto;
  pointer-events: none;       /* let clicks/taps pass through to the page */
  z-index: 999999;            /* above most UI but below any intentionally higher overlays */
  will-change: top, opacity;
  transform-origin: center;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.22));
  opacity: 1;
  /* Fall animation: animates top and opacity so JS-applied transforms (scale) remain */
  animation: duckFall 2.6s linear forwards;
  transition: opacity 260ms linear;
}

/* Allow JS to slightly vary duration and delay via inline style or CSS custom properties:
   Example (set by JS):
      el.style.animation = 'duckFall 3000ms linear 120ms forwards';
   or set custom properties and use them in a combined animation (not required).
*/

/* Slight wobble using a second, fast animation that only changes filter/translateZ when supported.
   This is optional and subtle; if transform is animated elsewhere it won't fight JS scale since we
   don't change transform here (we use translateZ or filter tricks). */
.falling-duck.wobble {
  /* small, hardware-friendly visual wobble via drop-shadow shift using keyframes below */
  animation-name: duckFall, duckWobble;
  animation-duration: 2.6s, 1.2s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards, none;
  animation-delay: 0s, 0s;
}

/* Responsive: slightly larger ducks on small screens */
@media (max-width: 520px) {
  .falling-duck { width: 72px; }
}

/* Keyframes animating vertical motion via 'top' so inline element transforms (scale) are preserved */
@keyframes duckFall {
  0% {
    top: -160px;
    opacity: 1;
  }
  60% {
    /* mid-fall: keep slightly visible */
    opacity: 0.98;
  }
  100% {
    top: 110vh;  /* well past the bottom of the viewport */
    opacity: 0.92;
  }
}

/* Subtle wobble effect implemented as a faux 3D shift via filter drop-shadow and translateZ (very light) */
@keyframes duckWobble {
  0%   { filter: drop-shadow(0 8px 18px rgba(0,0,0,0.22)); transform: translateZ(0); }
  25%  { filter: drop-shadow(4px 6px 18px rgba(0,0,0,0.20)); transform: translateZ(1px); }
  50%  { filter: drop-shadow(0 8px 18px rgba(0,0,0,0.22)); transform: translateZ(0); }
  75%  { filter: drop-shadow(-4px 6px 18px rgba(0,0,0,0.20)); transform: translateZ(1px); }
  100% { filter: drop-shadow(0 8px 18px rgba(0,0,0,0.22)); transform: translateZ(0); }
}

/* Accessibility: respect reduced motion preferences by disabling animations */
@media (prefers-reduced-motion: reduce) {
  .falling-duck,
  .falling-duck.wobble {
    animation: none !important;
    transition: opacity 160ms linear;
    opacity: 0.95;
    /* If JS does not remove elements when animations are disabled, fade them and remove after a timeout in JS. */
  }
}

/* Optional toast used by some implementations to confirm the effect triggered.
   If your JS doesn't create toasts, this won't be used. */
.duck-toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  z-index: 1000000;
  background: rgba(0,0,0,0.80);
  color: #fff;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  pointer-events: none;
  opacity: 1;
  transition: opacity 280ms ease;
}

/* Utility: make any duck image pointer-friendly on the page (hero image) */
img[data-duck],
.duck-image {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0.05);
}

/* Defensive: if falling ducks are injected into a container that limits overflow,
   ensure they can still appear full-screen. */
html, body {
  /* ensure positioned children use viewport for fixed positioning */
  min-height: 100%;
}