/* elloo's sparkle, the same in every AI chat (Omar, Oct 30 2026: "any time we use an AI assistant chat. It should look
   and feel the exact same way across the site and profiles"). Used by Work (elloo in Your projects, Ask ohelloo, Get
   help) and clients' own pages (start.html), through js/elloo-mark.js.
   From .st-ico to stFlash is ohelloo.com's "elloo at work" exactly (site/elloo.css): a small glowing four-point sparkle
   that turns and breathes inside a soft halo, specks of light coming off it, beside a short phrase that crossfades; when
   the answer is in, a tick and "Ready", then it fades away. test/elloo-mark.test.mjs keeps the two the same, so change
   it there first and copy it here. */
.st-ico{position:relative;flex:none;width:1.5rem;height:1.5rem;display:grid;place-items:center}
.st-halo{position:absolute;inset:-.5rem;border-radius:50%;background:radial-gradient(circle,rgba(155,108,200,.42),rgba(185,162,245,.18) 45%,transparent 70%);animation:stHalo 1.6s ease-in-out infinite}
.st-spark{position:relative;width:1.3125rem;height:1.3125rem;filter:drop-shadow(0 0 .375rem rgba(155,108,200,.7));animation:stBreathe 2.4s cubic-bezier(.45,0,.55,1) infinite;transition:opacity .3s,transform .4s cubic-bezier(.34,1.56,.64,1),filter .3s}
.st-check{position:absolute;width:1.125rem;height:1.125rem;opacity:0;transform:scale(.5);transition:opacity .3s .15s,transform .4s .15s cubic-bezier(.34,1.56,.64,1)}
.st-check circle{fill:#DDF2E7}
.st-check path{fill:none;stroke:#1F7A4D;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.st-txt{display:grid;font-size:.8438rem;font-weight:500;letter-spacing:-.005em;color:#6E6579}
.st-txt span{grid-area:1 / 1;white-space:nowrap;opacity:0;transform:translateY(3px);filter:blur(2px);transition:opacity .5s,transform .5s,filter .5s}
.st-txt span.on{opacity:1;transform:none;filter:none}
.et-status.ready .st-spark{opacity:0;transform:scale(1.5);filter:drop-shadow(0 0 .5rem rgba(155,108,200,.9)) brightness(1.3)}
.et-status.ready .st-halo{animation:stFlash .6s ease-out forwards}
.et-status.ready .st-check{opacity:1;transform:none}
.et-status.ready .st-txt{color:#1F7A4D;font-weight:600}
@keyframes stHalo{0%,100%{transform:scale(.7);opacity:.55}50%{transform:scale(1.15);opacity:1}}
/* it turns a quarter (a four-point star looks the same every quarter, so the loop is seamless), swelling and softening
   as it goes, while specks of light dissolve off it */
@keyframes stBreathe{0%{transform:scale(.86) rotate(0deg);opacity:.8;filter:drop-shadow(0 0 .25rem rgba(155,108,200,.5)) blur(.4px)}
  50%{transform:scale(1.08) rotate(45deg);opacity:1;filter:drop-shadow(0 0 .5rem rgba(155,108,200,.85)) blur(0)}
  100%{transform:scale(.86) rotate(90deg);opacity:.8;filter:drop-shadow(0 0 .25rem rgba(155,108,200,.5)) blur(.4px)}}
.st-p{position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:#B9A2F5;opacity:0;animation:stSpeck 2.4s ease-out infinite}
.st-p:nth-of-type(1){--dx:.75rem;--dy:-.5rem;animation-delay:.3s;background:#F2C14E}
.st-p:nth-of-type(2){--dx:-.75rem;--dy:-.375rem;animation-delay:.9s}
.st-p:nth-of-type(3){--dx:.5rem;--dy:.75rem;animation-delay:1.5s;background:#9B6CC8}
.st-p:nth-of-type(4){--dx:-.5rem;--dy:.625rem;animation-delay:2s;background:#F2C14E}
@keyframes stSpeck{0%{opacity:0;transform:translate(0,0) scale(1)}15%{opacity:.95}100%{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) scale(.3);filter:blur(1px)}}
.et-status.ready .st-p{animation:none;opacity:0}
@keyframes stFlash{0%{transform:scale(1);opacity:1}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.st-halo,.st-spark,.st-p{animation:none!important}}

/* Inside a chat: the line where the typing dots used to be, just above the box they type in, as on ohelloo.com. */
.et-status.el-live{display:flex;align-items:center;gap:.625rem;height:1.75rem;margin:4px 2px 8px;opacity:1;pointer-events:none;transition:opacity .35s}
.et-status.el-live.gone{opacity:0}
/* Beside a chat's name: the same sparkle, still, in its halo. */
.el-mark{position:relative;flex:none;width:30px;height:30px;display:grid;place-items:center;background:none}
.el-mark .st-halo{inset:-14%;animation:none;opacity:.75;transform:scale(.85)}
.el-mark .st-spark{width:74%;height:74%;animation:none}