/* Floo, the Floow mascot (core/templates/core/_floo_svg.html, ADR 0005). Mood comes from data
   (e.g. pocket/floo.py); motion is calm and stops under prefers-reduced-motion. */
.floo { overflow: visible; --floo-accent: var(--p-pocket); }
.floo[data-product="business"] { --floo-accent: var(--p-business); }
.floo[data-product="pos"] { --floo-accent: var(--p-pos); }
.floo * { transform-box: fill-box; }
.floo .f-accent { fill: var(--floo-accent); }
/* One accessory per product; switching data-product swaps it (floow.id tabs). */
.floo .acc { display: none; }
.floo[data-product="business"] .acc-biz, .floo[data-product="pocket"] .acc-pocket, .floo[data-product="pos"] .acc-pos { display: inline; }
.floo .f-all { transform-origin: 50% 100%; }
.floo .f-breathe { transform-origin: 50% 100%; animation: f-breathe 3.6s ease-in-out infinite; }
.floo .f-head { transform-origin: 50% 90%; animation: f-tilt 7s ease-in-out infinite; }
.floo .f-tail { transform-origin: 0% 60%; animation: f-tail 3.2s ease-in-out infinite; }
.floo .f-eye { transform-origin: 50% 50%; animation: f-blink 5s infinite; }
.floo .f-pupils { transition: transform .25s ease-out; }
.floo .f-ear, .floo .f-dot { transform-origin: 50% 50%; }
.floo .fx, .floo .f-happy-eyes, .floo .f-closed-eyes, .floo .f-brows, .floo .f-mouth-open, .floo .f-mouth-wavy, .floo .f-receipt { opacity: 0; }
.floo[data-state="happy"] .f-all { animation: f-hop 1.1s cubic-bezier(.3,.7,.4,1) 2; }
.floo[data-state="happy"] .f-open-eyes, .floo[data-state="happy"] .f-mouth { opacity: 0; }
.floo[data-state="happy"] .f-happy-eyes, .floo[data-state="happy"] .f-mouth-open { opacity: 1; }
.floo[data-state="happy"] .fx-spark { animation: f-twinkle 1.4s ease-in-out 3; }
.floo[data-state="happy"] .fx-spark.b { animation-delay: .45s; }
.floo[data-state="happy"] .fx-spark.c { animation-delay: .9s; }
.floo[data-state="happy"] .f-dot { animation: f-spin 1.1s ease-in-out 2; }
.floo[data-state="worried"] .f-brows, .floo[data-state="worried"] .f-mouth-wavy, .floo[data-state="worried"] .fx-sweat { opacity: 1; }
.floo[data-state="worried"] .f-mouth { opacity: 0; }
.floo[data-state="worried"] .fx-sweat { animation: f-sweat 1.8s ease-in infinite; }
.floo[data-state="worried"] .f-all { animation: f-shiver .5s ease-in-out 3; }
.floo[data-state="worried"] .f-ear.l { transform: rotate(-14deg); }
.floo[data-state="worried"] .f-ear.r { transform: rotate(14deg); }
.floo[data-state="worried"] .f-tail { animation: none; transform: rotate(18deg); }
.floo[data-state="scan"] .f-receipt { opacity: 1; }
.floo[data-state="scan"] .f-dot { opacity: 0; }
.floo[data-state="scan"] .f-pupils { transform: translate(0, 4px); }
.floo[data-state="scan"] .f-scanline { animation: f-scan 1.5s ease-in-out infinite; }
.floo[data-state="scan"] .f-head { animation: f-read 3s ease-in-out infinite; }
.floo[data-state="sleep"] .f-open-eyes { opacity: 0; }
.floo[data-state="sleep"] .f-closed-eyes { opacity: 1; }
.floo[data-state="sleep"] .f-breathe { animation-duration: 5.5s; }
.floo[data-state="sleep"] .f-head { animation: none; transform: rotate(-6deg) translateY(3px); }
.floo[data-state="sleep"] .f-tail { animation: none; }
.floo[data-state="sleep"] .fx-zz { animation: f-z 3s ease-in-out infinite; }
.floo[data-state="sleep"] .fx-zz.b { animation-delay: 1s; }
.floo[data-state="sleep"] .fx-zz.c { animation-delay: 2s; }
@keyframes f-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 1.028); } }
@keyframes f-tilt { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.5deg); } }
@keyframes f-tail { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(9deg); } }
@keyframes f-blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.08); } }
@keyframes f-hop { 0% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(0) scale(1.06, .92); } 40% { transform: translateY(-22px) scale(.97, 1.04); } 62% { transform: translateY(0) scale(1.04, .95); } 78%, 100% { transform: translateY(0) scale(1, 1); } }
@keyframes f-spin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes f-twinkle { 0%, 100% { transform: scale(.4); opacity: 0; } 50% { transform: scale(1); opacity: 1; } }
@keyframes f-sweat { 0% { transform: translateY(-4px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
@keyframes f-shiver { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
@keyframes f-scan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(40px); } }
@keyframes f-read { 0%, 100% { transform: rotate(-3deg) translateY(4px); } 50% { transform: rotate(3deg) translateY(4px); } }
@keyframes f-z { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(14px, -26px) scale(1.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .floo * { animation: none !important; transition: none !important; } }

/* Poses (onboarding "tipe Floo", capture modes) and waving. */
.floo .pose, .floo .f-arm-up { display: none; }
.floo[data-pose="voice"] .pose-voice, .floo[data-pose="receipt"] .pose-receipt, .floo[data-pose="type"] .pose-type, .floo[data-pose="email"] .pose-email { display: inline; }
.floo[data-pose="email"] .f-dot, .floo[data-pose="email"] .acc { display: none; }
.floo[data-pose="receipt"] .f-mouth, .floo[data-pose="receipt"] .f-mouth-open { opacity: 0; }
.floo[data-state="wave"] .f-arm-r { display: none; }
.floo[data-state="wave"] .f-arm-up { display: inline; transform-origin: 10% 90%; animation: f-wave .7s ease-in-out 3; }
.floo[data-state="wave"] .f-happy-eyes, .floo[data-state="wave"] .f-mouth-open { opacity: 1; }
.floo[data-state="wave"] .f-open-eyes, .floo[data-state="wave"] .f-mouth { opacity: 0; }
@keyframes f-wave { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-16deg); } }
@media (prefers-reduced-motion: reduce) { .floo[data-state="wave"] .f-arm-up { animation: none; } }