/* ==========================================================
   Bina Fox — two little fox companions
   ========================================================== */
#bfFoxWorld{position:fixed;inset:0;pointer-events:none;z-index:6900;overflow:hidden}
#bfFoxWorld.bf-hidden .bf-fox,#bfFoxWorld.bf-hidden .fx-fx{display:none}
.bf-fox{position:absolute;left:0;top:0;pointer-events:auto;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;will-change:transform;-webkit-tap-highlight-color:transparent}
.bf-fox.fx-dragged{cursor:grabbing}
.bf-fox .fx-flip{width:100%;height:100%;transition:transform .18s}
.bf-fox .fx-squash{width:100%;height:100%;transform-origin:50% 100%}
.bf-fox svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 4px #4a1d1a26)}
.bf-fox:focus-visible{outline:2px dashed var(--wine,#651725);outline-offset:4px;border-radius:12px}

/* parts default */
.fx-leg,.fx-tail,.fx-head,.fx-torso,.fx-sprite,.fx-eyes,.fx-ear-b,.fx-ear-f{transform-box:view-box}
.fx-leg-bf{transform-origin:49px 76px}.fx-leg-bn{transform-origin:57px 76px}
.fx-leg-ff{transform-origin:85px 76px}.fx-leg-fn{transform-origin:93px 76px}
.fx-tail{transform-origin:46px 66px;animation:fxSway 3.2s ease-in-out infinite}
.fx-head{transform-origin:98px 60px;transform:rotate(var(--tilt,0deg));transition:transform .35s cubic-bezier(.3,.7,.3,1)}
.fx-pupils{transform:translate(var(--px,0px),var(--py,0px));transition:transform .18s}
.fx-eyes{transform-origin:101px 46px;transition:transform .08s}
.fx-closed{opacity:0}
.fx-ear-b{transform-origin:94px 30px}.fx-ear-f{transform-origin:108px 30px}
.fx-sprite{transition:transform .35s}
.fx-torso{transition:transform .35s}
.fx-legs-back,.fx-legs-front{transition:transform .35s}
.fx-legs-back{transform-origin:53px 100px;transform-box:view-box}
.fx-legs-front{transform-origin:89px 100px;transform-box:view-box}
.fx-shadow{transform-box:fill-box;transform-origin:center;transition:transform .2s,opacity .2s}

/* blink */
.fx-blink .fx-eyes{transform:scaleY(.1)}
/* ear twitch */
.fx-twitch .fx-ear-f{animation:fxTwitch .4s}
/* happy eyes (^ ^) */
.fx-happy .fx-eyes{opacity:0}.fx-happy .fx-closed{opacity:1}
.fx-happy .fx-tail,.fx-wag .fx-tail{animation:fxWag .32s ease-in-out infinite}

/* walking / running */
.fx-walk .fx-leg-bn,.fx-walk .fx-leg-ff{animation:fxStep .5s linear infinite}
.fx-walk .fx-leg-bf,.fx-walk .fx-leg-fn{animation:fxStep .5s linear infinite;animation-delay:-.25s}
.fx-walk .fx-sprite{animation:fxBob .25s ease-in-out infinite alternate}
.fx-run .fx-leg-bn,.fx-run .fx-leg-ff{animation:fxStepRun .28s linear infinite}
.fx-run .fx-leg-bf,.fx-run .fx-leg-fn{animation:fxStepRun .28s linear infinite;animation-delay:-.14s}
.fx-run .fx-sprite{animation:fxBobRun .14s ease-in-out infinite alternate}
.fx-run .fx-tail{animation:none;transform:rotate(-14deg)}

/* loaf / sit */
.fx-loaf .fx-legs-back,.fx-sleep .fx-legs-back{transform:scaleY(.25)}
.fx-loaf .fx-legs-front{transform:scaleY(.3) translateX(4px)}
.fx-loaf .fx-torso,.fx-sleep .fx-torso{transform:translateY(17px)}
.fx-loaf .fx-head{transform:translateY(16px) rotate(var(--tilt,0deg))}
.fx-loaf .fx-tail,.fx-sleep .fx-tail{transform:translate(16px,26px) rotate(-38deg);animation:none}
/* sleep */
.fx-sleep .fx-legs-front{transform:scaleY(.22) translateX(4px)}
.fx-sleep .fx-head{transform:translate(-6px,22px) rotate(16deg)}
.fx-sleep .fx-eyes{opacity:0}.fx-sleep .fx-closed{opacity:1}
.fx-sleep .fx-sprite{animation:fxBreathe 2.6s ease-in-out infinite}
/* air */
.fx-air .fx-legs-back{transform:rotate(18deg)}
.fx-air .fx-legs-front{transform:rotate(-18deg)}
.fx-air .fx-tail{animation:none;transform:rotate(-26deg)}
.fx-dragged .fx-legs-back,.fx-dragged .fx-legs-front{animation:fxDangle .6s ease-in-out infinite alternate}
.fx-dragged .fx-tail{animation:fxWag .5s ease-in-out infinite}
/* yawn & stretch */
.fx-stretch .fx-torso{animation:fxStretch 1.6s ease-in-out}
.fx-stretch .fx-head{animation:fxYawnHead 1.6s ease-in-out}
/* squash / land */
.fx-land .fx-squash{animation:fxLand .38s cubic-bezier(.3,1.6,.5,1)}
.fx-spin .fx-squash{animation:fxSpin .7s cubic-bezier(.4,1.4,.5,1)}
.fx-wave .fx-legs-front{animation:fxWave .4s ease-in-out 4 alternate}

@keyframes fxStep{0%{transform:rotate(24deg)}50%{transform:rotate(-24deg)}100%{transform:rotate(24deg)}}
@keyframes fxStepRun{0%{transform:rotate(38deg)}50%{transform:rotate(-38deg)}100%{transform:rotate(38deg)}}
@keyframes fxBob{from{transform:translateY(0)}to{transform:translateY(-2.5px)}}
@keyframes fxBobRun{from{transform:translateY(0) rotate(0)}to{transform:translateY(-5px) rotate(-2deg)}}
@keyframes fxSway{0%,100%{transform:rotate(0)}50%{transform:rotate(8deg)}}
@keyframes fxWag{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(16deg)}}
@keyframes fxTwitch{40%{transform:rotate(-14deg)}}
@keyframes fxBreathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.02,.97)}}
@keyframes fxDangle{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}
@keyframes fxStretch{30%,60%{transform:translate(-4px,8px) scaleX(1.06)}}
@keyframes fxYawnHead{30%,60%{transform:translateY(10px) rotate(-14deg)}}
@keyframes fxLand{0%{transform:scale(1.2,.75)}60%{transform:scale(.92,1.08)}100%{transform:none}}
@keyframes fxSpin{to{transform:rotate(360deg)}}
@keyframes fxWave{from{transform:rotate(0)}to{transform:translate(4px,-14px) rotate(-40deg)}}

/* speech bubble */
.fx-bubble{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(calc(-50% + var(--bx,0px))) translateY(6px) scale(.7);transform-origin:50% 100%;
  background:#fffdf9;color:var(--wine,#651725);border:1.5px solid #e6d0c9;border-radius:16px;padding:8px 12px;font:700 13px/1.25 'Helvetica Neue',Arial,sans-serif;
  white-space:nowrap;box-shadow:0 8px 20px #4a1d1a24;opacity:0;pointer-events:none;transition:opacity .25s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.fx-bubble:after{content:'';position:absolute;left:calc(50% - var(--bx,0px));bottom:-7px;width:12px;height:12px;background:#fffdf9;border-right:1.5px solid #e6d0c9;border-bottom:1.5px solid #e6d0c9;transform:translateX(-50%) rotate(45deg)}
.fx-bubble.show{opacity:1;transform:translateX(calc(-50% + var(--bx,0px))) translateY(0) scale(1)}

/* particles */
.fx-fx{position:absolute;left:0;top:0;pointer-events:none;font:700 16px/1 Georgia,serif;color:var(--wine,#651725);will-change:transform,opacity}
.fx-heart{width:16px;height:16px;animation:fxHeart 1.4s ease-out forwards}
.fx-heart svg{width:100%;height:100%;display:block}
.fx-z{font:italic 700 18px/1 Georgia,serif;color:#6592ad;animation:fxZ 2.4s ease-out forwards}
.fx-bang{font:900 22px/1 'Helvetica Neue',Arial,sans-serif;color:#be692f;animation:fxBang .9s ease-out forwards}
.fx-spark{width:8px;height:8px;border-radius:50%;background:#f3c26b;animation:fxSpark .8s ease-out forwards}
@keyframes fxHeart{0%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(calc(var(--sx) + var(--dx)),calc(var(--sy) - 70px)) scale(1.1) rotate(var(--r))}}
@keyframes fxZ{0%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.5)}25%{opacity:1}100%{opacity:0;transform:translate(calc(var(--sx) + 26px),calc(var(--sy) - 48px)) scale(1.3)}}
@keyframes fxBang{0%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.3)}30%{opacity:1;transform:translate(var(--sx),calc(var(--sy) - 14px)) scale(1.2)}100%{opacity:0;transform:translate(var(--sx),calc(var(--sy) - 22px)) scale(1)}}
@keyframes fxSpark{0%{opacity:1;transform:translate(var(--sx),var(--sy)) scale(1)}100%{opacity:0;transform:translate(calc(var(--sx) + var(--dx)),calc(var(--sy) + var(--dy))) scale(.2)}}

/* berry treat */
.fx-berry{position:absolute;left:0;top:0;width:26px;height:30px;pointer-events:none;will-change:transform}
.fx-berry svg{width:100%;height:100%;display:block;filter:drop-shadow(0 3px 3px #4a1d1a30)}

/* dock */
#bfFoxDock{position:fixed;left:16px;bottom:16px;z-index:7000;display:flex;gap:8px}
#bfFoxDock button{display:flex;align-items:center;gap:7px;height:42px;padding:0 14px 0 10px;border-radius:99px;border:1px solid #e6d0c9;background:#fffdf9ee;color:var(--wine,#651725);
  font:800 12px/1 'Helvetica Neue',Arial,sans-serif;letter-spacing:.02em;cursor:pointer;box-shadow:0 8px 22px #4a1d1a1f;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:translate .3s cubic-bezier(.34,1.56,.64,1),background .2s}
#bfFoxDock button:hover{translate:0 -3px;background:#fff}
#bfFoxDock button svg{width:22px;height:22px;flex:none}
#bfFoxDock .fx-dock-hide{padding:0 12px}
#bfFoxDock.fx-off .fx-dock-treat{display:none}
@media(max-width:640px){#bfFoxDock{left:10px;bottom:10px}#bfFoxDock button{height:38px;padding:0 10px}#bfFoxDock button span{display:none}.fx-bubble{font-size:12px;padding:7px 10px}}
@media print{#bfFoxWorld,#bfFoxDock{display:none}}