/* Pole Education — the bird, in the three places it does work. */
.pe-bird{
  display: block; height: auto; user-select: none;
  pointer-events: auto;          /* it reacts to the cursor, so it must be hittable */
  transform-origin: 50% 88%;     /* pivots on its feet, not its middle */
  /* translate/rotate/scale, not transform: the resting animation drives
     `transform`, and an animated property always beats a plain declaration,
     so a `transform` here would simply never apply on hover. These compose
     with it instead. */
  transition: translate .32s cubic-bezier(.2,1.3,.4,1),
              rotate .32s cubic-bezier(.2,1.3,.4,1),
              scale .32s cubic-bezier(.2,1.3,.4,1);
}
/* it is decoration with a job, not a control: no pointer, no focus ring */
.pe-bird{ cursor: default; }

/* test result: the bird sits at the end of the message, sized to it */
.has-bird{
  display: flex !important;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
  min-height: 104px;
}
/* a slow breath keeps it alive without pulling the eye off the result */
@keyframes pe-bird-breathe{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%    { transform: translateY(-3px) rotate(-1.2deg); }
}
/* Ten cells side by side. The positions that land on a cell are i/9 of the
   range — 0%, 11.1%, … 100% — because 0% aligns the first cell and 100% the
   last. Plain steps(10) walks i/10 instead (0%, 10%, … 90%), so every frame
   sat between two cells and the neighbour's wing showed. jump-none is the
   one that emits N values from 0% to 100% inclusive. */
.pe-bird--flap{
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1000% 100%;
  aspect-ratio: 200 / 158;
  animation: pe-flap .84s steps(10, jump-none) infinite;
}
@keyframes pe-flap{ to{ background-position-x: right; } }

/* The sympathetic pose is fourteen cells of the eyes-closed take: it only
   breathes and sways. There is no natural loop in the clip — the camera
   drifts through it — so the strip is played ping-pong with `alternate`,
   which has no seam to hide and reads as a slow sway either way. */
.pe-bird--sway{
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1400% 100%;
  aspect-ratio: 160 / 188;
  animation: pe-sway 1.15s steps(14, jump-none) infinite alternate;
}
@keyframes pe-sway{ to{ background-position-x: right; } }


.pe-bird--result{
  width: clamp(64px, 9vw, 96px);
  flex: 0 0 auto;
  /* no negative margins: they pushed the bird outside the rounded panel.
     The row grows to fit it instead, which reads as intended rather than
     as something escaping its box. */
  animation: pe-bird-in .5s cubic-bezier(.2,1.2,.4,1) both,
             pe-bird-breathe 3.6s ease-in-out .5s infinite;
}
.pe-bird--flap.pe-bird--result{
  animation: pe-bird-in .5s cubic-bezier(.2,1.2,.4,1) both,
             pe-flap .84s steps(10, jump-none) .5s infinite;
}
/* the standing pose is a tall portrait, so the same width made it a head
   taller than the cheering one and it swamped the panel; sized down here so
   the two read as the same bird */
.pe-bird--sway.pe-bird--result{
  width: clamp(54px, 6.6vw, 72px);
  animation: pe-bird-in .5s cubic-bezier(.2,1.2,.4,1) both,
             pe-sway 1.15s steps(14, jump-none) .5s infinite alternate;
}
/* hover: the cheerful pose hops, the sympathetic one only leans — a bounce
   would read as gloating over a failed test */
.pe-bird--result[data-kind="happy"]:hover{ translate: 0 -7px; rotate: -5deg; scale: 1.06; }
.pe-bird--result[data-kind="sad"]:hover{ rotate: 3deg; scale: 1.03; }
@keyframes pe-bird-in{
  from{ opacity: 0; transform: translateY(10px) scale(.82); }
  to  { opacity: 1; transform: none; }
}


/* empty states */
[data-pe-empty]{ display: flex; align-items: center; gap: 14px; }
.pe-bird--empty{
  width: 76px; flex: 0 0 auto; opacity: .96;
}
.pe-bird--empty:hover{ translate: 0 -5px; rotate: -4deg; }

@media (prefers-reduced-motion: reduce){
  .pe-bird{ transition: none; }
  .pe-bird--result, .pe-bird--empty{ animation: none; }
  /* frozen on the first cell, which is a complete pose on its own */
  .pe-bird--flap, .pe-bird--sway{ animation: none; background-position-x: left; }
  .pe-bird:hover{ translate: none; rotate: none; scale: none; }
}
/* on touch there is no hover, so the resting motion is all there is */
@media (hover: none){
  .pe-bird:hover{ translate: none; rotate: none; scale: none; }
}
@media (max-width: 620px){
  .pe-bird--result{ width: 68px; }
  .pe-bird--sway.pe-bird--result{ width: 56px; }
  .pe-bird--empty{ width: 60px; }
}

/* every pose is a sprite now, so the box is reserved by aspect-ratio on the
   modifier and nothing jumps when the sheet arrives */

/* ── one bird per module ──────────────────────────────────── */
/* Ten cells wide in every sheet; the height differs per pose, so the ratio
   is set inline where the element is built. Ping-pong again: none of these
   takes loops on its own, and alternate has no seam to hide. */
.pe-bird--pose{
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1000% 100%;
  animation: pe-pose 1.15s steps(10, jump-none) infinite alternate;
}
@keyframes pe-pose{ to{ background-position-x: right; } }
@media (prefers-reduced-motion: reduce){
  .pe-bird--pose{ animation: none; background-position-x: left; }
}