/* Afi — colours come from the brand tokens in app.css */
.afi { width: 100%; height: 100%; overflow: visible; --mouth: .2; }
.afi .s-body-hi { stop-color: var(--afi-body-hi, #FFF8EF); }
.afi .s-body-lo { stop-color: var(--afi-body-lo, #F5DFC6); }
.afi .s-icing-hi { stop-color: var(--afi-icing-hi, #7FD6E0); }
.afi .s-icing-lo { stop-color: var(--afi-icing-lo, #0098B0); }
.afi .s-board-hi { stop-color: var(--afi-board-hi, #F0D9A0); }
.afi .s-board-lo { stop-color: var(--afi-board-lo, #A88850); }
.afi .s-cherry-hi { stop-color: #FF6F7E; }
.afi .s-cherry-lo { stop-color: #B3122F; }
.afi .s-cheek { stop-color: var(--afi-cheek, #FF8FA8); }

.afi .ink { stroke: var(--afi-ink, #3A2420); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.afi .ink-line { fill: none; stroke: var(--afi-ink, #3A2420); stroke-width: 2.4; stroke-linecap: round; opacity: .55; }
.afi .board-top { fill: rgba(255, 255, 255, .28); }
.afi .afi-shadow { fill: rgba(34, 26, 33, .16); transform-origin: 110px 236px; }
.afi .icing-top { fill: var(--afi-icing-top, #B5EAF0); }
.afi .icing-shine { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 4; stroke-linecap: round; }
.afi .ribbon { fill: var(--afi-ribbon, #EBDDBE); opacity: .9; }
.afi .ribbon-dots circle { fill: #B8985A; opacity: .8; }
.afi .sp1 { fill: #E9C46A; } .afi .sp2 { fill: #FFFFFF; } .afi .sp3 { fill: #F4A6B8; }
.afi .arm-ink { fill: none; stroke: var(--afi-ink, #3A2420); stroke-width: 19; stroke-linecap: round; }
.afi .arm-fill { fill: none; stroke: var(--afi-body-hi, #FFF8EF); stroke-width: 13; stroke-linecap: round; }
.afi .hand { fill: var(--afi-body-hi, #FFF8EF); stroke-width: 3; }
.afi .ink-thin { stroke: var(--afi-ink, #3A2420); stroke-width: 2.4; stroke-linejoin: round; }
.afi .crown-shine { fill: none; stroke: rgba(255,255,255,.7); stroke-width: 2.2; stroke-linecap: round; }
.afi .gem { fill: var(--afi-icing-lo, #0098B0); stroke: var(--afi-ink, #3A2420); stroke-width: 1.2; }
.afi .eye { fill: var(--afi-ink, #3A2420); }
.afi .lid { fill: var(--afi-body-hi, #FFF8EF); transform: scaleY(0); transform-origin: 0 -13px; transform-box: view-box; }
.afi .afi-eye .lid { transform-box: fill-box; transform-origin: 50% 0; }
.afi .afi-smile { fill: none; stroke: var(--afi-ink, #3A2420); stroke-width: 3.4; stroke-linecap: round; }
.afi .afi-mouth { opacity: 0; }
.afi .mouth { fill: #7A1E35; stroke-width: 2.4; }
.afi .tongue { fill: #FF7F98; }
.afi .whisk-handle { stroke: #B9865A; stroke-width: 5; stroke-linecap: round; }
.afi .whisk-wire { fill: none; stroke: #A9B4C0; stroke-width: 2.2; }
.afi .afi-think-dots, .afi .afi-notes { opacity: 0; }
.afi .afi-think-dots circle { fill: var(--afi-icing-top, #B5EAF0); stroke: var(--afi-ink, #3A2420); stroke-width: 2; }
.afi .afi-notes { fill: var(--afi-icing-lo, #0098B0); stroke: var(--afi-icing-lo, #0098B0); stroke-width: 3; stroke-linecap: round; }

/* --- motion --- */
.afi .afi-bob, .afi .afi-arm-r, .afi .afi-arm-l, .afi .afi-top, .afi .afi-cherry,
.afi .afi-eyes, .afi .pupil, .afi .afi-mouth, .afi .afi-smile { transform-box: view-box; }
.afi .afi-bob { transform-origin: 110px 214px; animation: afi-bob 3.2s ease-in-out infinite; }
.afi .afi-shadow { animation: afi-shadow 3.2s ease-in-out infinite; }
.afi .afi-crown { transform-origin: 113px 50px; transform-box: view-box; animation: afi-cherry 3.2s ease-in-out infinite; }
.afi .afi-stars path { stroke: #9C7A3E; stroke-width: .8; transform-box: fill-box; transform-origin: center; animation: afi-twinkle 2.8s ease-in-out infinite; }
.afi .afi-stars path:nth-child(2) { animation-delay: .5s; } .afi .afi-stars path:nth-child(3) { animation-delay: 1s; }
.afi .afi-stars path:nth-child(4) { animation-delay: 1.5s; } .afi .afi-stars path:nth-child(5) { animation-delay: 2s; }
@keyframes afi-twinkle { 0%, 100% { transform: scale(.55) rotate(0); opacity: .35; } 50% { transform: scale(1.1) rotate(18deg); opacity: 1; } }
.afi.celebrate .afi-stars path { animation-duration: .9s; }
.afi .afi-arm-r { transform-origin: 172px 150px; animation: afi-wave-idle 3.2s ease-in-out infinite; }
.afi .afi-arm-l { transform-origin: 52px 150px; }
.afi .afi-mouth { transform-origin: 110px 176px; }
.afi .afi-eyes { transition: transform .35s ease; }

@keyframes afi-bob { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-5px) scale(.99, 1.01); } }
@keyframes afi-shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.9); opacity: .75; } }
@keyframes afi-cherry { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-6deg); } }
@keyframes afi-wave-idle { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }

/* blink */
.afi.blink .afi-eye .lid { animation: afi-blink .18s ease-in-out; }
@keyframes afi-blink { 0%, 100% { transform: scaleY(0); } 50% { transform: scaleY(1); } }

/* greeting wave */
.afi.wave .afi-arm-r { animation: afi-wave 1.4s ease-in-out; }
@keyframes afi-wave { 0%, 100% { transform: rotate(0); } 15%, 45%, 75% { transform: rotate(-24deg); } 30%, 60%, 90% { transform: rotate(8deg); } }

/* listening: lean in, eyes wide, notes */
.afi.listening .afi-bob { animation: afi-lean 1.8s ease-in-out infinite; }
.afi.listening .afi-eyes { transform: translateY(-2px) scale(1.06); transform-origin: 110px 158px; }
.afi.listening .afi-notes { opacity: 1; animation: afi-notes 1.8s ease-in-out infinite; }
@keyframes afi-lean { 0%, 100% { transform: rotate(-2deg) translateY(-2px); } 50% { transform: rotate(2deg) translateY(-4px); } }
@keyframes afi-notes { 0% { transform: translate(0, 6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-6px, -14px); opacity: 0; } }

/* thinking: eyes up-right, dots */
.afi.thinking .afi-eyes { transform: translate(4px, -4px); }
.afi.thinking .afi-think-dots { opacity: 1; }
.afi.thinking .afi-think-dots circle { animation: afi-dot 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.afi.thinking .afi-think-dots circle:nth-child(2) { animation-delay: .15s; }
.afi.thinking .afi-think-dots circle:nth-child(3) { animation-delay: .3s; }
.afi.thinking .afi-arm-r { animation: afi-stir 1.1s ease-in-out infinite; }
@keyframes afi-dot { 0%, 100% { transform: scale(.7); opacity: .5; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes afi-stir { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }

/* talking: open mouth scaled by --mouth */
.afi.talking .afi-smile { opacity: 0; }
.afi.talking .afi-mouth { opacity: 1; transform: translate(110px, 178px) scaleY(var(--mouth)); transform-origin: 0 0; transition: transform .07s linear; }
.afi.talking .afi-mouth { transform-box: view-box; }
.afi.talking .afi-arm-r { animation: afi-wave-idle 1.2s ease-in-out infinite; }

/* celebrate: hop + squash */
.afi.celebrate .afi-bob { animation: afi-hop .7s cubic-bezier(.3, 1.6, .5, 1) 3; }
.afi.celebrate .afi-arm-r { animation: afi-wave .7s ease-in-out 3; }
.afi.celebrate .afi-arm-l { animation: afi-wave-l .7s ease-in-out 3; }
@keyframes afi-hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 20% { transform: translateY(2px) scale(1.06, .94); } 55% { transform: translateY(-22px) scale(.97, 1.04); } }
@keyframes afi-wave-l { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(22deg); } }

/* baking: whisk furiously */
.afi.baking .afi-arm-r { animation: afi-stir .45s ease-in-out infinite; }
.afi.baking .afi-eyes { transform: translateY(2px); }

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