/* flair.js: a different set of critters circling her head inside the portrait each visit */
.head .flair{position:absolute;inset:0;pointer-events:none}
.head img.cut{position:absolute;height:auto;pointer-events:none}
.head{cursor:pointer;-webkit-tap-highlight-color:transparent}
.head:focus-visible{outline:3px dashed var(--wasabi);outline-offset:-10px}
.fp{position:absolute;left:50%;top:50%;width:var(--w);aspect-ratio:1;margin:calc(var(--w) / -2) 0 0 calc(var(--w) / -2);opacity:0;will-change:transform,opacity}
.fp.bye{opacity:0!important;transition:opacity .35s}
.fp svg{display:block;width:100%;height:100%;overflow:visible}
.flutter .flap{transform-box:fill-box;transform-origin:center;animation:flap .17s ease-in-out infinite alternate}
.buzz .flap{transform-box:fill-box;transform-origin:center;animation:flap .07s linear infinite alternate}
@keyframes flap{to{transform:scaleX(.3)}}
.blink .lit{animation:blink var(--d) linear infinite;animation-delay:var(--dl)}
@keyframes blink{0%,30%{opacity:0}33%{opacity:1}36%{opacity:.15}40%,86%{opacity:1}90%,100%{opacity:0}}
.twinkle svg{animation:tw var(--d) ease-in-out infinite alternate;animation-delay:var(--dl)}
@keyframes tw{from{transform:scale(.6) rotate(-14deg)}to{transform:scale(1.1) rotate(14deg)}}
.spark{position:absolute;width:3.4%;aspect-ratio:1;margin:-1.7% 0 0 -1.7%;background:#ffe46b;pointer-events:none;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:spark .75s ease-out forwards}
.spark:nth-child(3n){background:#fff}
@keyframes spark{from{transform:scale(1);opacity:1}to{transform:translateY(14px) scale(.15);opacity:0}}
/* moving parts inside the sprites (flair-sets.js) */
.fp .flapY{transform-box:fill-box;transform-origin:50% 100%;animation:flapY .35s ease-in-out infinite alternate}
@keyframes flapY{to{transform:scaleY(-.5)}}
.fp.hum .flapY{animation-duration:.06s}
.glow .lit{animation:glow var(--d) ease-in-out infinite alternate;animation-delay:var(--dl)}
@keyframes glow{from{opacity:.1}to{opacity:1}}
.fp .wag{transform-box:fill-box;transform-origin:100% 50%;animation:wag .32s ease-in-out infinite alternate}
@keyframes wag{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
.fp .pulse{transform-box:fill-box;transform-origin:50% 100%;animation:pulse 1.3s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.08,.86)}}
.fp .wiggle{transform-box:fill-box;transform-origin:50% 0;animation:wiggle .9s ease-in-out infinite alternate}
@keyframes wiggle{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.fp .swing{transform-box:fill-box;transform-origin:50% 0;animation:wiggle 1.6s ease-in-out infinite alternate}
.fp .blinky{transform-box:fill-box;transform-origin:center;animation:blinky 3.6s infinite;animation-delay:var(--dl)}
@keyframes blinky{0%,91%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.fp .bounce{transform-box:fill-box;transform-origin:50% 100%;animation:bounce .7s ease-in-out infinite alternate}
@keyframes bounce{to{transform:translateY(-5px)}}
.fp .wobble{transform-box:fill-box;transform-origin:50% 100%;animation:wobble 1s ease-in-out infinite alternate}
@keyframes wobble{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
.fp .steam{transform-box:fill-box;animation:steam 1.6s ease-in-out infinite}
@keyframes steam{0%{transform:translateY(4px);opacity:0}40%{opacity:1}100%{transform:translateY(-8px);opacity:0}}
.fp .bob{transform-box:fill-box;animation:bob 1.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-5px)}}
.fp .flame{transform-box:fill-box;transform-origin:50% 0;animation:flame .18s ease-in-out infinite alternate}
@keyframes flame{from{transform:scaleY(.75)}to{transform:scaleY(1.1)}}
.fp .flick{transform-box:fill-box;transform-origin:50% 100%;animation:flick .3s ease-in-out infinite alternate}
@keyframes flick{from{transform:scale(.88,1) rotate(-4deg)}to{transform:scale(1,1.1) rotate(4deg)}}
.fp .spin3d{transform-box:fill-box;transform-origin:center;animation:spin3d 1.2s linear infinite;animation-delay:var(--dl)}
@keyframes spin3d{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.12)}}
.fp .wave{transform-box:fill-box;transform-origin:0 50%;animation:wave 1.1s ease-in-out infinite alternate}
@keyframes wave{from{transform:skewY(-4deg) scaleX(.96)}to{transform:skewY(4deg)}}
.fp .shake{transform-box:fill-box;transform-origin:80% 90%;animation:shake .22s ease-in-out infinite alternate}
@keyframes shake{from{transform:rotate(-10deg)}to{transform:rotate(10deg)}}
.fp .beat{transform-box:fill-box;transform-origin:center;animation:beat .9s ease-in-out infinite}
@keyframes beat{0%,40%,100%{transform:scale(1)}20%{transform:scale(1.15)}}
.fp .lights circle{animation:lights .9s steps(1) infinite}
.fp .lights circle:nth-child(2){animation-delay:.3s}.fp .lights circle:nth-child(3){animation-delay:.6s}
@keyframes lights{0%{opacity:1}50%{opacity:.25}}
.spark.dot{clip-path:none;border-radius:50%;width:2.4%;margin:-1.2% 0 0 -1.2%;box-shadow:0 0 0 1.5px #1b1b1b;animation:dot 1s ease-out forwards}
@keyframes dot{from{transform:scale(1);opacity:1}to{transform:scale(.3);opacity:0}}
.spark.bub{clip-path:none;border-radius:50%;width:2.6%;margin:-1.3% 0 0 -1.3%;background:rgba(255,255,255,.35);border:2px solid #7cc6fe;animation:bub 1.2s ease-out forwards}
@keyframes bub{from{transform:scale(.6);opacity:.95}to{transform:translateY(-18px) scale(1.15);opacity:0}}
@media (prefers-reduced-motion: reduce){.fp,.fp *{animation:none!important}.blink .lit,.glow .lit{opacity:1}}