/* Finn (public/js/finn-art.js): the app's corner helper (public/js/mascot.js) and the sign-in page's greeter.
   Moods are classes on the element around the SVG: m-calm, m-busy, m-waiting, m-worried, m-happy; finn-wave waves. */

/* ---------- the corner helper ---------- */
.finn { position: fixed; right: 18px; bottom: 16px; z-index: 80; width: 76px; height: 80px; padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; filter: drop-shadow(0 10px 16px rgba(40, 25, 15, .25)); }
.finn[hidden] { display: none; }
.finn:focus-visible { outline: 3px solid rgba(242, 88, 28, .5); outline-offset: 2px; border-radius: 24px; }
.has-savebar .finn { bottom: 100px; }
@media (max-width: 720px) { .finn { right: 10px; bottom: 10px; width: 60px; height: 64px; } .has-savebar .finn { bottom: 92px; } }
.finn-svg { width: 100%; height: 100%; overflow: visible; display: block; }

/* The count of bills needing you */
.finn-badge { position: absolute; top: 2px; right: 0; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #ff6a2b; color: #fff;
  font: 700 12px/22px system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2.5px var(--bg, #fff), 0 4px 10px rgba(255, 95, 126, .45);
  animation: finn-pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.finn-badge[hidden] { display: none; }
@keyframes finn-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* The one line, on hover or focus only */
.finn-bubble { position: absolute; right: calc(100% + 8px); bottom: 26px; width: max-content; max-width: min(280px, calc(100vw - 120px)); padding: 10px 13px;
  border-radius: 16px 16px 4px 16px; background: var(--card, #fff); color: var(--ink, #1c1917); font: 500 13px/1.45 system-ui, sans-serif; text-align: left;
  box-shadow: var(--sh-float, 0 12px 32px rgba(70, 30, 10, .18)); border: 1px solid var(--hair, rgba(0, 0, 0, .08));
  opacity: 0; transform: translateY(6px) scale(.96); transform-origin: right bottom; pointer-events: none; transition: opacity .18s, transform .22s cubic-bezier(.3, 1.4, .5, 1); }
.finn:hover .finn-bubble, .finn:focus-visible .finn-bubble { opacity: 1; transform: none; }
@media (hover: none) { .finn-bubble { display: none; } }
/* Saying something (the welcome back): the bubble open by itself, on phones too, a little wider; tap Finn to talk. */
.finn.say .finn-bubble { display: block; opacity: 1; transform: none; white-space: pre-line; max-width: min(300px, calc(100vw - 110px)); }

/* ---------- the drawing: what shows per mood ---------- */
.finn-mouth, .finn-brows, .finn-pencil, .finn-note, .finn-sweat, .finn-sparks { opacity: 0; transition: opacity .25s; }
.finn-brows path { stroke: #4a1f0c; stroke-width: 2.4; stroke-linecap: round; fill: none; }
.m-calm .finn-mouth.calm, .m-waiting .finn-mouth.calm, .finn-wave .finn-mouth.calm,
.m-happy .finn-mouth.happy, .m-happy .finn-mouth.happy-tongue, .m-worried .finn-mouth.worry, .m-busy .finn-mouth.busy { opacity: 1; }
.finn-wave.m-happy .finn-mouth.calm { opacity: 0; }
.m-worried .finn-brows, .m-worried .finn-sweat, .m-busy .finn-pencil, .m-busy .finn-note, .m-happy .finn-sparks { opacity: 1; }

/* Pivots for the moving parts */
.finn-all, .finn-body, .finn-arm, .finn-antenna, .finn-eye, .finn-pupil, .finn-shadow, .finn-sparks path, .finn-sweat, .finn-pencil { transform-box: fill-box; }
.finn-all { transform-origin: 50% 100%; }
.finn-arm.l { transform-origin: 90% 10%; }
.finn-arm.r { transform-origin: 10% 10%; }
.finn-antenna { transform-origin: 0% 100%; }
.finn-eye { transform-origin: center; }
.finn-shadow { transform-origin: center; }

/* ---------- always: breathing, blinking, glancing, the antenna swaying ---------- */
.finn-all { animation: finn-breathe 3.8s ease-in-out infinite; }
@keyframes finn-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, .985) translateY(.6px); } }
.finn-eye { animation: finn-blink 5.5s infinite; }
@keyframes finn-blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
.finn-pupil { animation: finn-look 11s ease-in-out infinite; }
@keyframes finn-look { 0%, 28%, 100% { transform: translate(0, 0); } 32%, 46% { transform: translate(-1.8px, .4px); } 50%, 64% { transform: translate(1.8px, -.4px); } 68% { transform: translate(0, 0); } }
.finn-antenna { animation: finn-sway 3.2s ease-in-out infinite; }
@keyframes finn-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(7deg); } }
.finn-tip { animation: finn-glow 3.2s ease-in-out infinite; }
@keyframes finn-glow { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }

/* ---------- moods ---------- */
/* calm: a slow float */
.m-calm .finn-all { animation: finn-breathe 3.8s ease-in-out infinite, finn-float 5s ease-in-out infinite; }
@keyframes finn-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2.5px; } }
.m-calm .finn-shadow { animation: finn-shadow 5s ease-in-out infinite; }
@keyframes finn-shadow { 0%, 100% { transform: scale(1); opacity: .18; } 50% { transform: scale(.88); opacity: .12; } }

/* busy: eyes on the note, writing */
.m-busy .finn-pupil { animation: none; transform: translate(1.6px, 2px); }
.m-busy .finn-arm.r { animation: finn-write .45s ease-in-out infinite alternate; }
@keyframes finn-write { from { transform: rotate(-4deg) translateY(1px); } to { transform: rotate(9deg) translateY(-1px); } }

/* waiting: waving for attention every few seconds, with a little hop */
.m-waiting .finn-arm.r { animation: finn-wave-now 4.5s ease-in-out infinite; }
@keyframes finn-wave-now { 0%, 60%, 100% { transform: rotate(0); } 66% { transform: rotate(-70deg); } 72% { transform: rotate(-40deg); } 78% { transform: rotate(-72deg); } 84% { transform: rotate(-42deg); } 90% { transform: rotate(-60deg); } }
.m-waiting .finn-all { animation: finn-breathe 3.8s ease-in-out infinite, finn-hop-soft 4.5s ease-in-out infinite; }
@keyframes finn-hop-soft { 0%, 60%, 100% { translate: 0 0; } 66% { translate: 0 -4px; } 72% { translate: 0 0; } }

/* worried: a nervous little sway, a sweat drop sliding */
.m-worried .finn-all { animation: finn-breathe 2.4s ease-in-out infinite, finn-nervous 2.8s ease-in-out infinite; }
@keyframes finn-nervous { 0%, 100% { rotate: 0deg; } 25% { rotate: -2.5deg; } 75% { rotate: 2.5deg; } }
.m-worried .finn-sweat { animation: finn-drip 2.6s ease-in infinite; }
@keyframes finn-drip { 0% { transform: translateY(-2px); opacity: 0; } 20% { opacity: 1; } 80% { transform: translateY(5px); opacity: 1; } 100% { transform: translateY(7px); opacity: 0; } }
.m-worried .finn-pupil { animation: none; transform: translate(0, -.6px) scale(.9); }

/* happy: jumping, arms up, sparkles */
.m-happy .finn-all { animation: finn-jump .7s cubic-bezier(.3, .0, .4, 1) 3; }
@keyframes finn-jump { 0%, 100% { translate: 0 0; transform: scale(1.04, .94); } 45% { translate: 0 -10px; transform: scale(.97, 1.04); } }
.m-happy .finn-arm.l { transform: rotate(40deg); }
.m-happy .finn-arm.r { transform: rotate(-40deg); }
.m-happy .finn-sparks path { animation: finn-twinkle 1.1s ease-in-out infinite; transform-origin: center; }
.m-happy .finn-sparks path:nth-child(2) { animation-delay: .35s; }
.m-happy .finn-sparks path:nth-child(3) { animation-delay: .7s; }
@keyframes finn-twinkle { 0%, 100% { transform: scale(.4) rotate(0); opacity: .3; } 50% { transform: scale(1.15) rotate(25deg); opacity: 1; } }

/* hello: a proper wave (the sign-in page, and on hover in the app) */
.finn-wave .finn-arm.r, .finn:hover .finn-arm.r { animation: finn-hello 1.6s ease-in-out infinite; }
@keyframes finn-hello { 0%, 100% { transform: rotate(-20deg); } 25% { transform: rotate(-78deg); } 50% { transform: rotate(-38deg); } 75% { transform: rotate(-80deg); } }
.finn:hover .finn-all { translate: 0 -3px; transition: translate .2s; }
.finn:active .finn-all { transform: scale(1.08, .9); transition: transform .08s; }

/* Calm motion (8 Nov 2026): the idle loops play a few times when Finn appears or his mood changes, then he rests,
   so nothing on screen moves for no reason. Blinking stays (it reads as alive, not busy), and so does writing while
   he's actually working; hovering him still waves for as long as you hover. */
.finn-all, .finn-pupil, .finn-antenna, .finn-tip, .m-calm .finn-all, .m-calm .finn-shadow, .m-waiting .finn-arm.r,
.m-waiting .finn-all, .m-worried .finn-all, .m-worried .finn-sweat, .m-happy .finn-sparks path,
.finn-wave .finn-arm.r { animation-iteration-count: 3; }
.m-happy .finn-sparks path { animation-fill-mode: forwards; }

@media (prefers-reduced-motion: reduce) { .finn *, .finn, .finn-stage * { animation: none !important; transition: none !important; } }