/* Finni – the Comitement browser fish. Pure SVG + CSS, no external assets. */
.finni { width: 100%; max-width: 300px; height: auto; overflow: visible; }
.finni * { transform-box: fill-box; }

.finni .body      { fill: var(--finni-body); }
.finni .belly     { fill: var(--finni-belly); }
.finni .tail,
.finni .fin-top,
.finni .fin-side  { fill: var(--finni-fin); }
.finni .stripe    { fill: none; stroke: var(--finni-stripe); stroke-width: 5; stroke-linecap: round; opacity: .55; }
.finni .cheek     { fill: var(--finni-cheek); opacity: .55; }
.finni .eye       { fill: #fff; }
.finni .pupil     { fill: #1d2433; }
.finni .glint     { fill: #fff; }
.finni .eye-closed{ fill: none; stroke: #1d2433; stroke-width: 3; stroke-linecap: round; display: none; }
.finni .mouth.smile { fill: none; stroke: #1d2433; stroke-width: 3; stroke-linecap: round; }
.finni .mouth.oh  { fill: #1d2433; display: none; }
.finni .shadow    { fill: var(--finni-shadow); }
.finni .bubble    { fill: none; stroke: var(--finni-bubble); stroke-width: 1.5; opacity: 0; }

.finni .hat       { fill: #f5b301; stroke: #c98d00; stroke-width: 2; }
.finni .brim      { fill: #f5b301; stroke: #c98d00; stroke-width: 2; }
.finni .hat-band  { fill: #ffd95a; }
.finni .wrench path { stroke: #8a94a6; stroke-width: 6; stroke-linecap: round; }
.finni .wrench circle { fill: none; stroke: #8a94a6; stroke-width: 5; }
.finni .lens-glass  { fill: var(--finni-lens); }
.finni .lens-ring   { fill: none; stroke: #5b6475; stroke-width: 5; }
.finni .lens-handle { stroke: #7a5230; stroke-width: 8; stroke-linecap: round; }
.finni .alert-bubble { fill: #e5484d; }
.finni .alert text { fill: #fff; font: 700 26px/1 system-ui, sans-serif; }
.finni .sweat     { fill: #7cc4ff; }
.finni .party-hat path { fill: #8e4ec6; }
.finni .party-hat circle { fill: #ffd95a; }
.finni .confetti .c1, .finni .confetti .c4 { fill: #e5484d; }
.finni .confetti .c2, .finni .confetti .c5 { fill: #30a46c; }
.finni .confetti .c3, .finni .confetti .c6 { fill: #3e63dd; }
.finni .zzz text  { fill: var(--finni-zzz); font: 700 20px/1 system-ui, sans-serif; opacity: 0; }

/* Accessories are hidden unless the state asks for them. */
.finni [data-part] { display: none; }
.finni[data-state="idle"] [data-part="water"],
.finni[data-state="inspecting"] [data-part="lens"],
.finni[data-state="working"] [data-part="helmet"],
.finni[data-state="error"] [data-part="error"],
.finni[data-state="celebrating"] [data-part="party"],
.finni[data-state="sleeping"] [data-part="sleep"] { display: inline; }

/* --- idle: gentle swimming --------------------------------------------- */
.finni[data-state="idle"] .fish { animation: swim 3.2s ease-in-out infinite; }
.finni[data-state="idle"] .tail { transform-origin: 100% 50%; animation: wag .6s ease-in-out infinite alternate; }
.finni[data-state="idle"] .fin-side { transform-origin: 50% 0; animation: flap 1s ease-in-out infinite alternate; }
.finni[data-state="idle"] .bubble { animation: bubble 3s ease-in infinite; }
.finni[data-state="idle"] .b2 { animation-delay: 1s; }
.finni[data-state="idle"] .b3 { animation-delay: 2s; }
.finni[data-state="idle"] .shadow { animation: shadow 3.2s ease-in-out infinite; }

/* --- inspecting: magnifier sweeps, pupil follows ------------------------ */
.finni[data-state="inspecting"] .fish { animation: lean 2.4s ease-in-out infinite; }
.finni[data-state="inspecting"] .tail { transform-origin: 100% 50%; animation: wag 1s ease-in-out infinite alternate; }
.finni[data-state="inspecting"] .lens { transform-origin: 20% 20%; animation: scan 2.4s ease-in-out infinite; }
.finni[data-state="inspecting"] .pupil { animation: look 2.4s ease-in-out infinite; }

/* --- working: helmet, busy wiggle, wrench taps -------------------------- */
.finni[data-state="working"] .fish { animation: busy .5s ease-in-out infinite alternate; }
.finni[data-state="working"] .tail { transform-origin: 100% 50%; animation: wag .25s ease-in-out infinite alternate; }
.finni[data-state="working"] .wrench { transform-origin: 0% 100%; animation: tap .5s ease-in-out infinite alternate; }

/* --- error: shake, open mouth, alert bubble ----------------------------- */
.finni[data-state="error"] .fish { animation: shake .45s ease-in-out 3, sink 1.4s ease-out forwards; }
.finni[data-state="error"] .mouth.smile { display: none; }
.finni[data-state="error"] .mouth.oh { display: inline; }
.finni[data-state="error"] .alert { transform-origin: 30% 100%; animation: pop .4s ease-out both, pulse 1.2s ease-in-out .4s infinite; }
.finni[data-state="error"] .sweat { animation: drip 1.4s ease-in infinite; }

/* --- celebrating: jump + confetti --------------------------------------- */
.finni[data-state="celebrating"] .fish { animation: jump .9s cubic-bezier(.3,1.6,.5,1) infinite; }
.finni[data-state="celebrating"] .tail { transform-origin: 100% 50%; animation: wag .2s ease-in-out infinite alternate; }
.finni[data-state="celebrating"] .confetti > * { animation: fall 1.6s linear infinite; }
.finni[data-state="celebrating"] .c2 { animation-delay: .3s !important; }
.finni[data-state="celebrating"] .c3 { animation-delay: .6s !important; }
.finni[data-state="celebrating"] .c4 { animation-delay: .15s !important; }
.finni[data-state="celebrating"] .c5 { animation-delay: .9s !important; }
.finni[data-state="celebrating"] .c6 { animation-delay: 1.2s !important; }

/* --- sleeping: eyes closed, slow breathing, z's -------------------------- */
.finni[data-state="sleeping"] .eye-open { display: none; }
.finni[data-state="sleeping"] .eye-closed { display: inline; }
.finni[data-state="sleeping"] .fish { transform-origin: 50% 100%; animation: breathe 4s ease-in-out infinite; }
.finni[data-state="sleeping"] .body,
.finni[data-state="sleeping"] .belly { filter: saturate(.55); }
.finni[data-state="sleeping"] .zzz text { animation: zzz 3s ease-in-out infinite; }
.finni[data-state="sleeping"] .z2 { animation-delay: 1s !important; }
.finni[data-state="sleeping"] .z3 { animation-delay: 2s !important; }

@keyframes swim   { 0%,100% { transform: translate(-6px, 0); } 50% { transform: translate(6px, -6px); } }
@keyframes shadow { 0%,100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(.85); opacity: .6; } }
@keyframes wag    { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
@keyframes flap   { from { transform: rotate(-8deg); } to { transform: rotate(14deg); } }
@keyframes bubble { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(-120px); } }
@keyframes lean   { 0%,100% { transform: rotate(0deg) translateX(0); } 50% { transform: rotate(-4deg) translateX(4px); } }
@keyframes scan   { 0%,100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(-6px, 18px) rotate(-8deg); } 66% { transform: translate(4px, 34px) rotate(6deg); } }
@keyframes look   { 0%,100% { transform: translate(0, 0); } 33% { transform: translate(1px, 3px); } 66% { transform: translate(2px, 5px); } }
@keyframes busy   { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-3px) rotate(2deg); } }
@keyframes tap    { from { transform: rotate(0deg); } to { transform: rotate(-18deg); } }
@keyframes shake  { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px) rotate(-3deg); } 75% { transform: translateX(6px) rotate(3deg); } }
@keyframes sink   { to { transform: translateY(8px) rotate(4deg); } }
@keyframes pop    { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes pulse  { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes drip   { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(20px); opacity: 0; } }
@keyframes jump   { 0%,100% { transform: translateY(0) rotate(0deg); } 40% { transform: translateY(-26px) rotate(-8deg); } 60% { transform: translateY(-26px) rotate(6deg); } }
@keyframes fall   { 0% { transform: translateY(-10px) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(150px) rotate(360deg); opacity: 0; } }
@keyframes breathe{ 0%,100% { transform: translateY(14px) scale(1, 1); } 50% { transform: translateY(14px) scale(1.02, .97); } }
@keyframes zzz    { 0% { opacity: 0; transform: translate(0, 6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -14px); } }

@media (prefers-reduced-motion: reduce) {
  .finni *, .finni .fish { animation: none !important; }
  .finni[data-state="idle"] .bubble { opacity: .6; }
  .finni[data-state="sleeping"] .zzz text { opacity: 1; }
}