/* ExplainOwl mascot: styles + state animations. Pair with owl.js. No libraries. */
.eo{position:relative;display:inline-block;vertical-align:middle;line-height:0;flex:none;contain:layout}
.eo>svg{width:100%;height:100%;display:block;overflow:visible}
.eo[data-state=peek]>svg,.eo-crop>svg{overflow:hidden}
.eo *{transform-box:view-box}

/* ---- motion defaults ---- */
.eo .eo-t{transition:transform .5s cubic-bezier(.34,1.45,.64,1),opacity .3s ease}
.eo .eo-lid,.eo .eo-lid2{transition:transform .09s ease-in}
.eo .eo-pup{transition:transform .28s cubic-bezier(.3,1.2,.5,1)}
.eo .eo-mouth,.eo .eo-jaw{transition:transform .07s linear}
.eo .eo-face-alt,.eo .eo-lash,.eo .eo-thumb{transition:opacity .15s ease}
.eo .eo-fx>g{opacity:0;transition:opacity .25s ease,transform .45s cubic-bezier(.34,1.6,.64,1)}

/* pivots (viewBox units) */
.eo .eo-bob{transform-origin:120px 228px}
.eo .eo-lean{transform-origin:120px 228px}
.eo .eo-head{transform-origin:120px 150px}
.eo .eo-wl,.eo .eo-wl-f{transform-origin:62px 146px}
.eo .eo-wr,.eo .eo-wr-f{transform-origin:178px 146px}
.eo .eo-tuft-l{transform-origin:64px 86px}
.eo .eo-tuft-r{transform-origin:176px 86px}
.eo .eo-cap{transform-origin:120px 62px}
.eo .eo-tassel{transform-origin:44px 46px}
.eo .eo-mouth{transform-origin:120px 141px}
.eo .eo-eyes-l{transform-origin:94px 116px}
.eo .eo-eyes-r{transform-origin:146px 116px}
.eo .eo-brow-l{transform-origin:92px 82px}
.eo .eo-brow-r{transform-origin:148px 82px}
.eo .eo-peek{transform-origin:120px 240px}

/* ---- idle life (loops sit on wrapper groups so poses can still transition) ---- */
@keyframes eo-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.012,1.022)}}
@keyframes eo-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
@keyframes eo-nod{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(4px) rotate(1.5deg)}60%{transform:translateY(-1px) rotate(0)}}
@keyframes eo-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-12px)}60%{transform:translateY(-12px)}}
@keyframes eo-hop{0%{transform:translateY(0)}35%{transform:translateY(-14px)}70%{transform:translateY(2px)}100%{transform:translateY(0)}}
@keyframes eo-flap-l{0%,100%{transform:rotate(0)}50%{transform:rotate(14deg)}}
@keyframes eo-flap-r{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
@keyframes eo-gesture{0%,100%{transform:rotate(0)}25%{transform:rotate(-55deg)}45%{transform:rotate(-30deg)}70%{transform:rotate(-70deg)}}
@keyframes eo-gesture2{0%,100%{transform:rotate(0)}50%{transform:rotate(18deg)}}
@keyframes eo-pop{0%{transform:scale(0) rotate(-20deg)}70%{transform:scale(1.15) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
@keyframes eo-wobble{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes eo-twinkle{0%,100%{transform:scale(.4);opacity:.2}50%{transform:scale(1.1);opacity:1}}
@keyframes eo-z{0%{transform:translate(0,8px) scale(.4);opacity:0}25%{opacity:1}100%{transform:translate(10px,-14px) scale(1.1);opacity:0}}
@keyframes eo-ring{0%{transform:scale(.6);opacity:0}30%{opacity:.9}100%{transform:scale(1.6);opacity:0}}
@keyframes eo-glow{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:.8;transform:scale(1.15)}}
@keyframes eo-shiver{0%,100%{transform:translateX(0)}25%{transform:translateX(-1.5px)}75%{transform:translateX(1.5px)}}
@keyframes eo-perk{0%,100%{transform:translateY(-5px) rotate(-10deg)}50%{transform:translateY(-7px) rotate(-14deg)}}
@keyframes eo-perk-r{0%,100%{transform:translateY(-5px) rotate(10deg)}50%{transform:translateY(-7px) rotate(14deg)}}
@keyframes eo-up{0%{transform:translateY(150px)}65%{transform:translateY(78px)}100%{transform:translateY(86px)}}

.eo .eo-bob{animation:eo-breathe 3.6s ease-in-out infinite}
.eo .eo-tassel{animation:eo-sway 4.2s ease-in-out infinite}

/* ---- effects anchors ---- */
.eo .eo-fx-q{transform-origin:212px 50px}
.eo .eo-fx-x{transform-origin:214px 52px}
.eo .eo-fx-bulb{transform-origin:206px 46px}
.eo .eo-fx-z{transform-origin:186px 64px}
.eo .eo-fx-ring{transform-origin:194px 116px}
.eo .eo-fx-sp>*{transform-box:fill-box;transform-origin:center}
.eo .eo-fx-ring path{transform-box:view-box;transform-origin:186px 116px}
.eo .eo-fx-z path{transform-box:fill-box;transform-origin:center}
.eo .eo-fx-bulb .eo-glow{transform-box:fill-box;transform-origin:center}

/* ---- listening: lean in, tufts perk, sound rings ---- */
.eo[data-state=listening] .eo-lean{transform:rotate(-4deg) scale(1.03) translateY(-2px)}
.eo[data-state=listening] .eo-tuft-l{animation:eo-perk 1.6s ease-in-out infinite}
.eo[data-state=listening] .eo-tuft-r{animation:eo-perk-r 1.6s ease-in-out infinite}
.eo[data-state=listening] .eo-brow-l,.eo[data-state=listening] .eo-brow-r{transform:translateY(-3px)}
.eo[data-state=listening] .eo-fx-ring{opacity:1}
.eo[data-state=listening] .eo-fx-ring path{animation:eo-ring 1.5s ease-out infinite}
.eo[data-state=listening] .eo-fx-ring path:nth-child(2){animation-delay:.5s}
.eo[data-state=listening] .eo-fx-ring path:nth-child(3){animation-delay:1s}
.eo[data-state=listening] .eo-wr{transform:rotate(-30deg)}

/* ---- hearing: small nods ---- */
.eo[data-state=hearing] .eo-head{animation:eo-nod 1.1s ease-in-out infinite}
.eo[data-state=hearing] .eo-lean{transform:rotate(-2deg)}
.eo[data-state=hearing] .eo-tuft-l{transform:translateY(-3px) rotate(-6deg)}
.eo[data-state=hearing] .eo-tuft-r{transform:translateY(-3px) rotate(6deg)}

/* ---- thinking: wing to chin, ? pops ---- */
.eo[data-state=thinking] .eo-wr{transform:rotate(86deg)}
.eo[data-state=thinking] .eo-head{transform:rotate(-5deg)}
.eo[data-state=thinking] .eo-brow-l{transform:translateY(-5px) rotate(-8deg)}
.eo[data-state=thinking] .eo-brow-r{transform:translateY(2px) rotate(-4deg)}
.eo[data-state=thinking] .eo-fx-q{opacity:1;animation:eo-pop .5s cubic-bezier(.34,1.6,.64,1) both,eo-wobble 2.4s ease-in-out .5s infinite}

/* ---- got it: wing up, lightbulb ---- */
.eo[data-state=gotit] .eo-wr{transform:rotate(-168deg)}
.eo[data-state=gotit] .eo-lean{animation:eo-hop .55s ease-out 1}
.eo[data-state=gotit] .eo-brow-l,.eo[data-state=gotit] .eo-brow-r{transform:translateY(-4px)}
.eo[data-state=gotit] .eo-fx-bulb{opacity:1;animation:eo-pop .5s cubic-bezier(.34,1.6,.64,1) .1s both}
.eo[data-state=gotit] .eo-fx-bulb .eo-glow{animation:eo-glow 1.4s ease-in-out infinite}

/* ---- explaining: talking + wing gestures ---- */
.eo[data-state=explaining] .eo-wr{transform:rotate(-38deg)}
.eo[data-state=explaining] .eo-wr-f{animation:eo-gesture 3.2s ease-in-out infinite}
.eo[data-state=explaining] .eo-wl-f{animation:eo-gesture2 3.2s ease-in-out .8s infinite}
.eo[data-state=explaining] .eo-head{animation:eo-nod 2.6s ease-in-out infinite}
.eo[data-state=explaining] .eo-brow-l,.eo[data-state=explaining] .eo-brow-r{transform:translateY(-2px)}

/* ---- pointing ---- */
.eo[data-state=pointing][data-dir=right] .eo-wr{transform:rotate(-98deg)}
.eo[data-state=pointing][data-dir=left] .eo-wl{transform:rotate(98deg)}
.eo[data-state=pointing][data-dir=up] .eo-wr{transform:rotate(-172deg)}
.eo[data-state=pointing][data-dir=down] .eo-wr{transform:rotate(-40deg)}
.eo[data-state=pointing][data-dir=right] .eo-lean{transform:rotate(3deg)}
.eo[data-state=pointing][data-dir=left] .eo-lean{transform:rotate(-3deg)}
.eo[data-state=pointing] .eo-brow-l,.eo[data-state=pointing] .eo-brow-r{transform:translateY(-2px)}

/* ---- happy: wings up, bounce, sparkles ---- */
.eo[data-state=happy] .eo-wl{transform:rotate(128deg)}
.eo[data-state=happy] .eo-wr{transform:rotate(-128deg)}
.eo[data-state=happy] .eo-wl-f{animation:eo-flap-l .5s ease-in-out infinite}
.eo[data-state=happy] .eo-wr-f{animation:eo-flap-r .5s ease-in-out infinite}
.eo[data-state=happy] .eo-lean{animation:eo-bounce .9s cubic-bezier(.3,0,.4,1) infinite}
.eo[data-state=happy] .eo-brow-l,.eo[data-state=happy] .eo-brow-r{transform:translateY(-4px)}
.eo[data-state=happy] .eo-fx-sp{opacity:1}
.eo[data-state=happy] .eo-fx-sp>*{animation:eo-twinkle 1.2s ease-in-out infinite}
.eo[data-state=happy] .eo-fx-sp>*:nth-child(2){animation-delay:.4s}
.eo[data-state=happy] .eo-fx-sp>*:nth-child(3){animation-delay:.8s}
.eo[data-state=happy] .eo-tassel{animation-duration:.9s}

/* ---- surprised: eyes wide, !! ---- */
.eo[data-state=surprised] .eo-eyes-l,.eo[data-state=surprised] .eo-eyes-r{transform:scale(1.08)}
.eo[data-state=surprised] .eo-pupil{transform:scale(.8)}
.eo[data-state=surprised] .eo-brow-l{transform:translateY(-8px) rotate(-6deg)}
.eo[data-state=surprised] .eo-brow-r{transform:translateY(-8px) rotate(6deg)}
.eo[data-state=surprised] .eo-wl{transform:rotate(55deg)}
.eo[data-state=surprised] .eo-wr{transform:rotate(-55deg)}
.eo[data-state=surprised] .eo-lean{animation:eo-hop .4s ease-out 1,eo-shiver .12s linear .4s 4}
.eo[data-state=surprised] .eo-tuft-l{transform:translateY(-6px) rotate(-12deg)}
.eo[data-state=surprised] .eo-tuft-r{transform:translateY(-6px) rotate(12deg)}
.eo[data-state=surprised] .eo-cap{transform:translateY(-6px) rotate(-3deg)}
.eo[data-state=surprised] .eo-fx-x{opacity:1;animation:eo-pop .4s cubic-bezier(.34,1.8,.64,1) both}

/* ---- helpful: thumbs up + wink ---- */
.eo[data-state=helpful] .eo-wl{transform:rotate(128deg)}
.eo[data-state=helpful] .eo-thumb{opacity:1}
.eo[data-state=helpful] .eo-lean{transform:rotate(2deg)}
.eo[data-state=helpful] .eo-brow-r{transform:translateY(3px) rotate(6deg)}
.eo[data-state=helpful] .eo-brow-l{transform:translateY(-3px)}
.eo[data-state=helpful] .eo-fx-sp{opacity:1}
.eo[data-state=helpful] .eo-fx-sp>*:nth-child(1){animation:eo-twinkle 1.4s ease-in-out infinite}
.eo[data-state=helpful] .eo-fx-sp>*:nth-child(n+2){opacity:0}

/* ---- sleepy ---- */
.eo[data-state=sleepy] .eo-bob{animation-duration:5.5s}
.eo[data-state=sleepy] .eo-head{transform:translateY(5px) rotate(4deg)}
.eo[data-state=sleepy] .eo-cap{transform:rotate(9deg) translateY(2px)}
.eo[data-state=sleepy] .eo-brow-l{transform:translateY(4px) rotate(6deg)}
.eo[data-state=sleepy] .eo-brow-r{transform:translateY(4px) rotate(-6deg)}
.eo[data-state=sleepy] .eo-tuft-l{transform:translateY(3px) rotate(10deg)}
.eo[data-state=sleepy] .eo-tuft-r{transform:translateY(3px) rotate(-10deg)}
.eo[data-state=sleepy] .eo-wl{transform:rotate(-14deg)}
.eo[data-state=sleepy] .eo-wr{transform:rotate(14deg)}
.eo[data-state=sleepy] .eo-tassel{animation-duration:7s}
.eo[data-state=sleepy] .eo-fx-z{opacity:1}
.eo[data-state=sleepy] .eo-fx-z path{animation:eo-z 2.7s ease-in-out infinite}
.eo[data-state=sleepy] .eo-fx-z path:nth-child(2){animation-delay:.9s}
.eo[data-state=sleepy] .eo-fx-z path:nth-child(3){animation-delay:1.8s}

/* ---- peek: pops up from the bottom edge ---- */
.eo[data-state=peek] .eo-peek{transform:translateY(86px);animation:eo-up .7s cubic-bezier(.3,1.3,.5,1) both}
.eo[data-state=peek] .eo-wl{transform:rotate(-60deg)}
.eo[data-state=peek] .eo-wr{transform:rotate(60deg)}
.eo[data-state=peek] .eo-grip{opacity:1}
.eo[data-state=peek] .eo-head{transform:rotate(-6deg)}
.eo[data-state=peek] .eo-brow-l,.eo[data-state=peek] .eo-brow-r{transform:translateY(-3px)}
.eo .eo-grip{opacity:0;transition:opacity .2s ease .3s}

/* ---- face variants driven by JS (data-face) ---- */
.eo .eo-face-alt{opacity:0}
.eo[data-face=happy] .eo-happy,.eo[data-face=wink] .eo-eyes-r .eo-happy{opacity:1}
.eo[data-face=happy] .eo-lash,.eo[data-face=wink] .eo-eyes-r .eo-lash{opacity:0}
.eo .eo-thumb{opacity:0}

/* ---- speech bubble (HTML, absolutely positioned: no layout shift) ---- */
.eo-bubble{position:absolute;left:50%;bottom:92%;transform:translate(-30%,6px) scale(.85);transform-origin:20% 100%;
  max-width:min(260px,80vw);width:max-content;padding:8px 12px;border-radius:14px;background:#fff;color:#3b2fa8;
  font:600 14px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;box-shadow:0 4px 16px rgba(60,40,160,.18),0 0 0 1px rgba(91,95,216,.18);
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .35s cubic-bezier(.34,1.5,.64,1);z-index:2;white-space:normal;text-align:left}
.eo-bubble::after{content:"";position:absolute;left:22%;bottom:-6px;width:12px;height:12px;background:inherit;transform:rotate(45deg);
  box-shadow:3px 3px 4px rgba(60,40,160,.08);border-radius:0 0 3px 0}
.eo-bubble.eo-on{opacity:1;transform:translate(-30%,0) scale(1)}
.eo[data-state=peek] .eo-bubble{bottom:62%;transform:translate(-50%,6px) scale(.85);transform-origin:50% 100%}
.eo[data-state=peek] .eo-bubble.eo-on{transform:translate(-50%,0) scale(1)}
.eo[data-state=peek] .eo-bubble::after{left:calc(50% - 6px)}
.eo-dark .eo-bubble{background:#2a2758;color:#f1efff;box-shadow:0 4px 16px rgba(0,0,0,.4),0 0 0 1px rgba(170,160,255,.25)}

/* ---- dark backgrounds: a soft rim keeps the indigo body readable ---- */
.eo-dark .eo-rim{stroke:#a9a5ff;stroke-opacity:.55}
.eo-dark .eo-caprim{stroke:#a9a5ff;stroke-opacity:.5;stroke-width:1.6;stroke-linejoin:round}
.eo-dark .eo-fx-q path,.eo-dark .eo-fx-z path,.eo-dark .eo-fx-ring path{stroke:#b6a9ff}
.eo-dark .eo-fx-q circle,.eo-dark .eo-fx-x{fill:#b6a9ff}

/* ---- tiny sizes (icons): drop fine detail, thicken key lines ---- */
.eo-tiny .eo-fine{display:none}
.eo-tiny .eo-glass{stroke-width:6.5}
.eo-tiny .eo-brow-l,.eo-tiny .eo-brow-r{stroke-width:6}
.eo-tiny .eo-fx,.eo-tiny .eo-grip{display:none}
.eo-tiny .eo-cord{stroke-width:4}

/* ---- reduced motion: no loops, no bounces; poses change with a quick fade ---- */
.eo-rm *,.eo-rm *::after{animation:none!important}
.eo-rm .eo-t,.eo-rm .eo-pup{transition:transform .01s,opacity .2s ease!important}
.eo-rm .eo-fx>g{transition:opacity .2s ease!important}
.eo-rm .eo-fx-ring path:nth-child(1){opacity:.8}
.eo-rm .eo-fx-z path,.eo-rm .eo-fx-sp>*{opacity:1}
.eo-rm[data-state=peek] .eo-peek{transform:translateY(86px)}
.eo-rm .eo-bubble{transition:opacity .2s ease}