/* Live Dot: colour + motion, exactly as on https://wisecall.ai/ (4 Nov 2026). Needs tokens.css.
   Markup (inline SVG, rings use currentColor):
   <svg class="wc-live" viewBox="0 0 48 48" width="28" height="28" aria-hidden="true">
     <circle class="wc-ring2" cx="24" cy="24" r="21.5" fill="none" stroke="currentColor" stroke-width="2"/>
     <circle class="wc-ring1" cx="24" cy="24" r="15"   fill="none" stroke="currentColor" stroke-width="2.6"/>
     <circle class="wc-dot"   cx="24" cy="24" r="8.5"/></svg>
   States: static (logo, idle) | .is-calling (loops, "call in progress") | .wc-logo:hover (one pulse)
   Tone:   default Fern rings on light | .on-dark Mist rings on Evergreen. Dot is always Saffron. */
.wc-live{color:var(--color-logo-ring,var(--wc-fern))}  /* Fern on light, Mist in dark theme */
.wc-live.on-dark{color:var(--wc-mist)}
.wc-dot{fill:var(--color-logo-dot,var(--wc-saffron))}
.wc-live .wc-dot,.wc-live .wc-ring1,.wc-live .wc-ring2,.wc-ripple{transform-box:fill-box;transform-origin:center}
.wc-live.is-calling .wc-dot{animation:wc-breathe var(--wc-live-cycle) var(--ease-in-out) infinite}
.wc-live.is-calling .wc-ring1{animation:wc-ring1 var(--wc-live-cycle) var(--ease-out) infinite}
.wc-live.is-calling .wc-ring2{animation:wc-ring2 var(--wc-live-cycle) var(--ease-out) infinite}
.wc-logo:hover .wc-live .wc-dot{animation:wc-breathe 1.2s var(--ease-in-out) 1}
.wc-logo:hover .wc-live .wc-ring1{animation:wc-ring1 1.2s var(--ease-out) 1}
.wc-logo:hover .wc-live .wc-ring2{animation:wc-ring2 1.2s var(--ease-out) 1}
@keyframes wc-breathe{0%,to{transform:scale(1)}12%{transform:scale(1.08)}30%{transform:scale(1)}}
@keyframes wc-ring1{0%{opacity:.15;transform:scale(.82)}15%{opacity:.75;transform:scale(1)}70%{opacity:.75;transform:scale(1)}to{opacity:.15;transform:scale(.82)}}
@keyframes wc-ring2{0%,10%{opacity:.08;transform:scale(.86)}25%{opacity:.35;transform:scale(1)}70%{opacity:.35;transform:scale(1)}to{opacity:.08;transform:scale(.86)}}
.wc-ripple{fill:none;stroke:var(--wc-saffron);stroke-width:1.5;opacity:0;animation:wc-ripple var(--wc-live-cycle) var(--ease-out) infinite}
.wc-ripple+.wc-ripple{animation-delay:calc(var(--wc-live-cycle) * .25)}
@keyframes wc-ripple{0%{transform:scale(.6);opacity:.12}to{transform:scale(1.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.wc-live *,.wc-ripple{animation:none!important}}
@media (prefers-reduced-motion:reduce){.wc-ripple{opacity:0}}
.wc-ripple-layer{position:absolute;inset:18% 8% auto auto;width:220px;height:220px;pointer-events:none}
.wc-ripple-layer .wc-ripple{transform-box:fill-box;transform-origin:center}
.live-dot .ring{fill:none;stroke:currentColor;stroke-width:1.35}
.live-dot .core{fill:var(--saffron)}
.live-dot.tone-light{color:var(--evergreen)}
.live-dot.tone-dark{color:var(--mist)}
.live-dot .ring-outer{transform-box:fill-box;transform-origin:center;animation:live-pulse 2.8s ease-in-out infinite}
@keyframes live-pulse{0%,to{opacity:1}50%{opacity:.28}}
.is-paused *,.is-paused{animation-play-state:paused!important}