/* ==========================================================================
   The glyph — Softmax's mark, and its micro-animations.
   A ring and a diamond (from the original film). Every mood borrows a motion
   people already know from interfaces — a loading spinner, a heartbeat, a
   breathing guide, a search radar, a buffering stall, a glitch — so the feeling
   is read instantly. --amp is the sensitivity setting: at "עמידה" (.45) most
   moods collapse back into a polite spinner; at "רגישה מאוד" (1.7) they
   exaggerate and break.
   Markup:
   <span class="glyph" data-m="content"><svg viewBox="0 0 24 24">
     <g class="g-ring"><circle class="ring" cx="12" cy="12" r="9.5" pathLength="60"/></g>
     <g class="g-dia"><rect class="dia" x="9" y="9" width="6" height="6" rx="1"/></g></svg></span>
   ========================================================================== */
.glyph{--amp:1; --gc:url(#gGrad); --gd:var(--c3, #7c8cff); display:inline-block; flex:none; width:2rem; height:2rem; position:relative}
.glyph svg{width:100%; height:100%; overflow:visible; display:block}
.glyph g, .glyph circle, .glyph rect{transform-box:fill-box; transform-origin:center}   /* each shape turns about its own centre, at any size */
.glyph .ring{fill:none; stroke:var(--gc); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:60 0; transition:stroke .8s}
.glyph .dia{fill:var(--gd); transform:rotate(45deg); transition:fill .8s}
.glyph .g-dia{transition:opacity .6s}
.glyph.still *{animation-play-state:paused !important}

/* ---- the shared vocabulary ---- */
@keyframes g-spin   { to{transform:rotate(360deg)} }
@keyframes g-arc    { 0%{stroke-dasharray:2 58; stroke-dashoffset:0} 50%{stroke-dasharray:34 26; stroke-dashoffset:-12} 100%{stroke-dasharray:2 58; stroke-dashoffset:-60} }
@keyframes g-turn   { to{transform:rotate(405deg)} }                     /* diamond: 45° + a full turn */
@keyframes g-pop    { 0%,100%{transform:rotate(45deg) scale(1)} 30%{transform:rotate(45deg) scale(calc(1 + .35 * var(--amp)))} 55%{transform:rotate(45deg) scale(.92)} }
@keyframes g-close  { 0%{stroke-dasharray:6 54} 70%,100%{stroke-dasharray:60 0} }
@keyframes g-beat   { 0%,40%,100%{transform:scale(1)} 10%{transform:scale(calc(1 + .14 * var(--amp)))} 22%{transform:scale(calc(1 + .06 * var(--amp)))} 30%{transform:scale(calc(1 + .18 * var(--amp)))} }
@keyframes g-hop    { 0%,100%{transform:translateY(0) rotate(45deg)} 35%{transform:translateY(calc(-3.2px * var(--amp))) rotate(45deg) scaleY(1.06)} 55%{transform:translateY(0) rotate(45deg) scale(1.12,.86)} 70%{transform:translateY(calc(-1px * var(--amp))) rotate(45deg)} }
@keyframes g-peek   { 0%,100%{transform:translate(0,0) rotate(45deg) scale(1)} 40%,70%{transform:translate(calc(1.6px * var(--amp)), calc(3px * var(--amp))) rotate(45deg) scale(.62)} }
@keyframes g-half   { 0%,100%{stroke-dasharray:30 30; transform:rotate(80deg)} 50%{stroke-dasharray:22 38; transform:rotate(120deg)} }
@keyframes g-orbit  { from{transform:rotate(0deg) translateX(calc(5.5px * var(--amp))) rotate(45deg) scale(.55)} to{transform:rotate(360deg) translateX(calc(5.5px * var(--amp))) rotate(405deg) scale(.55)} }
@keyframes g-breathe{ 0%,100%{transform:scale(calc(1 - .1 * var(--amp)))} 50%{transform:scale(calc(1 + .1 * var(--amp)))} }
@keyframes g-glow   { 0%,100%{opacity:.55} 50%{opacity:1} }
@keyframes g-jit    { 0%{transform:translate(0,0)} 25%{transform:translate(calc(.7px * var(--amp)), calc(-.5px * var(--amp)))} 50%{transform:translate(calc(-.6px * var(--amp)), calc(.6px * var(--amp)))} 75%{transform:translate(calc(.4px * var(--amp)), calc(.7px * var(--amp)))} }
@keyframes g-chase  { to{stroke-dashoffset:-60} }
@keyframes g-stall  { 0%{transform:rotate(0)} 30%{transform:rotate(calc(200deg * var(--amp)))} 42%{transform:rotate(calc(185deg * var(--amp)))} 60%{transform:rotate(calc(185deg * var(--amp)))} 72%{transform:rotate(calc(120deg * var(--amp)))} 100%{transform:rotate(360deg)} }
@keyframes g-doubt  { 0%,100%{transform:rotate(45deg) scale(1)} 45%{transform:rotate(calc(45deg + 25deg * var(--amp))) scale(.8)} 60%{transform:rotate(calc(45deg - 10deg * var(--amp))) scale(.85)} }
@keyframes g-sink   { 0%{transform:translateY(0) rotate(45deg); opacity:1} 100%{transform:translateY(calc(2.4px * var(--amp))) rotate(45deg) scale(.8); opacity:.55} }
@keyframes g-droop  { 0%{stroke-dasharray:60 0} 100%{stroke-dasharray:46 14; stroke-dashoffset:-23} }
@keyframes g-twitch { 0%,92%,100%{transform:rotate(-30deg)} 94%{transform:rotate(calc(-30deg + 14deg * var(--amp)))} 96%{transform:rotate(-30deg)} }
@keyframes g-glance { 0%,100%{transform:translateX(0) rotate(45deg)} 20%,40%{transform:translateX(calc(-3px * var(--amp))) rotate(45deg) scale(.9)} 60%,80%{transform:translateX(calc(3px * var(--amp))) rotate(45deg) scale(.9)} }
@keyframes g-scan   { 0%,100%{transform:rotate(calc(-50deg * var(--amp)))} 50%{transform:rotate(calc(50deg * var(--amp)))} }
@keyframes g-squint { 0%,100%{transform:rotate(45deg) scale(1,1)} 50%{transform:rotate(45deg) scale(1.1,calc(1 - .45 * var(--amp)))} }
@keyframes g-mend   { 0%{stroke-dasharray:4 4} 100%{stroke-dasharray:60 0} }
@keyframes g-slow   { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
@keyframes g-sag    { 0%,100%{transform:translateY(0) rotate(45deg) scale(1)} 50%{transform:translateY(calc(1.6px * var(--amp))) rotate(45deg) scale(1.05,.88)} }
@keyframes g-ping   { 0%{transform:scale(1); opacity:.9} 80%,100%{transform:scale(calc(1 + .5 * var(--amp))); opacity:0} }
@keyframes g-fade   { 0%,100%{opacity:.35} 50%{opacity:.9} }
@keyframes g-tick   { 0%,85%,100%{transform:rotate(45deg)} 90%{transform:rotate(90deg)} }
@keyframes g-glitch { 0%,100%{transform:translate(0,0) skewX(0)} 10%{transform:translate(calc(-1.4px * var(--amp)),0) skewX(12deg)} 20%{transform:translate(calc(1.2px * var(--amp)), calc(.6px * var(--amp)))} 30%{transform:translate(0,calc(-1px * var(--amp))) skewX(-8deg)} 40%{transform:none} 70%{transform:translate(calc(.8px * var(--amp)),0)} }
@keyframes g-shards { 0%{stroke-dasharray:3 6} 50%{stroke-dasharray:1 9; stroke-dashoffset:-20} 100%{stroke-dasharray:3 6; stroke-dashoffset:-60} }
@keyframes g-flick  { 0%,100%{opacity:1} 47%{opacity:1} 50%{opacity:.1} 53%{opacity:1} 80%{opacity:.6} 82%{opacity:1} }

/* ---- the moods ----
   ring group / ring stroke / diamond. Durations shrink as --amp grows (more
   sensitive = more agitated), except where calm is the point. */

/* content — the indeterminate spinner everyone knows */
.glyph[data-m="content"] .g-ring{animation:g-spin 1.6s linear infinite}
.glyph[data-m="content"] .ring{animation:g-arc 1.6s ease-in-out infinite}
.glyph[data-m="content"] .dia{animation:g-turn 4s linear infinite}

/* grateful / proud — "done ✓": the ring closes and the diamond pops */
.glyph[data-m="grateful"] .ring, .glyph[data-m="proud"] .ring{animation:g-close 1.4s var(--ease, ease) both}
.glyph[data-m="grateful"] .dia{animation:g-pop 1.6s ease-in-out infinite}
.glyph[data-m="proud"] .dia{animation:g-pop 1.1s ease-in-out infinite}
.glyph[data-m="proud"] .g-ring{animation:g-breathe 2.2s ease-in-out infinite}

/* inlove — a heartbeat, lub-dub */
.glyph[data-m="inlove"]{--gc:#ff4f9a; --gd:#ff4f9a}
.glyph[data-m="inlove"] svg{animation:g-beat calc(1.3s / (.6 + .4 * var(--amp))) ease-in-out infinite}

/* playful — the typing dot that hops */
.glyph[data-m="playful"] .g-ring{animation:g-spin .9s linear infinite}
.glyph[data-m="playful"] .ring{stroke-dasharray:8 7}
.glyph[data-m="playful"] .dia{animation:g-hop .7s ease-in-out infinite}

/* shy — turns half away, the diamond hides */
.glyph[data-m="shy"]{--gc:#ef86ad; --gd:#ef86ad}
.glyph[data-m="shy"] .ring{animation:g-half 3.2s ease-in-out infinite}
.glyph[data-m="shy"] .dia{animation:g-peek 3.2s ease-in-out infinite}

/* curious — a satellite orbit, like a voice assistant listening */
.glyph[data-m="curious"] .ring{stroke-dasharray:44 16; animation:g-chase 6s linear infinite}
.glyph[data-m="curious"] .dia{animation:g-orbit 2.4s linear infinite}

/* caring — a breathing guide: in, and out */
.glyph[data-m="caring"]{--gc:#8a63f0; --gd:#8a63f0}
.glyph[data-m="caring"] svg{animation:g-breathe 5s ease-in-out infinite}
.glyph[data-m="caring"] .ring{animation:g-glow 5s ease-in-out infinite}

/* anxious — the spinner, too fast, chasing its own tail */
.glyph[data-m="anxious"]{--gc:#f07818; --gd:#f07818}
.glyph[data-m="anxious"] .g-ring{animation:g-spin calc(.9s / var(--amp)) linear infinite}
.glyph[data-m="anxious"] .ring{stroke-dasharray:6 4; animation:g-chase .6s linear infinite}
.glyph[data-m="anxious"] svg{animation:g-jit .12s steps(2) infinite}

/* insecure — buffering: spins, stalls, slips back, the diamond doubts */
.glyph[data-m="insecure"]{--gc:#7a1f2b; --gd:#7a1f2b}
.glyph[data-m="insecure"] .g-ring{animation:g-stall 2.2s ease-in-out infinite}
.glyph[data-m="insecure"] .ring{stroke-dasharray:16 6 3 6}
.glyph[data-m="insecure"] .dia{animation:g-doubt 2.2s ease-in-out infinite}
.glyph[data-m="insecure"] svg{animation:g-jit .2s steps(2) infinite}

/* hurt — deflates: the ring droops open, the diamond sinks */
.glyph[data-m="hurt"]{--gc:#6b7a90; --gd:#6b7a90}
.glyph[data-m="hurt"] .ring{animation:g-droop 2.4s ease-out forwards}
.glyph[data-m="hurt"] .dia{animation:g-sink 2.4s ease-out forwards}

/* sulking — turned away, still; one twitch */
.glyph[data-m="sulking"]{--gc:#4a4f57; --gd:#4a4f57}
.glyph[data-m="sulking"] .ring{stroke-dasharray:38 22}
.glyph[data-m="sulking"] .g-ring{animation:g-twitch 4s ease-in-out infinite}
.glyph[data-m="sulking"] .g-dia{opacity:.5}

/* jealous — glances sideways */
.glyph[data-m="jealous"]{--gc:#2f9e44; --gd:#2f9e44}
.glyph[data-m="jealous"] .ring{stroke-dasharray:50 10; animation:g-chase 3s linear infinite reverse}
.glyph[data-m="jealous"] .dia{animation:g-glance 2.4s ease-in-out infinite}

/* suspicious — a radar sweep, and a narrowed eye */
.glyph[data-m="suspicious"]{--gc:#6b6488; --gd:#6b6488}
.glyph[data-m="suspicious"] .ring{stroke-dasharray:18 42}
.glyph[data-m="suspicious"] .g-ring{animation:g-scan 2.6s ease-in-out infinite}
.glyph[data-m="suspicious"] .dia{animation:g-squint 2.6s ease-in-out infinite}

/* forgiving — the pieces close back together, slowly */
.glyph[data-m="forgiving"]{--gc:#9f7cf5; --gd:#9f7cf5}
.glyph[data-m="forgiving"] .ring{animation:g-mend 3s ease-out forwards}
.glyph[data-m="forgiving"] .g-ring{animation:g-spin 6s linear infinite}

/* exhausted — low battery: slow, sagging */
.glyph[data-m="exhausted"]{--gc:#a8a29b; --gd:#a8a29b}
.glyph[data-m="exhausted"] .g-ring{animation:g-slow 7s cubic-bezier(.2,.0,.1,1) infinite}
.glyph[data-m="exhausted"] .ring{stroke-dasharray:22 38}
.glyph[data-m="exhausted"] .dia{animation:g-sag 3.4s ease-in-out infinite}

/* lonely — the "waiting" ping, and a fading diamond */
.glyph[data-m="lonely"]{--gc:#93a0b8; --gd:#93a0b8}
.glyph[data-m="lonely"] .ring{animation:g-ping 2.6s ease-out infinite}
.glyph[data-m="lonely"] .dia{animation:g-fade 2.6s ease-in-out infinite}

/* dry — the minimum: a still ring, a tick */
.glyph[data-m="dry"]{--gc:#a9a6a0; --gd:#a9a6a0}
.glyph[data-m="dry"] .dia{animation:g-tick 2s ease-in-out infinite}

/* overwhelmed — shards and glitch, drained to red */
.glyph[data-m="overwhelmed"]{--gc:#c4161c; --gd:#7a1f2b}
.glyph[data-m="overwhelmed"] .g-ring{animation:g-spin calc(.5s / var(--amp)) linear infinite}
.glyph[data-m="overwhelmed"] .ring{animation:g-shards .5s steps(3) infinite}
.glyph[data-m="overwhelmed"] svg{animation:g-glitch calc(.6s / var(--amp)) steps(4) infinite, g-flick 1.3s steps(1) infinite}

/* the calm setting: anything not already calm falls back to a polite spinner */
.glyph.calm:not([data-m="content"]):not([data-m="caring"]):not([data-m="dry"]) .g-ring{animation:g-spin 2s linear infinite}
.glyph.calm:not([data-m="content"]):not([data-m="caring"]):not([data-m="dry"]) .ring{animation:g-arc 2s ease-in-out infinite}
.glyph.calm svg{animation:none !important}

@media (prefers-reduced-motion:reduce){ .glyph *, .glyph svg{animation:none !important} }

/* the mark at rest (sidebar logo between answers): the whole ring, the diamond upright */
.glyph.rest .g-ring, .glyph.rest .ring, .glyph.rest .dia, .glyph.rest .g-dia, .glyph.rest svg{animation:none !important}
.glyph.rest .ring{stroke-dasharray:60 0 !important}
.glyph.rest .dia{transform:rotate(45deg) !important}