/* The outer button belongs to the stage. This 100 × 65 rig is free to turn
   without disturbing the stage's flight path or its accessible hit target. */
.bird-rig {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 100/65;
  pointer-events: none;
  user-select: none;
  isolation: isolate;
}

.pip-facing,
.pip-spring,
.pip-pose {
  position: absolute;
  display: block;
  inset: 0;
}

.pip-facing {
  transform-origin: 50% 65%;
  transition: transform 160ms ease-out;
}

.world.fly-left .pip-facing { transform: scaleX(-1); }

.pip-spring {
  transform-origin: 49% 90%;
  animation: pip-shuffle-hop 8.3s infinite;
}

.pip-pose {
  transform-origin: 44% 78%;
  transform: rotate(-13deg);
  animation: pip-perch 4.1s ease-in-out infinite;
}

.bird-rig .pip-piece {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
}

.pip-chassis {
  position: absolute;
  left: 3%;
  top: 29%;
  width: 94%;
  aspect-ratio: 900/353;
}

.pip-chassis .pip-piece,
.pip-head {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
}

/* The cheek sits on top of the breast. Its pivot lies inside the neck;
   overlapping masks let the head tip without a cut line across the paper. */
.pip-torso-print {
  clip-path: polygon(0 0, 55% 0, 57% 17%, 67% 35%, 68% 65%, 74% 75%, 69% 100%, 0 100%);
}

.pip-head-print {
  clip-path: polygon(49% 0, 100% 0, 100% 100%, 73% 100%, 70% 76%, 65% 72%, 62% 67%, 60% 60%, 58% 47%, 55% 31%, 52% 21%);
}

.pip-head {
  transform-origin: 62% 53%;
  animation: pip-look 5.9s ease-in-out infinite;
}

.bird-rig .pip-wing {
  width: 58%;
  transform-origin: 90% 35%;
}

.pip-wing-far {
  left: 1%;
  top: 42%;
  filter: brightness(.7) saturate(.85);
  transform: rotate(11deg) scale(.89,.8);
}

.pip-wing-near {
  left: 4.2%;
  top: 46.5%;
  animation: pip-settle-wing 7.7s ease-in-out infinite;
}

.bird-rig .pip-foot {
  width: 13%;
  transform-origin: 17% 5%;
}

.pip-foot-far {
  left: 33%;
  top: 77%;
  filter: brightness(.82);
  transform: rotate(13deg) scale(.88);
  animation: pip-footstep-far 8.3s infinite;
}

.pip-foot-near {
  left: 42%;
  top: 79%;
  transform: rotate(17deg);
  animation: pip-footstep-near 8.3s infinite;
}

.world:is(.in-flight, .jump-airborne) .pip-spring { animation: pip-flight-bob 460ms ease-in-out infinite; }
.world:is(.in-flight, .jump-airborne) .pip-pose { animation: none; transform: rotate(-3deg); }
.world:is(.in-flight, .jump-airborne) .pip-head { animation: pip-sight 870ms ease-in-out infinite; }
.world:is(.in-flight, .jump-airborne) .pip-wing-near { animation: pip-wingbeat 460ms cubic-bezier(.43,.03,.46,.99) infinite; }
.world:is(.in-flight, .jump-airborne) .pip-wing-far { animation: pip-wingbeat-far 460ms cubic-bezier(.43,.03,.46,.99) -55ms infinite; }
.world:is(.in-flight, .jump-airborne) .pip-foot-near { animation: pip-tuck-near 650ms ease-in-out infinite alternate; }
.world:is(.in-flight, .jump-airborne) .pip-foot-far { animation: pip-tuck-far 630ms ease-in-out infinite alternate; }

@keyframes pip-perch {
  0%, 100% { transform: rotate(-13deg) scale(1,.995); }
  50% { transform: rotate(-15deg) scale(.994,1.02); }
}

@keyframes pip-look {
  0%, 38%, 68%, 100% { transform: rotate(0); }
  48%, 59% { transform: rotate(-5deg) translateY(-1%); }
  78%, 83% { transform: rotate(3.4deg); }
}

@keyframes pip-settle-wing {
  0%, 70%, 93%, 100% { transform: rotate(-7deg) scale(.95,.98); }
  77% { transform: rotate(5deg) scale(.99,1.02); }
  81% { transform: rotate(-5deg) scale(.96,.96); }
  86% { transform: rotate(1deg); }
}

@keyframes pip-shuffle-hop {
  0%, 63%, 78%, 100% { transform: translateY(0); }
  66% { transform: translateY(1.6%) scale(1.014,.965); }
  69% { transform: translateY(-7.4%) scale(.99,1.025); }
  72% { transform: translateY(-6.9%); }
  75% { transform: translateY(0) scale(1.012,.972); }
}

@keyframes pip-footstep-near {
  0%, 64%, 77%, 100% { transform: rotate(17deg); }
  69% { transform: translateY(-8%) rotate(42deg); }
  73% { transform: rotate(8deg); }
}

@keyframes pip-footstep-far {
  0%, 61%, 77%, 100% { transform: rotate(13deg) scale(.88); }
  66% { transform: translateY(-15%) rotate(-6deg) scale(.88); }
  72% { transform: rotate(46deg) scale(.88); }
}

@keyframes pip-wingbeat {
  0%, 100% { transform: rotate(62deg) scale(.98,1); }
  47% { transform: rotate(-37deg) scale(.88,.67); }
  68% { transform: rotate(-8deg) scale(.98,.77); }
}

@keyframes pip-wingbeat-far {
  0%, 100% { transform: rotate(75deg) scale(.86,.85); }
  46% { transform: rotate(-30deg) scale(.75,.6); }
}

@keyframes pip-flight-bob {
  0%, 100% { transform: translateY(-1.7%) rotate(1deg); }
  49% { transform: translateY(1.5%) rotate(-1.2deg); }
}

@keyframes pip-sight {
  0%, 100% { transform: rotate(1.5deg); }
  50% { transform: rotate(-1.5deg); }
}

@keyframes pip-tuck-near {
  from { transform: translate(-10%,-8%) rotate(52deg) scale(.79); }
  to { transform: translate(-10%,-8%) rotate(64deg) scale(.76); }
}

@keyframes pip-tuck-far {
  from { transform: translate(-13%,-9%) rotate(70deg) scale(.7); }
  to { transform: translate(-13%,-9%) rotate(58deg) scale(.72); }
}

@media (prefers-reduced-motion: reduce) {
  .world .bird-rig *,
  .world:is(.in-flight, .jump-airborne) .bird-rig * {
    animation: none;
    transition: none;
  }

  .world:is(.in-flight, .jump-airborne) .pip-wing-near { transform: rotate(30deg); }
  .world:is(.in-flight, .jump-airborne) .pip-wing-far { transform: rotate(43deg) scale(.86); }
}

/* Registered to the eye on the 900 × 353 head print; the patch travels
   with the head hinge. Closing happens along the slanted lower eyelid. */
.pip-eye-joint {
  position: absolute;
  left: 67.111111%;
  top: 16.713881%;
  width: 11.777778%;
  height: 27.195467%;
  overflow: visible;
  pointer-events: none;
}
.pip-eye-blink {
  transform-origin: 0 0;
  animation: pip-blink 6.85s linear infinite;
}
.pip-eye-iris {
  animation: pip-gaze 7.9s ease-in-out infinite;
}
@keyframes pip-blink {
  0%, 22.45%, 26.25%, 100% { transform: scaleY(1); opacity: 1; }
  23.75%, 25.05% { opacity: 1; }
  24.05%, 24.75% { transform: scaleY(.008); opacity: 0; }
}
.pip-eye-crease {
  opacity: 0;
  animation: pip-lid-crease 6.85s linear infinite;
}
@keyframes pip-lid-crease {
  0%, 23.4%, 25.45%, 100% { opacity: 0; }
  24%, 24.85% { opacity: 1; }
}
@keyframes pip-gaze {
  0%, 18%, 65%, 100% { transform: translate(0,0); }
  20%, 39% { transform: translate(-14px,1px); }
  41%, 58% { transform: translate(-11px,-4px); }
  81%, 89% { transform: translate(1px,-2px); }
}
#pip:focus-visible .pip-eye-iris { animation: none; transform: translate(-17px,3px); }
@media (hover: hover) {
  #pip:hover .pip-eye-iris { animation: none; transform: translate(-17px,3px); }
}
.world:is(.in-flight,.jump-airborne) #pip .pip-eye-iris {
  animation: none;
  transform: translate(5px,-5px);
}
.world.page-jump:not(.jump-airborne) #pip .pip-eye-iris {
  animation: none;
  transform: translate(-18px,-7px);
}
.world.page-jump.jump-perched #pip .pip-eye-iris { transform: translate(-13px,4px); }
.motion-off .pip-eye-joint { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .pip-eye-joint { visibility: hidden; }
  .world .pip-eye-joint * { animation: none; }
}