/* Bird flight demo — DEMO ONLY, not part of the parity clone. */
.bd-flock {
  /* FIXED, not absolute: an absolutely-positioned bird translated off to the
     right extends the document's scrollable width and the page grows a
     horizontal scrollbar mid-flight. Fixed elements contribute no scroll
     overflow. JS keeps it pinned to the image on scroll and resize. */
  position: fixed;
  pointer-events: none;
  overflow: visible;
  z-index: 9;
}

.bd-bird {
  position: absolute;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* The <i> is the bird. The wrapper carries only position and the flight
   transform, so the flap on the <i> composes with the flight instead of sitting
   behind a second, static copy of the same image. */
.bd-bird > i {
  display: block; width: 100%; height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform-origin: 50% 65%;   /* pivot near the body, not the wingtips */
  will-change: transform;
}

/* One continuous crossing: in from the left and below, through the bird's real
   place in the artwork (the 0,0 keyframe at 42%), then up and out of the top
   right. Held off-page before it starts and after it ends, so nothing is on the
   page at first paint and nothing comes back. The mid keyframe is at 28%: at 42%
   almost half the flight happened off-screen before the bird appeared, which read
   as a lag before anything started. */
.bd-flock.bd-cross .bd-bird {
  transform: translate3d(var(--sx), var(--sy), 0) rotate(var(--sr, 0deg));
  /* LINEAR. Any ease makes the bird accelerate or brake in mid-air, and an
     ease-out in particular makes it crawl to a halt as it leaves — which looked
     like the last few getting stuck near the corner. Cruising flight is steady. */
  animation: bd-cross var(--dur, 8s) linear var(--delay, 0s) both;
}
@keyframes bd-cross {
  0%   { transform: translate3d(var(--sx), var(--sy), 0) rotate(var(--sr, 0deg)); }
  28%  { transform: translate3d(0, 0, 0) rotate(0deg); }        /* her composition */
  100% { transform: translate3d(var(--ex), var(--ey), 0) rotate(var(--er, 0deg)); }
}

/* Suggested wingbeat. These are flat silhouettes with no separate wings, so a
   vertical squash plus a little roll is as close as the artwork allows — it reads
   as a wingbeat at the ~50px these render at. Real articulation needs layered
   source art from the designer. */
.bd-flock:not(.bd-still) .bd-bird > i {
  animation: bd-flap var(--flap, .34s) ease-in-out var(--flapdelay, 0s) infinite;
}
/* A calm wingbeat, with the body rising on the downstroke the way a real one
   does — the little lift is most of what sells it. Shallower than the previous
   pass: 0.48 was a snap, and a snap at this size reads as an insect. */
@keyframes bd-flap {
  0%, 100% { transform: translateY(0)     scaleY(1)    rotate(0deg); }
  28%      { transform: translateY(-6%)   scaleY(1.10) rotate(1.5deg); }   /* downstroke, lift */
  62%      { transform: translateY(3%)    scaleY(.74)  rotate(-2deg); }    /* upstroke, settle */
}

/* ?still=1 — held at rest, which is the parity composition. */
.bd-flock.bd-still .bd-bird { transition: none !important; }

/* Someone who has asked their system for less motion keeps the birds where the
   artwork put them: no flight, no flapping, nothing flying off the page. */
@media (prefers-reduced-motion: reduce) {
  .bd-flock .bd-bird { transform: none !important; transition: none !important; }
  .bd-flock .bd-bird > i { animation: none !important; }
}