.sue-butterfly{position:absolute;left:var(--bx);top:var(--by);width:var(--bs);aspect-ratio:1.536;z-index:6;pointer-events:none;user-select:none;opacity:0;transition:opacity 1.8s ease;perspective:220px;contain:layout style;--flight:11s;--beat:2.8s}
.sue-butterfly.is-seen{opacity:.82}
.sue-butterfly__flight{position:absolute;inset:0;transform:rotate(var(--tilt));animation:sue-butterfly-drift var(--flight) ease-in-out infinite;animation-play-state:paused}
.sue-butterfly__wing{position:absolute;top:0;width:50%;height:100%;background-image:url('assets/butterfly.webp');background-size:200% 100%;background-repeat:no-repeat;backface-visibility:visible;animation:sue-butterfly-wing var(--beat) ease-in-out infinite;animation-play-state:paused}
.sue-butterfly__wing--left{left:0;background-position:left center;transform-origin:right center}
.sue-butterfly__wing--right{right:0;background-position:right center;transform-origin:left center;animation-name:sue-butterfly-wing-right}
.sue-butterfly.is-flying .sue-butterfly__flight,.sue-butterfly.is-flying .sue-butterfly__wing{animation-play-state:running}
@keyframes sue-butterfly-drift{0%,100%{transform:translate3d(0,0,0) rotate(var(--tilt))}32%{transform:translate3d(7px,-9px,0) rotate(calc(var(--tilt) + 5deg))}52%,64%{transform:translate3d(4px,-11px,0) rotate(calc(var(--tilt) + 2deg))}82%{transform:translate3d(-3px,-4px,0) rotate(calc(var(--tilt) - 3deg))}}
@keyframes sue-butterfly-wing{0%,100%{transform:rotateY(0deg)}48%{transform:rotateY(-51deg)}65%{transform:rotateY(-20deg)}}
@keyframes sue-butterfly-wing-right{0%,100%{transform:rotateY(0deg)}48%{transform:rotateY(51deg)}65%{transform:rotateY(20deg)}}
@media(prefers-reduced-motion:reduce){.sue-butterfly{transition:opacity 1.2s ease}.sue-butterfly__flight{animation:none;transform:rotate(var(--tilt))}.sue-butterfly__wing{animation:none}}

/* Gentle tonal variation is restricted to the seven new butterflies. */
.sue-butterfly--pearl .sue-butterfly__wing{filter:saturate(.45) brightness(1.12)}
.sue-butterfly--milk .sue-butterfly__wing{filter:saturate(.2) brightness(1.2)}