/* Mella mark: the logo as an inline SVG (ui/studio/art/mark.svg), with two motion states.
   Root <svg class="ma-mk-root">            still logo (default)
        <svg class="ma-mk-root ma-mk-live">  the inner arc lights, then one signal arc leaves the outer arc (7.2 s)
        <svg class="ma-mk-root ma-mk-ready"> slow breath: the inner arc warms and relaxes (7.2 s)
   The M never moves, and the two arcs are always drawn in the logo's own colours, so every frame
   is the real logo. 7.2 s is three beats of the .m-pulse status ripple (2.4 s), so the two stay in step.
   Geometry is measured from ui/assets/mella-icon.png (same 512 framing), so the SVG can replace that
   <img> at the same width and height. The M follows var(--ink); on a tile that stays light in dark
   mode, set --ma-mk-ink on the tile. */

.ma-mk-root{display:block;width:100%;height:auto}
.ma-mk-root path{fill:none;stroke-linecap:round;stroke-linejoin:round}

/* The logo's own colours: outer arc, inner arc, M. */
.ma-mk-out{stroke:#ff7c02}
.ma-mk-in{stroke:#ffc897}
.ma-mk-m{stroke:var(--ma-mk-ink,var(--ink,currentColor))}

/* Copies of the arcs that only appear in motion: an overlay that lights the inner arc, and a
   signal arc that sits under the outer arc (about half its width, so at rest it is fully covered). */
.ma-mk-lit,.ma-mk-echo{stroke:#ff7c02;opacity:0}

/* Animated parts scale from their own box. The arcs are semicircles, so the bottom centre of the
   box is the circle's centre: the signal arc grows outward from the M and its ends stay level. */
.ma-mk-lit,.ma-mk-echo{transform-box:fill-box;transform-origin:50% 100%}

/* Live (7.2 s): the inner arc warms to orange (0-1 s). As it peaks, a signal arc slides out from
   under the outer arc and travels outward, thinning as it goes (0.65-2.9 s), while the inner arc
   relaxes. Then a long rest.
   The signal turns from the outer arc's orange to the inner arc's peach as it travels, so it fades
   in the logo's own palette (peach is the PNG's translucent orange on white) and never passes
   through a see-through brown on a dark surface; only the last thin moment is an opacity fade. */
.ma-mk-live .ma-mk-lit{animation:ma-mk-lit 7.2s ease-in-out infinite}
.ma-mk-live .ma-mk-echo{animation:ma-mk-echo-go 7.2s cubic-bezier(.3,.5,.4,1) infinite,
  ma-mk-echo-tone 7.2s linear infinite}

@keyframes ma-mk-lit{
  0%{opacity:0}
  14%,19%{opacity:.85}
  42%,100%{opacity:0}
}
@keyframes ma-mk-echo-go{
  0%,9%{transform:scale(1);stroke-width:18}
  40%,100%{transform:scale(1.25);stroke-width:8}
}
@keyframes ma-mk-echo-tone{
  0%,9%{opacity:0;stroke:#ff7c02}
  9.5%,12%{opacity:1;stroke:#ff7c02}
  28%{stroke:#ffc897}
  31%{opacity:1}
  38%,100%{opacity:0;stroke:#ffc897}
}

/* Ready (7.2 s): a slow, gentle breath on the inner arc only. */
.ma-mk-ready .ma-mk-lit{animation:ma-mk-warm 7.2s ease-in-out infinite}
@keyframes ma-mk-warm{
  0%,100%{opacity:0}
  50%{opacity:.5}
}

/* Reduced motion: the still logo, complete. */
@media (prefers-reduced-motion:reduce){
  .ma-mk-root path{animation:none!important}
  .ma-mk-root .ma-mk-lit,.ma-mk-root .ma-mk-echo{opacity:0!important}
}