/* V2: layered wing rig. Keep square source framing and all layers. */
.blue-float{--flap-time:1.15s;position:relative;display:block;width:var(--blue-size,280px);max-width:100%;aspect-ratio:1;isolation:isolate;pointer-events:none;animation:blue-drift 6.4s ease-in-out infinite}
.blue-float .blue-rig{position:absolute;inset:0;animation:blue-lift var(--flap-time) ease-in-out infinite;transform-origin:54% 55%}
.blue-float img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.blue-float .blue-wing-left{clip-path:polygon(0 0,34% 0,35% 33%,43% 44%,40% 65%,0 65%);transform-origin:39% 46%;animation:blue-flap-left var(--flap-time) infinite;z-index:0}
.blue-float .blue-wing-right{clip-path:polygon(66% 36%,100% 0,100% 75%,66% 66%,63% 46%);transform-origin:65% 46%;animation:blue-flap-right var(--flap-time) infinite;z-index:0}
.blue-float .blue-tail{clip-path:polygon(0 65%,43% 65%,47% 74%,47% 100%,0 100%);transform-origin:45% 70%;animation:blue-tail var(--flap-time) ease-in-out infinite;z-index:1}
.blue-float .blue-base{clip-path:polygon(0 0,100% 0,100% 100%,46% 100%,46% 74%,42% 65%,0 65%);z-index:2}
.blue-float .blue-mouth{clip-path:ellipse(4.6% 6% at 57.5% 33.5%);opacity:0;z-index:3}
.blue-float[data-mouth=open] .blue-mouth{opacity:1}
.blue-float[data-motion=off],.blue-float[data-motion=off] *{animation:none!important}
.blue-float[data-hidden=true],.blue-float[data-hidden=true] *{animation-play-state:paused!important}
/* Fast power stroke, slower recovery. Shoulder roots remain under the body. */
@keyframes blue-flap-left{0%,100%{transform:rotate(8deg) scaleY(1);animation-timing-function:cubic-bezier(.4,0,.75,.4)}38%{transform:rotate(-48deg) scaleY(.76);animation-timing-function:cubic-bezier(.2,.5,.3,1)}78%{transform:rotate(15deg) scaleY(.97)}}
@keyframes blue-flap-right{0%,100%{transform:rotate(-8deg) scaleY(1);animation-timing-function:cubic-bezier(.4,0,.75,.4)}38%{transform:rotate(48deg) scaleY(.76);animation-timing-function:cubic-bezier(.2,.5,.3,1)}78%{transform:rotate(-15deg) scaleY(.97)}}
@keyframes blue-lift{0%,100%{transform:translateY(3px) rotate(-1deg)}45%{transform:translateY(-7px) rotate(.7deg)}80%{transform:translateY(-1px) rotate(-.6deg)}}
@keyframes blue-tail{0%,100%{transform:rotate(-2deg)}52%{transform:rotate(3deg)}80%{transform:rotate(0deg)}}
/* a slow figure-of-eight hover that banks into each turn, instead of a straight back-and-forth */
@keyframes blue-drift{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(5px,-5px) rotate(1.6deg)}50%{transform:translate(0,-9px) rotate(0)}75%{transform:translate(-5px,-4px) rotate(-1.6deg)}}
@media(prefers-reduced-motion:reduce){.blue-float,.blue-float *{animation:none!important}}