/* chrome/dunce-buddy.css — the Dunce buddy mascot (a personified dunce hat). Shared by Ask Dunce,
   the sim-shell takeaway, and the funding page. Pair with chrome/dunce-buddy.mjs.
   Idle (float + wandering eyes + blink + twinkle) is always on. Moods are toggled by classes on the
   .buddy element: .celebrate .wobble .spin .look .sleepy, plus .flash for the reusable star burst.
   Transitions merge states (no snapping); the star burst is reserved for real celebrations. */

.buddy { display: inline-block; line-height: 0; }
.buddy svg { width: 100%; height: 100%; overflow: visible; display: block; }

.db-shadow { fill: rgba(0,0,0,.4); }
.db-band { fill: #FFC24D; opacity: .92; }
.db-eye { fill: #F6F7FB; }
.db-pupil { fill: #161a2c; }
.db-glint { fill: #fff; }
.db-spark, .db-frontspark { fill: #FFE08A; }
.db-cheek { fill: #FF5A6A; opacity: .35; }
.db-arm { fill: none; stroke-linecap: round; stroke-width: 6; }
.db-joy { opacity: 0; }
.db-zzz { opacity: 0; fill: #B4BACB; font-weight: 800; transform-box: fill-box; transform-origin: 50% 50%; }
.db-mouth-smile { fill: none; stroke: #161a2c; stroke-width: 3.4; stroke-linecap: round; }
.db-mouth-open { opacity: 0; } .db-mouth-cavity { fill: #161a2c; } .db-tongue { fill: #FF5A6A; opacity: .9; }
.db-eyes-closed, .db-eyes-happy { opacity: 0; }
.db-eyes-closed path, .db-eyes-happy path { fill: none; stroke: #161a2c; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }

/* style fills */
.buddy.classic .db-hat { fill: #7C5CFF; } .buddy.classic .db-arm { stroke: #7C5CFF; }
.buddy.chibi   .db-hat { fill: #8C6BFF; } .buddy.chibi   .db-arm { stroke: #8C6BFF; }
.buddy.spark   .db-hat { fill: url(#sparkgrad); } .buddy.spark .db-arm { stroke: #5B4BE0; } .buddy.spark .db-band { fill: #C9BCFF; }

/* idle */
.db-float  { transform-box: fill-box; transform-origin: 50% 50%; animation: db-float 4.6s ease-in-out infinite; }
.db-body   { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .28s ease; }
.db-eyes-open, .db-eyes-closed, .db-eyes-happy, .db-mouth-smile, .db-mouth-open { transition: opacity .22s ease; }
.db-shadow { transform-box: fill-box; transform-origin: 50% 50%; animation: db-shadowfloat 4.6s ease-in-out infinite; }
.db-eyes-open   { animation: db-eye-open 4.8s infinite; }
.db-eyes-closed { animation: db-eye-blink 4.8s infinite; }
.db-pupils { transform-box: fill-box; transform-origin: 50% 50%; animation: db-wander 9s ease-in-out infinite; }
.db-spark, .db-frontspark { transform-box: fill-box; transform-origin: 50% 50%; animation: db-twinkle 2.6s ease-in-out infinite; }

@keyframes db-float { 0%{transform:translateY(0) rotate(-1.6deg)} 50%{transform:translateY(-9px) rotate(1.6deg)} 100%{transform:translateY(0) rotate(-1.6deg)} }
@keyframes db-shadowfloat { 0%,100%{transform:scaleX(1);opacity:.4} 50%{transform:scaleX(.8);opacity:.26} }
@keyframes db-eye-open  { 0%,47%{opacity:1} 48%,50%{opacity:0} 51%,91%{opacity:1} 92%,94%{opacity:0} 95%,100%{opacity:1} }
@keyframes db-eye-blink { 0%,47%{opacity:0} 48%,50%{opacity:1} 51%,91%{opacity:0} 92%,94%{opacity:1} 95%,100%{opacity:0} }
@keyframes db-wander { 0%,11%{transform:translate(0,0)} 19%,29%{transform:translate(4px,1px)} 37%,47%{transform:translate(-4px,1px)} 55%,61%{transform:translate(1px,-3px)} 69%,81%{transform:translate(3px,2px)} 90%,100%{transform:translate(0,0)} }
@keyframes db-twinkle { 0%,100%{transform:scale(1) rotate(0);opacity:.8} 50%{transform:scale(1.35) rotate(45deg);opacity:1} }

/* celebrate = jump + ^^ eyes + open grin; loops while the class is on (JS controls how long). The
   star burst (.flash) is the ONLY place sparkles appear — reserved for donations / spends / wins. */
.buddy.celebrate .db-body   { animation: db-jump .72s cubic-bezier(.34,.66,.3,1) infinite; }
.buddy.celebrate .db-shadow { animation: db-shadowjump .72s cubic-bezier(.34,.66,.3,1) infinite; }
.buddy.celebrate .db-eyes-open, .buddy.celebrate .db-eyes-closed { opacity:0; animation:none; }
.buddy.celebrate .db-eyes-happy { opacity:1; }
.buddy.celebrate .db-mouth-smile { opacity:0; }
.buddy.celebrate .db-mouth-open { opacity:1; }
@keyframes db-jump { 0%{transform:translateY(0) scale(1,1)} 15%{transform:translateY(0) scale(1.14,.82)} 42%{transform:translateY(-30px) scale(.9,1.16)} 66%{transform:translateY(0) scale(1.12,.86)} 82%{transform:translateY(-8px) scale(.98,1.05)} 100%{transform:translateY(0) scale(1,1)} }
@keyframes db-shadowjump { 0%,100%{transform:scaleX(1);opacity:.4} 42%{transform:scaleX(.5);opacity:.14} }
@keyframes db-joy { 0%{opacity:0;transform:translateY(2px) scale(.4)} 35%{opacity:1} 100%{opacity:0;transform:translateY(-24px) scale(1.15)} }
.buddy.flash .db-joy { animation: db-joy .7s ease-out; }

/* wobble / spin / look / sleepy */
.buddy.wobble .db-body { animation: db-wobble 1.1s ease-in-out infinite; }
@keyframes db-wobble { 0%,100%{transform:rotate(0)} 28%{transform:rotate(-7deg)} 72%{transform:rotate(7deg)} }
.buddy.spin .db-body { animation: db-spin 1s ease; transform-origin: 50% 50%; }
@keyframes db-spin { 0%{transform:translateY(0) rotateY(0)} 45%{transform:translateY(-26px) rotateY(180deg)} 100%{transform:translateY(0) rotateY(360deg)} }
.buddy.look .db-pupils { animation: db-look 2.8s ease-in-out infinite; }
@keyframes db-look { 0%,100%{transform:translate(0,0)} 22%{transform:translate(5px,1px)} 50%{transform:translate(-5px,1px)} 74%{transform:translate(0,-3px)} }
.buddy.sleepy .db-eyes-open { opacity:0; animation:none; }
.buddy.sleepy .db-eyes-closed { opacity:1; animation:none; }
.buddy.sleepy .db-pupils { animation:none; }
.buddy.sleepy .db-zzz { animation: db-zzz 3s ease-in-out infinite; }
@keyframes db-zzz { 0%{opacity:0;transform:translate(0,0) scale(.6)} 30%{opacity:.9} 100%{opacity:0;transform:translate(10px,-26px) scale(1.15)} }

/* ── Integration sizing ──────────────────────────────────────────────────────── */
/* takeaway (sim-shell): the buddy sits where the grad-cap used to */
.dock-takeaway .dt-spark { width: 36px; height: 44px; flex: 0 0 auto; align-self: flex-start; }