/* ── Birds ───────────────────────────────────────────────────────────────────── 

✅ Visual result:

Flock fades in together.

Birds fly in natural curved arcs.

Rotation / bank makes them tilt realistically.

Horizontal drift mimics swerves in flight.

Micro-noise ensures no two birds ever move perfectly in sync — subtle randomness makes the animation feel alive.

Depth illusion maintained (size, flight speed, wingbeat).

At this point, your flock animation is cinematic, highly realistic, and completely organic.

*/

#birds-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 13;
  overflow: hidden;
}

.bird {
  position: absolute;

  left: calc(20% + var(--x,0px));
  bottom: calc(33% + var(--y,0px));

  width: var(--size,10px);
  height: calc(var(--size) * 0.45);

  opacity: 0;
  background: transparent;

  animation:
    birdFade 0.9s ease-out 13s forwards,
    birdScene var(--flight,14s) linear calc(13s + var(--delay,0s)) forwards,
    birdBank var(--flight,14s) ease-in-out calc(13s + var(--delay,0s)) infinite alternate,
    birdDrift var(--flight,14s) ease-in-out calc(13s + var(--delay,0s)) infinite alternate,
    birdNoise var(--flight,14s) linear calc(13s + var(--delay,0s)) infinite alternate;
}

/* ── Wings ───────────────────────────────────────── */
 
/* Wings with per-bird color */
.bird::before,
.bird::after {
  content:'';
  position:absolute;
  top:0;
  width:50%;
  height:100%;
  background: var(--wingColor, #0a0604);  /* default dark color, can vary per bird */
  border-radius:50% 50% 0 0;
}

.bird::before{
  left:0;
  transform-origin:bottom right;
  animation: birdFlapL var(--flap,0.45s) ease-in-out infinite;
}

.bird::after{
  right:0;
  transform-origin:bottom left;
  animation: birdFlapR var(--flap,0.45s) ease-in-out infinite;
}

/* ── Wing flaps ───────────────────────────────────── */

@keyframes birdFlapL {
  0%,100% { transform: rotateX(0deg); }
  50%     { transform: rotateX(55deg); }
}

@keyframes birdFlapR {
  0%,100% { transform: rotateX(0deg); }
  50%     { transform: rotateX(55deg); }
}

/* ── Fade in ─────────────────────────────────────── */

@keyframes birdFade {
  from { opacity:0; }
  to   { opacity:1; }
}

/* ── Natural flight arc ──────────────────────────── */

@keyframes birdScene {
  0%   { left: calc(20% + var(--x,0px)); bottom: calc(33% + var(--y,0px)); }
  25%  { bottom: calc(33% + var(--y,0px) + var(--arc,12px)); }
  50%  { bottom: calc(33% + var(--y,0px) + calc(var(--arc,12px) * 0.7)); }
  75%  { bottom: calc(33% + var(--y,0px) + calc(var(--arc,12px) * 1.2)); }
  95%  { left: 112%; }
  100% { left:115%; opacity:0; }
}

/* ── Subtle banking / rotation ───────────────────── */

@keyframes birdBank {
  0%   { transform: rotate(var(--bank,0deg)); }
  25%  { transform: rotate(calc(var(--bank,0deg) * -0.6)); }
  50%  { transform: rotate(calc(var(--bank,0deg) * 0.8)); }
  75%  { transform: rotate(calc(var(--bank,0deg) * -0.4)); }
  100% { transform: rotate(var(--bank,0deg)); }
}

/* ── Horizontal drift ────────────────────────────── */

@keyframes birdDrift {
  0%   { transform: translateX(0px); }
  25%  { transform: translateX(calc(var(--drift,0px) * 0.5)); }
  50%  { transform: translateX(calc(var(--drift,0px) * -0.7)); }
  75%  { transform: translateX(calc(var(--drift,0px) * 0.4)); }
  100% { transform: translateX(0px); }
}

/* ── Micro-randomness noise ─────────────────────── */

@keyframes birdNoise {
  0%   { transform: translate(calc(var(--noiseX,0px)), calc(var(--noiseY,0px))); }
  20%  { transform: translate(calc(var(--noiseX,0px) * -1), calc(var(--noiseY,0px) * 0.6)); }
  40%  { transform: translate(calc(var(--noiseX,0px) * 0.5), calc(var(--noiseY,0px) * -0.8)); }
  60%  { transform: translate(calc(var(--noiseX,0px) * -0.4), calc(var(--noiseY,0px) * 0.5)); }
  80%  { transform: translate(calc(var(--noiseX,0px) * 0.3), calc(var(--noiseY,0px) * -0.3)); }
  100% { transform: translate(calc(var(--noiseX,0px)), calc(var(--noiseY,0px))); }
}