/* The MumPA orb, copied verbatim from MumPA app shell.css (v1.72.0). */
[data-tone="brand"]   { --mod-accent: var(--brand);    --mod-accent-soft: var(--brand-soft);    --mod-accent-strong: var(--brand-strong);    --mod-accent-on: var(--brand-on); }
[data-tone="1"]       { --mod-accent: var(--accent-1); --mod-accent-soft: var(--accent-1-soft); --mod-accent-strong: var(--accent-1-strong); --mod-accent-on: var(--accent-1-on); }
[data-tone="2"]       { --mod-accent: var(--accent-2); --mod-accent-soft: var(--accent-2-soft); --mod-accent-strong: var(--accent-2-strong); --mod-accent-on: var(--accent-2-on); }
[data-tone="3"]       { --mod-accent: var(--accent-3); --mod-accent-soft: var(--accent-3-soft); --mod-accent-strong: var(--accent-3-strong); --mod-accent-on: var(--accent-3-on); }
[data-tone="4"]       { --mod-accent: var(--accent-4); --mod-accent-soft: var(--accent-4-soft); --mod-accent-strong: var(--accent-4-strong); --mod-accent-on: var(--accent-4-on); }
[data-tone="5"]       { --mod-accent: var(--accent-5); --mod-accent-soft: var(--accent-5-soft); --mod-accent-strong: var(--accent-5-strong); --mod-accent-on: var(--accent-5-on); }
[data-tone="6"]       { --mod-accent: var(--accent-6); --mod-accent-soft: var(--accent-6-soft); --mod-accent-strong: var(--accent-6-strong); --mod-accent-on: var(--accent-6-on); }
[data-tone="7"]       { --mod-accent: var(--accent-7); --mod-accent-soft: var(--accent-7-soft); --mod-accent-strong: var(--accent-7-strong); --mod-accent-on: var(--accent-7-on); }
/*
   The MumPA orb — animated brand mark. Tinted by its tone.
   ============================================================ */
.orb-wrap { display: block; line-height: 0; }
.orb-wrap svg.orb { width: 100%; height: 100%; display: block; }

.orb .bg { fill: var(--mod-accent, var(--brand)); transition: fill 1.2s var(--ease); }
.orb .leaves { fill: var(--orb-petal); transition: fill 1.2s var(--ease); }
.orb .face-fill { fill: var(--orb-face); }
.orb .face-ring { fill: none; stroke: var(--mod-accent, var(--brand)); stroke-width: 3.58; transition: stroke 1.2s var(--ease); }
.orb .feat { fill: var(--orb-ink); opacity: 0.9; }
.orb .featline { fill: none; stroke: var(--orb-ink); stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }

.orb .rotor, .orb .rotor2, .orb .breath, .orb .bloom, .orb .flex,
.orb .echo, .orb .face, .orb .eyes { transform-box: view-box; }

.orb .rotor  { transform-origin: 50px 47.76px; }
.orb[data-state="inactive"] .rotor { animation: orbspin 64s linear infinite; }
.orb .rotor2 { transform-origin: 50px 47.76px; }
.orb .breath { transform-origin: 50px 47.76px; animation: orbbreath 5.4s ease-in-out infinite; }
.orb .flex   { transform-origin: 50px 47.76px; }
.orb .echo   { transform-origin: 50px 47.76px; opacity: 0; }
@keyframes orbspin { to { transform: rotate(360deg); } }
@keyframes orbbreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }

/* Inactive -> active: one scale, one spring; the face springs up through it */
.orb .bloom { transform-origin: 50px 47.76px; transform: scale(1); transition: transform 1.05s cubic-bezier(.24,1.35,.32,1); }
.orb[data-state="active"] .bloom { transform: scale(1.907); }
.orb .face { transform-origin: 50px 49.9px; transform: translateY(-2.14px) scale(0); transition: transform .8s cubic-bezier(.26,1.5,.36,1); }
.orb[data-state="active"] .face { transform: translateY(-2.14px) scale(1); transition-delay: .16s; }
.orb .features { opacity: 0; transition: opacity .3s ease; }
.orb[data-state="active"] .features { opacity: 1; transition-delay: .56s; }
/* Awake: the bloomed petals only rotate (smooth); never scale against the face */
.orb[data-state="active"] .breath { animation: none; }
.orb[data-state="active"] .flex { animation: none; }

/* Inactive gestures */
.orb.mv-furl .flex { animation: orbfurl 3.4s cubic-bezier(.45,0,.25,1); }
.orb.mv-furl .rotor2 { animation: orbturn540 3.4s cubic-bezier(.5,0,.22,1); }
@keyframes orbfurl { 0% { transform: scale(1); } 34% { transform: scale(.34); } 52% { transform: scale(.34); } 78% { transform: scale(1.16); } 100% { transform: scale(1); } }
@keyframes orbturn540 { to { transform: rotate(540deg); } }
.orb.mv-pulse .flex { animation: orbpulse 1.9s cubic-bezier(.3,1.5,.4,1); }
@keyframes orbpulse { 0% { transform: scale(1); } 22% { transform: scale(1.34); } 46% { transform: scale(.94); } 70% { transform: scale(1.14); } 100% { transform: scale(1); } }
.orb.mv-swell .flex { animation: orbswell 4.2s cubic-bezier(.4,0,.4,1); }
.orb.mv-swell .rotor2 { animation: orbturn180 4.2s cubic-bezier(.4,0,.4,1); }
@keyframes orbswell { 0% { transform: scale(1); } 50% { transform: scale(1.62); } 100% { transform: scale(1); } }
@keyframes orbturn180 { to { transform: rotate(180deg); } }
.orb.mv-tumble .rotor2 { animation: orbtumble 2.6s cubic-bezier(.5,0,.2,1); }
.orb.mv-tumble .flex { animation: orbdip 2.6s ease-in-out; }
@keyframes orbtumble { to { transform: rotate(-360deg); } }
@keyframes orbdip { 0%, 100% { transform: scale(1); } 50% { transform: scale(.78); } }
.orb.mv-ripple .echo { animation: orbripple 2.4s cubic-bezier(.2,.7,.3,1); }
.orb.mv-ripple .flex { animation: orbpulse 1.9s cubic-bezier(.3,1.5,.4,1); }
@keyframes orbripple { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
.orb.mv-spin .rotor2 { animation: orbturn360 3s cubic-bezier(.45,0,.28,1); }
@keyframes orbturn360 { to { transform: rotate(360deg); } }

/* Active expressions */
.orb .eyes { transform: translate(var(--gx,0px), var(--gy,0px)); transition: transform .4s cubic-bezier(.3,1.4,.5,1); }
.orb .pill-open { opacity: 0.9; transition: opacity .05s linear; }
.orb .pill-shut { opacity: 0; transition: opacity .05s linear; }
.orb .mouth { opacity: 0; transition: opacity .24s; }
.orb .m-smile { opacity: 0.9; }

.orb[data-state="active"][data-mood="happy"] .m-smile { opacity: 0; }
.orb[data-state="active"][data-mood="happy"] .m-wide { opacity: 0.9; }
.orb[data-state="active"][data-mood="happy"] .rotor { animation: orbspin 16s linear infinite; }

.orb[data-state="active"][data-mood="thinking"] .m-smile { opacity: 0; }
.orb[data-state="active"][data-mood="thinking"] .m-flat { opacity: 0.9; }
.orb[data-state="active"][data-mood="thinking"] .face { transform: translateY(-2.14px) scale(1) rotate(-9deg); }
.orb[data-state="active"][data-mood="thinking"] .rotor { animation: orbspin 7s linear infinite; }

.orb[data-state="active"][data-mood="surprised"] .m-smile { opacity: 0; }
.orb[data-state="active"][data-mood="surprised"] .m-o { opacity: 0.9; }
.orb[data-state="active"][data-mood="surprised"] .flex { animation: orbflare 1.1s cubic-bezier(.26,1.5,.38,1); }
@keyframes orbflare { 0% { transform: scale(1); } 28% { transform: scale(1.22); } 100% { transform: scale(1); } }

.orb[data-state="active"][data-mood="sleepy"] .pill-open { opacity: 0; }
.orb[data-state="active"][data-mood="sleepy"] .pill-shut { opacity: 0.9; }
.orb[data-state="active"][data-mood="sleepy"] .m-smile { opacity: 0; }
.orb[data-state="active"][data-mood="sleepy"] .m-tiny { opacity: 0.9; }
.orb[data-state="active"][data-mood="sleepy"] .rotor { animation: orbspin 150s linear infinite; }

.orb[data-state="active"][data-mood="wink"] .eye-r .pill-open { opacity: 0; }
.orb[data-state="active"][data-mood="wink"] .eye-r .pill-shut { opacity: 0.9; }
.orb[data-state="active"][data-mood="wink"] .m-smile { opacity: 0; }
.orb[data-state="active"][data-mood="wink"] .m-wide { opacity: 0.9; }

.orb[data-state="active"].is-blinking .eye .pill-open { opacity: 0; }
.orb[data-state="active"].is-blinking .eye .pill-shut { opacity: 0.9; }

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

/* ---- Individual petal colours: a wave of colour across the arms ---- */
.orb .petal { --pt: var(--accent-2-strong, var(--brand)); }
.orb .petal-1, .orb .petal-4, .orb .petal-7 { --pt: var(--accent-2-strong, var(--brand)); }
.orb .petal-2, .orb .petal-5, .orb .petal-8 { --pt: var(--accent-7-strong, var(--brand)); }
.orb .petal-3, .orb .petal-6 { --pt: var(--accent-3-strong, var(--brand)); }
.orb.mv-shimmer .petal { animation: orbshimmer 2.4s ease; }
.orb.mv-shimmer .petal-2 { animation-delay: .09s; }
.orb.mv-shimmer .petal-3 { animation-delay: .18s; }
.orb.mv-shimmer .petal-4 { animation-delay: .27s; }
.orb.mv-shimmer .petal-5 { animation-delay: .36s; }
.orb.mv-shimmer .petal-6 { animation-delay: .45s; }
.orb.mv-shimmer .petal-7 { animation-delay: .54s; }
.orb.mv-shimmer .petal-8 { animation-delay: .63s; }
@keyframes orbshimmer { 0%, 100% { fill: var(--surface-card); } 45% { fill: var(--pt); } }

/* ---- Extra gestures: shrink, shake ---- */
.orb.mv-shrink .flex { animation: orbshrink 2.4s cubic-bezier(.4, 0, .4, 1); }
@keyframes orbshrink { 0%, 100% { transform: scale(1); } 50% { transform: scale(.72); } }
.orb.mv-shake { animation: orbshakeroot .52s ease; }
@keyframes orbshakeroot {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px) rotate(-2deg); }
  45% { transform: translateX(3px) rotate(2deg); }
  70% { transform: translateX(-2px) rotate(-1deg); }
}

/* ---- Grumpy: a frown, no bounce ---- */
.orb[data-state="active"][data-mood="grumpy"] .m-smile { opacity: 0; }
.orb[data-state="active"][data-mood="grumpy"] .m-frown { opacity: 0.9; }
.orb[data-state="active"][data-mood="grumpy"] .breath { animation: orbbreath 6s ease-in-out infinite; }
.orb[data-state="active"][data-mood="grumpy"] .rotor { animation: none; }

/* Smoother compositing so nothing jitters at small sizes */
.orb .rotor, .orb .rotor2, .orb .breath, .orb .bloom, .orb .flex, .orb .face { will-change: transform; }

/* ---- Orb entrance: petals spin and scale, face springs up, petals settle ---- */
.orb.mv-enter .rotor2 { animation: orbturn360 1.5s cubic-bezier(.3, 0, .2, 1); }
.orb.mv-enter .flex { animation: orbenter 1.5s cubic-bezier(.32, 0, .3, 1); }
@keyframes orbenter { 0% { transform: scale(.55); } 42% { transform: scale(1.22); } 100% { transform: scale(1); } }