.bird {
  --bird-w: 210px;
  position: absolute; width: var(--bird-w); transform: translate(-50%, -50%);
  transition: left 2.6s ease-in-out, top 2.6s ease-in-out, transform 0.6s ease; z-index: 20; pointer-events: auto; cursor: pointer;
}
.bird-flip { transition: transform 0.35s ease; }
.bird.showcase { transform: translate(-50%, -50%) scale(1.8); transition: left 0.9s ease-in-out, top 0.9s ease-in-out, transform 0.6s ease; z-index: 35; }
.bird-flip.facing-left { transform: scaleX(-1); }
.bird-react { animation: bird-bob 2s ease-in-out infinite; }
.bird.perched .bird-react { animation: none; }
.bird-rig { position: relative; width: 100%; }
.bird-rig > img, .bird-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.bird-rig > img:first-child { position: relative; display: block; height: auto; }
.bird-wing { animation: bird-flap 0.09s linear infinite alternate; will-change: transform; }
.bird.perched .bird-wing { animation: none; transform: rotate(14deg) scaleY(0.92); transition: transform 0.4s; }
.bird-eyelid { opacity: 0; }
.bird-eyelid.on { opacity: 1; }
.bird-wear { position: absolute; transform: translate(-50%, -50%); height: auto; }
.bird { container-type: inline-size; }
.bird-wear.is-emoji { font-size: 22cqw; line-height: 1; text-align: center; }
.wear-head { transform: translate(-50%, -25%) rotate(-8deg); }

@keyframes bird-flap { from { transform: rotate(-34deg) scaleY(1.04); } to { transform: rotate(16deg) scaleY(0.9); } }
@keyframes bird-bob { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(5px); } }

.react-happy { animation: react-happy 0.9s ease-out; }
.react-spin { animation: react-spin 1s ease-in-out; }
.react-celebrate { animation: react-celebrate 1.8s ease-in-out; }
.react-eat { animation: react-eat 1.4s ease-in-out; }
@keyframes react-happy { 30% { transform: translateY(-30px) scale(1.08); } 60% { transform: translateY(0) scale(0.96, 1.04); } }
@keyframes react-spin { to { transform: rotate(360deg); } }
@keyframes react-celebrate {
  20% { transform: translateY(-40px) rotate(-12deg) scale(1.1); } 40% { transform: translateY(0) rotate(0); }
  60% { transform: translateY(-40px) rotate(12deg) scale(1.1); } 80% { transform: translateY(0) rotate(360deg); }
}
@keyframes react-eat { 20%, 60% { transform: rotate(18deg) translateY(10px); } 40%, 80% { transform: rotate(8deg); } }

@media (prefers-reduced-motion: reduce) {
  .bird-wing { animation-duration: 0.4s !important; animation-iteration-count: infinite !important; }
}