/* Agent faces (see v8/faces.js). Every moving part is a CSS transform so it stays smooth and cheap. */
svg.af { width: 100%; height: 100%; display: block; overflow: visible; --gx: 0; --gy: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
svg.af * { transform-box: fill-box; transform-origin: center; }

/* Whole body: gentle breathing float, slight lean toward where it's looking. */
.af-float { animation: afFloat 4.2s cubic-bezier(.45,0,.55,1) infinite; transform-origin: 60px 104px; transform-box: view-box; }
.af-tilt { transform: rotate(calc(var(--gx) * 4deg)); transform-origin: 60px 100px; transform-box: view-box; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.af-shadow { animation: afShadow 4.2s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes afFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-3.5px) } }
@keyframes afShadow { 0%,100% { transform: scaleX(1); opacity: .16 } 50% { transform: scaleX(.86); opacity: .1 } }

/* Eyes and mouth track the pointer. */
.af-gaze { transform: translate(calc(var(--gx) * 7px), calc(var(--gy) * 4.5px)); }
.af-lid, .af-shape { transition: transform .16s cubic-bezier(.3,1.5,.5,1); }
.af-happy, .af-m, .af-lash { transition: opacity .18s ease; }
.af-happy { opacity: 0; }
.af-eye-l .af-shape { transform-origin: center; }

/* Blink and the wake-up moment. */
svg.af.af-blink .af-lid { transform: scaleY(.08); transition-duration: .07s; }
svg.af.af-asleep .af-lid { transform: scaleY(.06); transition: none; }
svg.af.af-waking .af-lid { transition: transform .5s cubic-bezier(.25,1.8,.45,1); }
svg.af.af-asleep .af-shine, svg.af.af-blink .af-shine { opacity: 0; }

/* Hover: perk up. Click: happy hop. */
svg.af:hover .af-shape { transform: scale(1.12); }
svg.af.af-hop .af-float { animation: afHop .62s cubic-bezier(.3,1.4,.5,1); }
@keyframes afHop { 0% { transform: translateY(0) scale(1,1) } 25% { transform: translateY(2px) scale(1.06,.92) } 55% { transform: translateY(-10px) scale(.96,1.05) } 100% { transform: translateY(0) scale(1,1) } }

/* Mouth shapes per state. */
.af-m { opacity: 0; }
svg.af[data-state="idle"] .af-m-idle, svg.af[data-state="listening"] .af-m-idle, svg.af[data-state="sleepy"] .af-m-idle { opacity: 1; }
svg.af[data-state="thinking"] .af-m-think, svg.af[data-state="working"] .af-m-think { opacity: 1; }
svg.af[data-state="speaking"] .af-m-talk { opacity: 1; animation: afTalk .32s ease-in-out infinite alternate; }
svg.af[data-state="happy"] .af-m-happy { opacity: 1; }
@keyframes afTalk { 0% { transform: scale(1.1,.35) } 60% { transform: scale(.9,1.15) } 100% { transform: scale(1,.7) } }

/* Thinking: eyes drift up and aside, head tilts, thought dots bubble. */
.af-dots circle { opacity: 0; }
svg.af[data-state="thinking"] .af-tilt { transform: rotate(-6deg); }
svg.af[data-state="thinking"] .af-shape { transform: scale(.9, .95); }
svg.af[data-state="thinking"] .af-dots circle { animation: afDot 1.3s ease-in-out infinite; }
svg.af[data-state="thinking"] .af-dots circle:nth-child(2) { animation-delay: .18s; }
svg.af[data-state="thinking"] .af-dots circle:nth-child(3) { animation-delay: .36s; }
@keyframes afDot { 0%,100% { opacity: .15; transform: translateY(0) scale(.7) } 45% { opacity: 1; transform: translateY(-4px) scale(1) } }

/* Working: focused squint, quick bob, a scan line sweeps the visor, antenna/bulb flickers. */
.af-scan { opacity: 0; }
svg.af[data-state="working"] .af-shape { transform: scaleY(.62); }
svg.af[data-state="working"] .af-float { animation-duration: 1.1s; }
svg.af[data-state="working"] .af-scan { opacity: 1; animation: afScan 1.4s cubic-bezier(.45,0,.55,1) infinite; }
svg.af[data-state="working"] .af-bulb { animation: afBulb .5s steps(2) infinite; }
@keyframes afScan { from { transform: translateX(0) } to { transform: translateX(124px) } }
@keyframes afBulb { 50% { opacity: .3 } }

/* Listening: wide-eyed, leaning in. Speaking: lively bob. */
svg.af[data-state="listening"] .af-shape { transform: scale(1.14); }
svg.af[data-state="listening"] .af-float { animation: afLean 1.6s ease-in-out infinite; }
@keyframes afLean { 0%,100% { transform: translateY(0) scale(1) } 50% { transform: translateY(-1px) scale(1.025) } }
svg.af[data-state="speaking"] .af-float { animation: afFloat 1.2s ease-in-out infinite; }

/* Happy: ^ ^ eyes, big smile, blush brightens. */
svg.af[data-state="happy"] .af-lid { transform: scaleY(0); }
svg.af[data-state="happy"] .af-happy { opacity: 1; }
svg.af[data-state="happy"] .af-blush { opacity: .9; }
.af-blush { transition: opacity .3s ease; }

/* Sleepy: droopy lids, slow breathing, a floating z. */
.af-z { opacity: 0; }
svg.af[data-state="sleepy"] .af-lid { transform: scaleY(.18) translateY(3px); transition-duration: 1.2s; }
svg.af[data-state="sleepy"] .af-float { animation-duration: 6s; }
svg.af[data-state="sleepy"] .af-z { animation: afZ 3s ease-in-out infinite; }
@keyframes afZ { 0% { opacity: 0; transform: translate(0,4px) scale(.6) } 30% { opacity: .85 } 100% { opacity: 0; transform: translate(8px,-12px) scale(1.1) } }

/* Character details. */
.af-leaf { transform-origin: 0% 100%; animation: afLeaf 3.6s ease-in-out infinite; }
@keyframes afLeaf { 0%,100% { transform: rotate(0) } 50% { transform: rotate(-9deg) } }
.af-star { animation: afStar 6s linear infinite; }
@keyframes afStar { 0% { transform: rotate(0) scale(1) } 50% { transform: rotate(180deg) scale(1.12) } 100% { transform: rotate(360deg) scale(1) } }
.af-orbit { transform-origin: 60px 66px; transform-box: view-box; animation: afSpin 14s linear infinite; }
@keyframes afSpin { to { transform: rotate(360deg) } }
.af-bulb { animation: afPulse 2.4s ease-in-out infinite; }
@keyframes afPulse { 0%,100% { opacity: .75 } 50% { opacity: 1; transform: scale(1.15) } }
.af-heart { animation: afBeat 2.2s ease-in-out infinite; }
@keyframes afBeat { 0%,60%,100% { transform: scale(1) } 70% { transform: scale(1.18) } 80% { transform: scale(.96) } }
svg.af[data-state="working"] .af-orbit { animation-duration: 3s; }
.af-bars rect { transform-box: fill-box; transform-origin: 50% 100%; animation: afBar 2.8s ease-in-out infinite; }
.af-bars rect:nth-child(2) { animation-delay: .25s; }
.af-bars rect:nth-child(3) { animation-delay: .5s; }
@keyframes afBar { 0%,100% { transform: scaleY(1) } 50% { transform: scaleY(.7) } }
svg.af[data-state="working"] .af-bars rect, svg.af[data-state="thinking"] .af-bars rect { animation-duration: .9s; }

/* Hosts: drop a face into the existing orb and tile containers. */
.af-orb { width: 148px; height: 148px; position: relative; display: flex; align-items: center; justify-content: center; }
.af-orb::before { content: ''; position: absolute; inset: 6% 6% 0; border-radius: 50%; background: radial-gradient(circle, var(--af-halo, rgba(99,102,241,.28)) 0%, transparent 68%); filter: blur(6px); animation: afHalo 4.2s ease-in-out infinite; pointer-events: none; }
@keyframes afHalo { 0%,100% { transform: scale(.92); opacity: .75 } 50% { transform: scale(1.04); opacity: 1 } }
.af-orb svg.af { position: relative; }
.af-orb.sm { width: 104px; height: 104px; }
.ad-face-bg svg.af, .vm-agent-face svg.af { width: 88%; height: 88%; }
#voiceOrb.af-voice { background: none !important; box-shadow: none !important; }
#voiceOrb.af-voice svg.af { width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  svg.af *, .af-orb::before { animation: none !important; }
  .af-gaze, .af-tilt { transition: none; }
}
svg.af[data-state="happy"] .af-lash, svg.af[data-state="sleepy"] .af-lash, svg.af.af-blink .af-lash, svg.af.af-asleep .af-lash { opacity: 0; }

/* ---------- Agent showcase (homepage sections, agent pages, meet page) ---------- */
.ags-stage{position:relative;aspect-ratio:1;width:min(100%,440px);margin:0 auto;perspective:900px;--ag-dot:#f0abfc;--ag-aura:#c084fc}
.ags-stage.sm{width:min(100%,260px)}
.ags-aura{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--ag-aura) 60%,transparent) 0%,color-mix(in srgb,var(--ag-aura) 22%,transparent) 45%,transparent 70%);filter:blur(10px);animation:agsAura 5s ease-in-out infinite}
@keyframes agsAura{50%{transform:scale(1.08);opacity:.85}}
.ags-ring{position:absolute;inset:6% 0 0;transform-style:preserve-3d;transform:rotateX(74deg);pointer-events:none}
.ags-ring>div{position:absolute;inset:0;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--ag-dot) 40%,transparent);box-shadow:0 0 24px color-mix(in srgb,var(--ag-dot) 35%,transparent);animation:agsSpin 22s linear infinite}
.ags-ring i{position:absolute;left:calc(50% + 50% * cos(var(--a)));top:calc(50% + 50% * sin(var(--a)));width:10px;height:10px;margin:-5px;border-radius:50%;background:var(--ag-dot);box-shadow:0 0 12px var(--ag-dot)}
.ags-stage.sm .ags-ring i{width:7px;height:7px;margin:-3.5px}
.ags-ring.front{clip-path:inset(50% -20% -20% -20%);z-index:2}
@keyframes agsSpin{to{transform:rotate(360deg)}}
.ags-stage.busy .ags-ring>div{animation-duration:5s}
.ags-bot{position:absolute;inset:9% 10% 8%;z-index:1;filter:drop-shadow(0 30px 40px color-mix(in srgb,var(--ag-aura) 40%,rgba(0,0,0,.35)))}
.ags-status{position:absolute;left:50%;bottom:-2%;transform:translateX(-50%);z-index:3;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:9px 16px;border-radius:999px;font:500 13px Inter,system-ui,sans-serif;color:#fff;background:rgba(16,12,30,.62);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 30px rgba(0,0,0,.25)}
.ags-stage.sm .ags-status{font-size:12px;padding:7px 13px}
.ags-status b{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 10px #4ade80;transition:background .3s,box-shadow .3s}
.ags-stage.busy .ags-status b{background:var(--ag-dot);box-shadow:0 0 10px var(--ag-dot);animation:agsBlip 1s ease-in-out infinite}
.ags-status span{display:inline-block;transition:opacity .25s,transform .25s}
.ags-status span.swap{opacity:0;transform:translateY(4px)}
@keyframes agsBlip{50%{opacity:.35}}

/* Section shell. Themes set the colour variables; everything else is shared. */
section.ags{--bg:#0a0614;--fg:#f5f3ff;--fg2:rgba(245,243,255,.76);--fg3:rgba(245,243,255,.5);--b1:#6d28d9;--b2:#a21caf;--b3:#4338ca;--g1:#f5d0fe;--g2:#c084fc;--g3:#818cf8;--btn1:#a855f7;--btn2:#7c3aed;--chip:#d8b4fe;--card:rgba(255,255,255,.045);--card-b:rgba(255,255,255,.09);--ic:#e9d5ff;--glow:192,132,252;
  display:block!important;position:relative;overflow:hidden;isolation:isolate;margin:24px -1rem;padding:clamp(40px,7vw,88px) clamp(20px,5vw,64px)!important;border-radius:28px;border-top:none!important;background:var(--bg)!important;color:var(--fg)}
section.ags.ags-daniel{--bg:#040816;--b1:#1d4ed8;--b2:#0e7490;--b3:#4f46e5;--g1:#cffafe;--g2:#67e8f9;--g3:#818cf8;--btn1:#3b82f6;--btn2:#4f46e5;--chip:#a5f3fc;--ic:#cffafe;--glow:56,189,248}
section.ags.ags-anna{--bg:#fff4f8;--fg:#2b0f1f;--fg2:rgba(43,15,31,.72);--fg3:rgba(43,15,31,.5);--b1:#fbcfe8;--b2:#e9d5ff;--b3:#fecdd3;--g1:#db2777;--g2:#c026d3;--g3:#9333ea;--btn1:#ec4899;--btn2:#a855f7;--chip:#be185d;--card:rgba(255,255,255,.72);--card-b:rgba(219,39,119,.14);--ic:#be185d;--glow:236,72,153}
section.ags.ags-apple{--bg:#fff7f2;--fg:#2a0d06;--fg2:rgba(42,13,6,.72);--fg3:rgba(42,13,6,.5);--b1:#fed7aa;--b2:#fecaca;--b3:#bbf7d0;--g1:#e8272a;--g2:#f97316;--g3:#e8272a;--btn1:#fb7185;--btn2:#e8272a;--chip:#c2410c;--card:rgba(255,255,255,.75);--card-b:rgba(232,39,42,.13);--ic:#c2410c;--glow:249,115,22}
@media (prefers-color-scheme:dark){
  section.ags.ags-anna{--bg:#13060e;--fg:#fdf2f8;--fg2:rgba(253,242,248,.76);--fg3:rgba(253,242,248,.5);--b1:#9d174d;--b2:#6b21a8;--b3:#be185d;--g1:#fbcfe8;--g2:#f472b6;--g3:#c084fc;--chip:#f9a8d4;--card:rgba(255,255,255,.045);--card-b:rgba(255,255,255,.09);--ic:#fbcfe8}
  section.ags.ags-apple{--bg:#140805;--fg:#fff7ed;--fg2:rgba(255,247,237,.76);--fg3:rgba(255,247,237,.5);--b1:#9a3412;--b2:#991b1b;--b3:#065f46;--g1:#fed7aa;--g2:#fb923c;--g3:#f87171;--chip:#fdba74;--card:rgba(255,255,255,.045);--card-b:rgba(255,255,255,.09);--ic:#fed7aa}
}
.ags-sky{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.ags-sky i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:agsDrift 18s ease-in-out infinite alternate}
.ags-sky i:nth-child(1){width:520px;height:520px;left:-140px;top:-180px;background:var(--b1)}
.ags-sky i:nth-child(2){width:460px;height:460px;right:-120px;top:10%;background:var(--b2);opacity:.4;animation-duration:22s}
.ags-sky i:nth-child(3){width:520px;height:420px;left:30%;bottom:-260px;background:var(--b3);opacity:.42;animation-duration:26s}
.ags-sky::after{content:'';position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--fg) 60%,transparent) 1px,transparent 1.4px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 70% 40%,#000 0%,transparent 60%);-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 0%,transparent 60%);opacity:.14}
@keyframes agsDrift{to{transform:translate(60px,40px) scale(1.12)}}
.ags-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,56px);align-items:center}
.ags.flip .ags-hero{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.ags.flip .ags-hero>.ags-stage{order:-1}
.ags-kicker{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--chip);padding:8px 12px;border-radius:999px;background:rgba(var(--glow),.12);border:1px solid rgba(var(--glow),.24)}
.ags-kicker b{width:6px;height:6px;border-radius:50%;background:rgb(var(--glow));box-shadow:0 0 10px rgb(var(--glow));animation:agsBlip 2s ease-in-out infinite}
section.ags h2{overflow-wrap:normal;word-break:normal;margin:20px 0 16px;font:700 clamp(2.1rem,4.6vw,3.4rem)/1.04 Inter,system-ui,sans-serif;letter-spacing:-.035em;color:var(--fg)}
section.ags h2 span{display:block;margin-top:10px;font-size:.5em;line-height:1.15;letter-spacing:-.02em;background:linear-gradient(100deg,var(--g1) 0%,var(--g2) 45%,var(--g3) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ags-lead{font:400 clamp(1.05rem,1.6vw,1.2rem)/1.55 Inter,system-ui,sans-serif;color:var(--fg2);max-width:34em;margin:0 0 20px}
.ags-quote{font:600 1rem/1.5 Inter,system-ui,sans-serif;color:var(--fg);margin:0 0 26px;padding-left:14px;border-left:3px solid rgb(var(--glow))}
.ags-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:8px}
.ags-cta a{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;font:600 15px Inter,system-ui,sans-serif;white-space:nowrap;text-decoration:none;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s}
.ags-cta .go{background:linear-gradient(135deg,var(--btn1),var(--btn2));color:#fff;box-shadow:0 8px 30px rgba(var(--glow),.42),inset 0 1px 0 rgba(255,255,255,.25)}
.ags-cta .go:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(var(--glow),.58),inset 0 1px 0 rgba(255,255,255,.25)}
.ags-cta .ghost{color:var(--fg);background:color-mix(in srgb,var(--fg) 6%,transparent);border:1px solid color-mix(in srgb,var(--fg) 18%,transparent)}
.ags-cta .ghost:hover{background:color-mix(in srgb,var(--fg) 11%,transparent);transform:translateY(-2px)}
.ags-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(40px,6vw,72px)}
section.ags .ags-grid>div{position:relative;padding:24px 22px;border-radius:20px;background:var(--card)!important;border:1px solid var(--card-b)!important;color:var(--fg);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s;overflow:hidden;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
section.ags .ags-grid>div::before{content:'';position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(var(--glow),.16),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
section.ags .ags-grid>div:hover{transform:translateY(-4px);border-color:rgba(var(--glow),.35)!important}
section.ags .ags-grid>div:hover::before{opacity:1}
.ags-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;background:rgba(var(--glow),.16);border:1px solid rgba(var(--glow),.28);color:var(--ic)}
.ags-ic svg{width:20px;height:20px}
section.ags .ags-grid h3{margin:0 0 8px;font:600 17px/1.3 Inter,system-ui,sans-serif;letter-spacing:-.01em;color:var(--fg)}
section.ags .ags-grid p{margin:0;font:400 14.5px/1.6 Inter,system-ui,sans-serif;color:var(--fg2)}
.ags-foot{margin:28px 0 0;font:400 13px/1.6 Inter,system-ui,sans-serif;color:var(--fg3)}
.ags-foot code{color:var(--fg);background:color-mix(in srgb,var(--fg) 8%,transparent);padding:2px 6px;border-radius:6px;font-size:12px}
/* Team strip */
.ags-team{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:12px;margin-top:28px}
.ags-team a{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 10px 14px;border-radius:20px;text-decoration:none;color:var(--fg);background:var(--card);border:1px solid var(--card-b);transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s}
.ags-team a:hover{transform:translateY(-4px);border-color:rgba(var(--glow),.35)}
.ags-team .tf{width:76px;height:76px}
.ags-team b{font:600 14px Inter,system-ui,sans-serif}
.ags-team span{font:400 12px/1.3 Inter,system-ui,sans-serif;color:var(--fg3);text-align:center}
@media(max-width:860px){.ags-hero,.ags.flip .ags-hero{grid-template-columns:1fr}.ags-hero>.ags-stage{width:min(100%,340px);order:-1}.ags-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){section.ags{margin:16px 0;border-radius:22px}.ags-grid{grid-template-columns:1fr}.ags-cta a{flex:1 1 auto;justify-content:center;padding:0 16px}}
@media(prefers-reduced-motion:reduce){.ags-stage *,.ags-sky i{animation:none!important}}
/* Beat page-level section rules (for example #anna{background:…!important}) that target these ids. */
#anna.ags,#wonder.ags,#apple.ags,#daniel.ags,#team.ags{background:var(--bg)!important;border:none!important}
section.ags.ags-neutral{--bg:var(--panel,#fbfaf7);--fg:var(--text,#141414);--fg2:var(--text2,#4a4a48);--fg3:var(--text3,#8a8984);--b1:#c7d2fe;--b2:#fbcfe8;--b3:#bbf7d0;--g1:#4f46e5;--g2:#a855f7;--g3:#ec4899;--chip:var(--accent,#3b3bd6);--card:color-mix(in srgb,var(--text,#141414) 3%,transparent);--card-b:var(--line,#dddad2);--glow:124,58,237}
@media (prefers-color-scheme:dark){section.ags.ags-neutral{--b1:#3730a3;--b2:#831843;--b3:#065f46;--g1:#a5b4fc;--g2:#d8b4fe;--g3:#f9a8d4;--chip:#c4b5fd;--card:rgba(255,255,255,.04);--card-b:rgba(255,255,255,.09)}}

/* ---------- Activities (AgentFace.act): the face transforms to show what it's doing ----------
   .af-pose moves the character aside to make room; props live in .ax-back / .ax-front.        */
svg.af .af-pose { transform-box: view-box; transform-origin: 60px 60px; transition: transform .7s cubic-bezier(.3,1.35,.45,1); }
svg.af[data-pose="front"] .af-pose { transform: translateY(-10px) scale(.8); }
svg.af[data-pose="side"] .af-pose { transform: translate(-17px, 3px) scale(.74); }
svg.af[data-act]:not([data-act=""]) .af-dots { display: none; }
svg.af[data-act]:not([data-act=""]) .af-scan { display: none; }
svg.af[data-pose] .af-shape { transform: scale(1, .86); }
.ax-back, .ax-front { transition: opacity .3s ease; }
.ax-back.ax-out, .ax-front.ax-out { opacity: 0; }
svg.af .ax-back > g, svg.af .ax-front > g { transform-box: view-box; transform-origin: 60px 96px; animation: axIn .6s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes axIn { from { opacity: 0; transform: translateY(8px) scale(.82); } }
/* The transformation beat: a quick spin-squash, like it's changing outfits. */
svg.af.af-morph .af-float { animation: afMorph .62s cubic-bezier(.3,1.3,.5,1); }
@keyframes afMorph { 0% { transform: scale(1) } 28% { transform: scale(.2, 1.12) } 58% { transform: scale(1.1, .93) } 100% { transform: scale(1) } }
svg.af .ax-poof rect { transform-box: fill-box; animation: axPoof .7s cubic-bezier(.2,.8,.3,1) both; }
@keyframes axPoof { 0% { opacity: 0; transform: translate(0,0) scale(.3) rotate(0) } 25% { opacity: 1 } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(90deg) } }
svg.af .ax-hand { transform-box: fill-box; }

/* coding */
.ax-spill { animation: axFlicker 2.2s ease-in-out infinite; }
@keyframes axFlicker { 0%,100% { opacity: .75 } 40% { opacity: 1 } 55% { opacity: .65 } 70% { opacity: .95 } }
.ax-tap { animation: axTap .32s ease-in-out infinite alternate; }
.ax-tap2 { animation-delay: .16s; }
@keyframes axTap { from { transform: translateY(0) } to { transform: translateY(-3px) } }
.ax-p { opacity: 0; animation: axRise 1.6s cubic-bezier(.3,.7,.4,1) infinite; }
@keyframes axRise { 0% { opacity: 0; transform: translate(0,0) scale(.6) } 18% { opacity: 1 } 100% { opacity: 0; transform: translate(var(--dx), -30px) scale(1) } }
.ax-logo { animation: axLogo 2.4s ease-in-out infinite; }
@keyframes axLogo { 0%,100% { opacity: .82 } 50% { opacity: 1; filter: drop-shadow(0 0 2px rgba(255,255,255,.8)) } }

/* testing: three rows pass in turn, then the panel glows green */
.ax-ck, .ax-pass, .ax-allgreen { opacity: 0; }
.ax-pass { transform-box: fill-box; transform-origin: left center; }
.ax-ck.ax-r0 { animation: axCk0 3.6s cubic-bezier(.3,1.6,.5,1) infinite; } .ax-pass.ax-r0 { animation: axPass0 3.6s ease-out infinite; } .ax-wait.ax-r0 { animation: axWait0 3.6s linear infinite; }
.ax-ck.ax-r1 { animation: axCk1 3.6s cubic-bezier(.3,1.6,.5,1) infinite; } .ax-pass.ax-r1 { animation: axPass1 3.6s ease-out infinite; } .ax-wait.ax-r1 { animation: axWait1 3.6s linear infinite; }
.ax-ck.ax-r2 { animation: axCk2 3.6s cubic-bezier(.3,1.6,.5,1) infinite; } .ax-pass.ax-r2 { animation: axPass2 3.6s ease-out infinite; } .ax-wait.ax-r2 { animation: axWait2 3.6s linear infinite; }
@keyframes axCk0 { 0%,14% { opacity: 0; transform: scale(.3) } 20%,90% { opacity: 1; transform: scale(1) } 100% { opacity: 0 } }
@keyframes axCk1 { 0%,36% { opacity: 0; transform: scale(.3) } 42%,90% { opacity: 1; transform: scale(1) } 100% { opacity: 0 } }
@keyframes axCk2 { 0%,58% { opacity: 0; transform: scale(.3) } 64%,90% { opacity: 1; transform: scale(1) } 100% { opacity: 0 } }
@keyframes axPass0 { 0%,4% { opacity: .9; transform: scaleX(0) } 18%,90% { opacity: .9; transform: scaleX(1) } 100% { opacity: 0; transform: scaleX(1) } }
@keyframes axPass1 { 0%,22% { opacity: .9; transform: scaleX(0) } 40%,90% { opacity: .9; transform: scaleX(1) } 100% { opacity: 0; transform: scaleX(1) } }
@keyframes axPass2 { 0%,44% { opacity: .9; transform: scaleX(0) } 62%,90% { opacity: .9; transform: scaleX(1) } 100% { opacity: 0; transform: scaleX(1) } }
.ax-wait { transform-box: fill-box; opacity: 0; }
@keyframes axWait0 { 0% { opacity: 1; transform: rotate(0) } 17% { opacity: 1; transform: rotate(360deg) } 18%,100% { opacity: 0 } }
@keyframes axWait1 { 0%,19% { opacity: 0 } 20% { opacity: 1; transform: rotate(0) } 39% { opacity: 1; transform: rotate(360deg) } 40%,100% { opacity: 0 } }
@keyframes axWait2 { 0%,41% { opacity: 0 } 42% { opacity: 1; transform: rotate(0) } 61% { opacity: 1; transform: rotate(360deg) } 62%,100% { opacity: 0 } }
.ax-allgreen { animation: axAll 3.6s ease-in-out infinite; }
@keyframes axAll { 0%,66% { opacity: 0 } 72% { opacity: 1 } 82% { opacity: .5 } 90% { opacity: 1 } 100% { opacity: 0 } }

/* scanning: lens hunts left to right, finds the bug, the bug turns into a shield */
.ax-radar circle { transform-box: fill-box; opacity: 0; animation: axRadar 3s ease-out infinite; }
.ax-radar circle:nth-child(2) { animation-delay: 1s; } .ax-radar circle:nth-child(3) { animation-delay: 2s; }
@keyframes axRadar { 0% { opacity: .55; transform: scale(.35) } 100% { opacity: 0; transform: scale(1.05) } }
.ax-lens { animation: axLens 4s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes axLens { 0% { transform: translate(0,0) } 16% { transform: translate(12px,-7px) } 32% { transform: translate(26px,-2px) } 50%,64% { transform: translate(42px,4px) } 68% { transform: translate(42px,4px) scale(1) } 72% { transform: translate(43px,3px) } 85% { transform: translate(42px,4px) } 100% { transform: translate(0,0) } }
.ax-bug, .ax-shield { transform-box: fill-box; opacity: 0; }
.ax-bug { animation: axBug 4s ease-in-out infinite; }
@keyframes axBug { 0%,34% { opacity: 0; transform: scale(.4) } 42%,62% { opacity: 1; transform: scale(1) } 52% { transform: scale(1.08) rotate(6deg) } 57% { transform: rotate(-6deg) } 68%,100% { opacity: 0; transform: scale(.2) } }
.ax-shield { animation: axShield 4s cubic-bezier(.3,1.6,.5,1) infinite; }
@keyframes axShield { 0%,64% { opacity: 0; transform: scale(.3) } 72%,92% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(.9) } }

/* charting: bars rise, the trend line draws itself, the peak pings */
.ax-bar { transform-box: fill-box; transform-origin: center bottom; animation: axBar 3.6s cubic-bezier(.3,1.5,.5,1) infinite; }
@keyframes axBar { 0% { transform: scaleY(0) } 20%,88% { transform: scaleY(1) } 100% { transform: scaleY(0) } }
.ax-line { stroke-dasharray: 1; animation: axDraw 3.6s ease-in-out infinite; }
@keyframes axDraw { 0%,26% { stroke-dashoffset: 1 } 60%,88% { stroke-dashoffset: 0; opacity: 1 } 100% { stroke-dashoffset: 0; opacity: 0 } }
.ax-peak { transform-box: fill-box; animation: axPeak 3.6s cubic-bezier(.3,1.8,.5,1) infinite; }
@keyframes axPeak { 0%,58% { opacity: 0; transform: scale(0) } 66%,88% { opacity: 1; transform: scale(1) } 100% { opacity: 0 } }
.ax-ping { transform-box: fill-box; animation: axPing 1.2s ease-out infinite; }
@keyframes axPing { from { opacity: .9; transform: scale(1) } to { opacity: 0; transform: scale(3) } }
.ax-point { animation: axPoint 1.8s ease-in-out infinite; }
@keyframes axPoint { 0%,100% { transform: translate(0,0) } 50% { transform: translate(2.5px,-3px) } }
.ax-panel { transform-box: fill-box; animation: axHover 4s ease-in-out infinite; }
@keyframes axHover { 50% { transform: translateY(-2px) } }

/* piping: messy records in, clean blocks out */
.ax-dirty { animation: axDirty 2.4s linear infinite; }
@keyframes axDirty { 0% { transform: translateX(-4px) rotate(0) } 48% { transform: translateX(56px) rotate(40deg); opacity: 1 } 50%,100% { transform: translateX(60px); opacity: 0 } }
.ax-clean { opacity: 0; animation: axClean 2.4s linear infinite; }
@keyframes axClean { 0%,49% { opacity: 0; transform: translateX(62px) scale(.4) } 54% { opacity: 1; transform: translateX(66px) scale(1.15) } 100% { opacity: 1; transform: translateX(124px) scale(1) } }
.ax-filter { transform-box: fill-box; animation: axFilter .6s ease-in-out infinite alternate; }
@keyframes axFilter { to { transform: scale(1.12, 1.04); filter: drop-shadow(0 0 3px rgba(255,255,255,.7)) } }

/* writing: three lines fill in as the pen moves, then a small signature heart */
.ax-ink { stroke-dashoffset: 1; }
.ax-ink.ax-w0 { animation: axInk0 3.6s linear infinite; } .ax-ink.ax-w1 { animation: axInk1 3.6s linear infinite; } .ax-ink.ax-w2 { animation: axInk2 3.6s linear infinite; }
@keyframes axInk0 { 0% { stroke-dashoffset: 1 } 26%,92% { stroke-dashoffset: 0; opacity: 1 } 100% { stroke-dashoffset: 0; opacity: 0 } }
@keyframes axInk1 { 0%,30% { stroke-dashoffset: 1 } 56%,92% { stroke-dashoffset: 0; opacity: 1 } 100% { stroke-dashoffset: 0; opacity: 0 } }
@keyframes axInk2 { 0%,60% { stroke-dashoffset: 1 } 78%,92% { stroke-dashoffset: 0; opacity: 1 } 100% { stroke-dashoffset: 0; opacity: 0 } }
.ax-pen { animation: axPen 3.6s linear infinite; }
@keyframes axPen { 0% { transform: translate(0,0) } 26% { transform: translate(40px,0) } 30% { transform: translate(0,8px) } 56% { transform: translate(40px,8px) } 60% { transform: translate(0,16px) } 78% { transform: translate(26px,16px) } 84%,92% { transform: translate(40px,14px) } 100% { transform: translate(0,0) } }
.ax-sig { transform-box: fill-box; opacity: 0; animation: axSig 3.6s cubic-bezier(.3,1.8,.5,1) infinite; }
@keyframes axSig { 0%,82% { opacity: 0; transform: scale(0) } 88%,94% { opacity: 1; transform: scale(1.15) } 100% { opacity: 0; transform: scale(1) } }

/* ideating: bubbles float up, ideas connect, then click into the Cognitive mark */
.ax-trail { transform-box: fill-box; animation: axTrail 1.8s ease-in-out infinite; }
.ax-t2 { animation-delay: .3s; }
@keyframes axTrail { 0%,100% { opacity: .5; transform: scale(.8) } 50% { opacity: 1; transform: scale(1.1) } }
.ax-cloud { transform-box: fill-box; animation: axHover 3.6s ease-in-out infinite; }
.ax-node { transform-box: fill-box; animation: axNode 4s cubic-bezier(.3,1.6,.5,1) infinite; }
@keyframes axNode { 0% { opacity: 0; transform: scale(0) } 14%,52% { opacity: 1; transform: scale(1) } 62%,100% { opacity: 0; transform: scale(.4) } }
.ax-link { stroke-dasharray: 1; animation: axLink 4s ease-in-out infinite; }
@keyframes axLink { 0%,16% { stroke-dashoffset: 1; opacity: .9 } 48% { stroke-dashoffset: 0; opacity: .9 } 60%,100% { stroke-dashoffset: 0; opacity: 0 } }
.ax-idea > g { transform-box: fill-box; opacity: 0; animation: axIdea 4s cubic-bezier(.3,1.7,.5,1) infinite; }
@keyframes axIdea { 0%,56% { opacity: 0; transform: scale(.2) rotate(-40deg) } 66%,90% { opacity: 1; transform: scale(1) rotate(0); filter: drop-shadow(0 0 3px currentColor) } 100% { opacity: 0; transform: scale(1.1) } }

/* trading: the tape scrolls, the price tag ticks */
.ax-tape { animation: axTape 4.2s linear infinite; }
@keyframes axTape { to { transform: translateX(-42px) } }
.ax-tag { animation: axTag 1.4s ease-in-out infinite; }
@keyframes axTag { 0%,100% { transform: translateY(0) } 30% { transform: translateY(-3px) } 60% { transform: translateY(2px) } }

/* ledger: keys light, coins stack, books balance */
.ax-key { opacity: 0; animation: axKey 1.8s steps(1) infinite; }
@keyframes axKey { 0% { opacity: .95 } 12%,100% { opacity: 0 } }
.ax-digits rect { animation: axDigit .6s steps(2) infinite; }
@keyframes axDigit { 50% { opacity: .35 } }
.ax-coin { opacity: 0; }
.ax-c0 { animation: axCoin0 3.6s cubic-bezier(.3,1.4,.5,1) infinite; } .ax-c1 { animation: axCoin1 3.6s cubic-bezier(.3,1.4,.5,1) infinite; } .ax-c2 { animation: axCoin2 3.6s cubic-bezier(.3,1.4,.5,1) infinite; }
@keyframes axCoin0 { 0% { opacity: 0; transform: translateY(-24px) } 12%,90% { opacity: 1; transform: translateY(0) } 100% { opacity: 0 } }
@keyframes axCoin1 { 0%,22% { opacity: 0; transform: translateY(-24px) } 34%,90% { opacity: 1; transform: translateY(0) } 100% { opacity: 0 } }
@keyframes axCoin2 { 0%,44% { opacity: 0; transform: translateY(-24px) } 56%,90% { opacity: 1; transform: translateY(0) } 100% { opacity: 0 } }
.ax-ok { transform-box: fill-box; opacity: 0; animation: axShield 3.6s cubic-bezier(.3,1.6,.5,1) infinite; }

/* delegating: mini-bots hop in turn and pass a packet down the line */
.ax-mini { animation: axMini 1.8s cubic-bezier(.3,1.4,.5,1) infinite; }
@keyframes axMini { 0%,40%,100% { transform: translateY(0) } 15% { transform: translateY(-6px) } }
.ax-mini-eye { transform-box: fill-box; animation: axMiniBlink 3s infinite; }
@keyframes axMiniBlink { 0%,46%,50%,100% { transform: scaleY(1) } 48% { transform: scaleY(.1) } }
.ax-packet { animation: axPacket 1.8s ease-in-out infinite; }
@keyframes axPacket { 0% { transform: translate(30px,92px) } 25% { transform: translate(45px,80px) } 50% { transform: translate(60px,92px) } 75% { transform: translate(75px,80px) } 100% { transform: translate(90px,92px); opacity: .2 } }

/* celebrating: confetti in brand squares */
.ax-confetti rect { transform-box: fill-box; opacity: 0; animation: axConfetti 1.9s cubic-bezier(.15,.7,.35,1) infinite; }
@keyframes axConfetti { 0% { opacity: 0; transform: translate(0,0) scale(.4) rotate(0) } 12% { opacity: 1 } 70% { opacity: 1 } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 26px)) scale(1) rotate(var(--r)) } }
svg.af[data-act="celebrating"] .af-float { animation: afCheer .95s cubic-bezier(.3,1.4,.5,1) infinite; }
@keyframes afCheer { 0%,100% { transform: translateY(0) scale(1) } 20% { transform: translateY(2px) scale(1.05,.94) } 50% { transform: translateY(-7px) scale(.97,1.04) } }

@media (prefers-reduced-motion: reduce) {
  svg.af .af-pose { transition: none; }
  .ax-ck, .ax-pass, .ax-ink, .ax-bar, .ax-line, .ax-peak, .ax-node, .ax-idea > g, .ax-coin, .ax-ok, .ax-shield, .ax-sig, .ax-clean { opacity: 1 !important; stroke-dashoffset: 0 !important; transform: none !important; }
  .ax-bug, .ax-p, .ax-poof, .ax-confetti, .ax-wait, .ax-allgreen { display: none; }
}
/* Eyes travel further during an activity so you can tell where it's looking. */
svg.af[data-pose] .af-gaze { transform: translate(calc(var(--gx) * 9px), calc(var(--gy) * 7px)); }

/* ---------- Voice: the mouth follows real speech (--mo = how open, --mw = how wide) ---------- */
svg.af[data-talk] .af-m { opacity: 0; }
svg.af[data-talk] .af-m-talk { opacity: 1; animation: none; transform: scale(calc(.75 + var(--mw, .5) * .8), calc(.25 + var(--mo, 0) * 2.1)); transition: none; }
svg.af[data-talk] .af-gaze { transform: translate(calc(var(--gx) * 7px), calc(var(--gy) * 4.5px - var(--mo, 0) * 1.2px)); }
svg.af[data-talk] .af-shape { transform: scale(1, calc(1 - var(--mo, 0) * .1)); }
svg.af[data-talk] .af-brows { opacity: calc(var(--mo, 0) * .9 - .25); transform: translateY(calc(var(--mo, 0) * -1.6px)); }

/* ---------- Feelings (AgentFace.feel) ---------- */
.af-brows { opacity: 0; transition: opacity .25s ease, transform .35s cubic-bezier(.3,1.4,.5,1); }
.af-brow { transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
svg.af[data-mood] .af-brows { opacity: .9; }
svg.af[data-mood] .af-dots, svg.af[data-mood] .af-z { display: none; }
/* warm, smiling eyes and a big smile */
svg.af:is([data-mood="welcome"],[data-mood="grateful"],[data-mood="proud"],[data-mood="excited"]) .af-lid { transform: scaleY(0); }
svg.af:is([data-mood="welcome"],[data-mood="grateful"],[data-mood="proud"],[data-mood="excited"]) .af-happy { opacity: 1; }
svg.af:is([data-mood="welcome"],[data-mood="grateful"],[data-mood="proud"],[data-mood="excited"]):not([data-talk]) .af-m { opacity: 0; }
svg.af:is([data-mood="welcome"],[data-mood="grateful"],[data-mood="proud"],[data-mood="excited"]):not([data-talk]) .af-m-happy { opacity: 1; }
svg.af:is([data-mood="welcome"],[data-mood="grateful"],[data-mood="seen"]) .af-blush { opacity: .95; }
svg.af:is([data-mood="welcome"],[data-mood="grateful"]) .af-brows { transform: translateY(-2.2px); }
svg.af[data-mood="welcome"] .af-tilt { transform: rotate(-7deg); }
svg.af[data-mood="grateful"] .af-tilt { transform: rotate(6deg); }
/* seen: eyes open a little wider, brows lift, it leans toward you */
svg.af[data-mood="seen"] .af-shape { transform: scale(1.14); }
svg.af[data-mood="seen"] .af-brows { transform: translateY(-2.6px); }
svg.af[data-mood="seen"] .af-tilt { transform: rotate(-4deg) scale(1.03); }
svg.af[data-mood="seen"]:not([data-talk]) .af-m { opacity: 0; }
svg.af[data-mood="seen"]:not([data-talk]) .af-m-idle { opacity: 1; transform: scale(1.25, 1.3); }
/* nod: a quick "got it" */
svg.af[data-mood="nod"] .af-tilt { animation: amNod .55s ease-in-out 2; }
@keyframes amNod { 50% { transform: translateY(3px) rotate(2deg); } }
svg.af[data-mood="nod"] .af-brows { transform: translateY(-1.6px); }
/* proud and excited: a little puff and bounce */
svg.af[data-mood="proud"] .af-float { animation: amPuff 1.1s cubic-bezier(.3,1.4,.5,1) 1 both; }
@keyframes amPuff { 40% { transform: scale(1.07) translateY(-3px); } 100% { transform: scale(1.03); } }
svg.af[data-mood="excited"] .af-float { animation: afCheer .5s cubic-bezier(.3,1.4,.5,1) infinite; }
svg.af[data-mood="excited"] .af-brows { transform: translateY(-3px); }
/* empathy: soft, concerned brows, eyes lowered a touch, a slow reassuring nod */
svg.af[data-mood="empathy"] .af-brow-l { transform: translateY(-1.5px) rotate(-24deg); }
svg.af[data-mood="empathy"] .af-brow-r { transform: translateY(-1.5px) rotate(24deg); }
svg.af[data-mood="empathy"] .af-shape { transform: scale(.94, .8); }
svg.af[data-mood="empathy"] .af-tilt { transform: rotate(5deg); animation: amNod 1.6s ease-in-out infinite; }
svg.af[data-mood="empathy"]:not([data-talk]) .af-m { opacity: 0; }
svg.af[data-mood="empathy"]:not([data-talk]) .af-m-idle { opacity: 1; transform: scale(.75, .7); }
/* curious: one brow up, head tilted, a small "oh" */
svg.af[data-mood="curious"] .af-brow-r { transform: translateY(-3.4px) rotate(-8deg); }
svg.af[data-mood="curious"] .af-brow-l { transform: translateY(.6px); }
svg.af[data-mood="curious"] .af-eye-r .af-shape { transform: scale(1.18); }
svg.af[data-mood="curious"] .af-eye-l .af-shape { transform: scale(.92); }
svg.af[data-mood="curious"] .af-tilt { transform: rotate(9deg); }
svg.af[data-mood="curious"]:not([data-talk]) .af-m { opacity: 0; }
svg.af[data-mood="curious"]:not([data-talk]) .af-m-talk { opacity: 1; animation: none; transform: scale(.55, .8); }
/* the little extras: a waving hand, hearts, sparkles, an attention ring */
.am-fx > g { animation: axIn .5s cubic-bezier(.3,1.5,.5,1) both; transform-box: view-box; transform-origin: 60px 60px; }
.am-wave { transform-box: view-box !important; transform-origin: 101px 86px !important; animation: amWave .5s ease-in-out 4 alternate !important; }
@keyframes amWave { from { transform: rotate(-18deg); } to { transform: rotate(16deg); } }
.am-heart { animation: amHeart 2.2s ease-out both; }
.am-h2 { animation-delay: .35s; }
@keyframes amHeart { 0% { opacity: 0; transform: translateY(6px) scale(.4); } 18% { opacity: 1; transform: translateY(0) scale(1.15); } 30% { transform: scale(1); } 100% { opacity: 0; transform: translateY(-22px) scale(.95); } }
.am-spark { transform-box: fill-box; opacity: 0; animation: amSpark 1.1s ease-in-out 2 both; }
@keyframes amSpark { 0%,100% { opacity: 0; transform: scale(.2) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.am-ring { transform-box: fill-box; animation: amRing 1.4s ease-out both; }
@keyframes amRing { from { opacity: .7; transform: scale(.7); } to { opacity: 0; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .am-fx * { animation: none !important; } }

/* Faces as avatars: sidebar agents and the specialists grid */
.side .nav-item > .nav-face { display: grid; place-items: center; width: 22px; height: 22px; margin: -3px -1px -3px -3px; flex-shrink: 0; }
.side .nav-item > .nav-face svg.af { width: 24px !important; height: 24px !important; stroke: none !important; overflow: visible; }
.cg-spec-face { display: block; width: 64px; height: 64px; margin: -6px 0 4px -8px; }
.cg-spec-face svg.af { width: 64px; height: 64px; overflow: visible; }
.msg .av.av-face { background: none; border: 0; box-shadow: none; overflow: visible; }
.msg .av.av-face svg.af { width: 130%; height: 130%; margin: -15%; }

/* ---------- paws: little mittens for waving, bowing, listening and cheering ----------
   Shown only on faces big enough to read them; activities draw their own hands instead. */
svg.af .af-paws { display: none; }
svg.af.af-roomy .af-paws { display: inline; }
svg.af[data-act]:not([data-act=""]) .af-paws { display: none; }
svg.af .af-pawi { transform-box: fill-box; transform-origin: 50% 70%; transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
svg.af .af-thumb { opacity: 0; transition: opacity .2s; }
svg.af .af-paw-l .af-pawi { animation: afPawL 4.2s ease-in-out infinite; }
svg.af .af-paw-r .af-pawi { animation: afPawR 4.2s ease-in-out infinite; }
@keyframes afPawL { 0%,100% { translate: 0 0; rotate: 0deg } 50% { translate: 0 -1.5px; rotate: -6deg } }
@keyframes afPawR { 0%,100% { translate: 0 0; rotate: 0deg } 50% { translate: 0 -1.5px; rotate: 6deg } }
/* States: a paw to the chin while thinking, by the ear while listening, gentle gestures while speaking. */
svg.af[data-state="thinking"] .af-paw-r .af-pawi { transform: translate(-25px, -6px) rotate(-18deg); }
svg.af[data-state="listening"] .af-paw-r .af-pawi { transform: translate(5px, -32px) rotate(-14deg); }
svg.af[data-state="speaking"] .af-paw-l .af-pawi { animation: afTalkPaw 1.6s ease-in-out infinite; }
svg.af[data-state="speaking"] .af-paw-r .af-pawi { animation: afTalkPaw 1.6s ease-in-out .8s infinite; }
@keyframes afTalkPaw { 0%,100% { translate: 0 0 } 40% { translate: 0 -7px; rotate: 8deg } }
svg.af[data-state="sleepy"] .af-pawi { animation-duration: 6s; }
/* Feelings. */
svg.af[data-mood="welcome"] .af-paw-r { opacity: 0; }
svg.af[data-mood="welcome"] .af-paw-l .af-pawi { transform: translate(0, -3px) rotate(-10deg); }
svg.af[data-mood="respect"] .af-tilt { animation: amBow 2.4s cubic-bezier(.45,0,.3,1) both; }
@keyframes amBow { 0% { transform: none } 30%,62% { transform: translateY(6px) scale(1.02, .9) } 100% { transform: none } }
svg.af[data-mood="respect"] .af-paw-r .af-pawi { transform: translate(-30px, -2px) rotate(-24deg); }
svg.af:is([data-mood="respect"],[data-mood="encourage"]) .af-lid { transform: scaleY(0); }
svg.af:is([data-mood="respect"],[data-mood="encourage"]) .af-happy { opacity: 1; }
svg.af:is([data-mood="respect"],[data-mood="encourage"]):not([data-talk]) .af-m { opacity: 0; }
svg.af:is([data-mood="respect"],[data-mood="encourage"]):not([data-talk]) .af-m-happy { opacity: 1; }
svg.af[data-mood="respect"] .af-blush { opacity: .95; }
svg.af[data-mood="listen"] .af-tilt { transform: rotate(-7deg); }
svg.af[data-mood="listen"] .af-shape { transform: scale(1.08); }
svg.af[data-mood="listen"] .af-brows { transform: translateY(-2px); }
svg.af[data-mood="listen"] .af-paw-r .af-pawi { transform: translate(5px, -32px) rotate(-14deg); }
svg.af[data-mood="encourage"] .af-paw-r .af-pawi { transform: translate(5px, -26px) rotate(-8deg); animation: amThumb .5s ease-in-out 3 alternate; }
svg.af[data-mood="encourage"] .af-paw-r .af-thumb { opacity: 1; }
svg.af[data-mood="encourage"] .af-tilt { transform: rotate(-4deg); }
@keyframes amThumb { to { translate: 0 -3px } }
svg.af:is([data-mood="empathy"],[data-mood="grateful"]) .af-paw-l .af-pawi { transform: translate(24px, -4px) rotate(20deg); }
svg.af:is([data-mood="empathy"],[data-mood="grateful"]) .af-paw-r .af-pawi { transform: translate(-24px, -4px) rotate(-20deg); }
svg.af[data-mood="grateful"] .af-tilt { animation: amBow 2.4s cubic-bezier(.45,0,.3,1) both; }
svg.af:is([data-mood="proud"],[data-mood="excited"]) .af-paw-l .af-pawi { transform: translate(-5px, -30px) rotate(-22deg); }
svg.af:is([data-mood="proud"],[data-mood="excited"]) .af-paw-r .af-pawi { transform: translate(5px, -30px) rotate(22deg); }
svg.af[data-mood="nod"] .af-pawi { transform: translateY(-3px); }
svg.af[data-mood="seen"] .af-paw-r .af-pawi { transform: translate(2px, -12px) rotate(-10deg); }

/* ---------- two forms: robot <-> plush pet ----------
   The robot squashes away, a soft ring and a few sparkles bloom, and the pet springs up on the same spot. */
svg.af .af-pose { transition: transform .7s cubic-bezier(.3,1.35,.45,1), opacity .3s ease; }
svg.af[data-form="pet"] .af-pose { transform: scale(.25, 1.15) !important; opacity: 0; transition: transform .38s cubic-bezier(.6,0,.8,.4), opacity .3s ease .08s; }
/* Pets work too: the props stay, and the pet steps aside for them the same way the robot does. */
svg.af .af-pet-p { transform-box: view-box; transform-origin: 60px 60px; transition: transform .7s cubic-bezier(.3,1.35,.45,1); }
svg.af[data-pose="front"] .af-pet-p { transform: translateY(-10px) scale(.8); }
svg.af[data-pose="side"] .af-pet-p { transform: translate(-17px, 3px) scale(.74); }
svg.af .af-pet { transform-box: view-box; transform-origin: 60px 112px; opacity: 0; transform: scale(.3, 1.2); transition: transform .32s cubic-bezier(.6,0,.8,.4), opacity .22s ease; pointer-events: none; }
svg.af[data-form="pet"] .af-pet { opacity: 1; transform: none; transition: transform .6s cubic-bezier(.22,1,.36,1) .16s, opacity .25s ease .16s; }
svg.af .af-pet-b { transform-box: view-box; transform-origin: 60px 112px; }
.af-xfx .af-burst { transform-box: view-box; transform-origin: 60px 66px; animation: afBurst .8s ease-out both; }
@keyframes afBurst { 0% { opacity: .9; transform: scale(.35) } 100% { opacity: 0; transform: scale(1.35) } }
.af-xfx .am-spark { transform-box: fill-box; opacity: 0; animation: amSpark .9s ease-in-out 1 both; }
/* Transformation styles (data-fx), taken in turn by AgentFace.transform. Each one only changes how the
   outgoing form leaves and the incoming one arrives; the squash above is the default. */
svg.af[data-fx="spin"] .af-pet { transform: scale(0, 1); transform-origin: 60px 66px; }
svg.af[data-fx="spin"][data-form="pet"] .af-pose { transform: scale(0, 1) !important; transition: transform .26s cubic-bezier(.6,0,.9,.5), opacity .2s ease .1s; }
svg.af[data-fx="spin"][data-form="pet"] .af-pet { transform: none; transition: transform .42s cubic-bezier(.22,1,.36,1) .24s, opacity .1s ease .24s; }
svg.af[data-fx="swirl"] .af-pet { transform: rotate(200deg) scale(0); transform-origin: 60px 66px; }
svg.af[data-fx="swirl"][data-form="pet"] .af-pose { transform: rotate(-200deg) scale(0) !important; transition: transform .45s cubic-bezier(.6,0,.8,.4), opacity .3s ease .15s; }
svg.af[data-fx="swirl"][data-form="pet"] .af-pet { transform: none; transition: transform .7s cubic-bezier(.22,1,.36,1) .3s, opacity .2s ease .3s; }
svg.af[data-fx="pop"] .af-pet { transform: scale(0); transform-origin: 60px 66px; }
svg.af[data-fx="pop"][data-form="pet"] .af-pose { transform: scale(0) !important; transition: transform .3s cubic-bezier(.6,0,.9,.4), opacity .15s ease .2s; }
svg.af[data-fx="pop"][data-form="pet"] .af-pet { transform: none; transition: transform .55s cubic-bezier(.22,1.15,.36,1) .5s, opacity .1s ease .55s; }
svg.af[data-fx="beam"] .af-pet { transform: scale(1, 0); transform-origin: 60px 10px; }
svg.af[data-fx="beam"][data-form="pet"] .af-pose { transform: scale(1, 0) !important; transition: transform .55s linear, opacity .2s ease .4s; }
svg.af[data-fx="beam"][data-form="pet"] .af-pet { transform: none; transition: transform .7s cubic-bezier(.45,0,.55,1) .05s, opacity .1s ease .05s; }
svg.af[data-fx="beam"]:not([data-form="pet"]) .af-pose { transition: transform .7s cubic-bezier(.45,0,.55,1) .05s, opacity .1s ease .05s; }
svg.af[data-fx="beam"]:not([data-form="pet"]) .af-pet { transform: scale(1, 0); transform-origin: 60px 112px; transition: transform .55s linear, opacity .2s ease .4s; }
.af-xfx .af-beam { transform-box: view-box; animation: afBeam .7s linear both; }
@keyframes afBeam { 0% { transform: translateY(8px); opacity: 0 } 10% { opacity: 1 } 90% { opacity: 1 } 100% { transform: translateY(114px); opacity: 0 } }
.af-xfx .af-orb-pop { transform-box: view-box; transform-origin: 60px 66px; animation: afOrbPop .9s ease-in-out both; }
@keyframes afOrbPop { 0% { transform: scale(0); opacity: 0 } 25% { transform: scale(1); opacity: 1 } 45% { transform: scale(.8) } 60% { transform: scale(1.15); opacity: 1 } 75% { transform: scale(1.6); opacity: 0 } 100% { opacity: 0 } }

/* The pet is alive, with a face rigged like a person's: it holds your gaze, its whole head follows a beat
   after its eyes, it blinks with real lids, smiles with its eyes, and its brows and mouth carry the feeling.
   The life engine in faces.js drives the layers with springs (no looping keyframes): --hx/--hy is the head,
   --lr/--ly the body's lean and drop, --bsx/--bsy the breath, and --lid how far the lids follow a downward look.
   Everything is a couple of pixels or degrees and stays in place: never bouncy, never roaming. */
svg.af .af-pet-g { transform-box: view-box; transform-origin: 60px 112px; transform: rotate(calc(var(--hx, 0) * 2.4deg + var(--lr, 0) * 1deg)) translate(calc(var(--hx, 0) * 1.2px), calc(var(--hy, 0) * .7px + var(--ly, 0) * 1px)); }
svg.af .af-pet-m { transform-box: view-box; transform-origin: 60px 112px; transition: transform .9s cubic-bezier(.4,0,.2,1); }
svg.af .af-pet-b { transform: scale(var(--bsx, 1), var(--bsy, 1)); }
/* the face turns a little further than the body, so the head reads as round, not a flat sticker */
svg.af .pe-face { transform: translate(calc(var(--hx, 0) * .55px), calc(var(--hy, 0) * .35px)); }

/* eyes */
svg.af .pe-look { transform: translate(calc(var(--gx, 0) * var(--r) * .42px), calc(var(--gy, 0) * var(--r) * .32px)); }
svg.af .pe-glint { transform: translate(calc(var(--gx, 0) * var(--r) * .12px), calc(var(--gy, 0) * var(--r) * .08px)); }
svg.af .pe-ul { transform: translateY(calc(var(--lid, 0) * var(--r) * 1px)); transition: transform .32s cubic-bezier(.4,0,.2,1); }
svg.af .pe-ll { transform: translateY(0); transition: transform .5s cubic-bezier(.4,0,.2,1); }
svg.af.af-blink .pe-ul { transform: translateY(calc(var(--r) * 1.95px)); transition-duration: .07s; }
svg.af .pe-shut { opacity: 0; transition: opacity .2s ease; }
svg.af[data-state="sleepy"] .pe-ul { transform: translateY(calc(var(--r) * 1.55px)); transition-duration: 1.4s; }
svg.af:is([data-state="working"], [data-state="thinking"]) .pe-ul { transform: translateY(calc(var(--r) * .4px)); }
svg.af:is([data-state="listening"], [data-mood="curious"], [data-mood="seen"], [data-mood="listen"]) .pe-ul { transform: translateY(calc(var(--r) * -.25px)); }
/* a real smile reaches the eyes: the cheeks lift the lower lids */
svg.af:is([data-state="happy"], [data-mood="welcome"], [data-mood="grateful"], [data-mood="proud"], [data-mood="excited"], [data-mood="encourage"], [data-mood="seen"]) .pe-ll { transform: translateY(calc(var(--r) * -.8px)); }
svg.af:is([data-state="happy"], [data-mood="proud"], [data-mood="excited"]) .pe-ul { transform: translateY(calc(var(--r) * .3px)); }
/* a bow closes the eyes for a moment, gently */
svg.af[data-mood="respect"] .pe-ul { animation: pePeace 2.4s cubic-bezier(.4,0,.2,1) both; }
svg.af[data-mood="respect"] .pe-shut { animation: peShut 2.4s cubic-bezier(.4,0,.2,1) both; }
@keyframes pePeace { 0%, 100% { transform: none } 25%, 70% { transform: translateY(calc(var(--r) * 1.95px)) } }
@keyframes peShut { 0%, 18%, 78%, 100% { opacity: 0 } 28%, 68% { opacity: .85 } }
svg.af[data-state="sleepy"] .pe-shut { opacity: .7; transition-delay: 1s; }

/* brows: the most human signal. A quick lift says hello, inner corners up say I'm with you. */
svg.af .pe-brow { transform-box: fill-box; transform-origin: center; transition: transform .5s cubic-bezier(.4,0,.2,1); }
svg.af:is([data-mood="welcome"], [data-mood="seen"]) .pe-brow { animation: peFlash 1.1s cubic-bezier(.4,0,.2,1) .15s both; }
@keyframes peFlash { 0%, 100% { transform: none } 22%, 55% { transform: translateY(calc(var(--r) * -.85px)) } }
svg.af:is([data-state="listening"], [data-mood="listen"], [data-mood="excited"], [data-mood="proud"]) .pe-brow { transform: translateY(calc(var(--r) * -.45px)); }
svg.af[data-mood="curious"] .pe-l .pe-brow, svg.af[data-state="thinking"] .pe-r .pe-brow { transform: translateY(calc(var(--r) * -.6px)) rotate(-6deg); }
svg.af[data-state="working"] .pe-l .pe-brow { transform: translateY(calc(var(--r) * .3px)) rotate(7deg); }
svg.af[data-state="working"] .pe-r .pe-brow { transform: translateY(calc(var(--r) * .3px)) rotate(-7deg); }
svg.af:is([data-mood="empathy"], [data-mood="grateful"]) .pe-l .pe-brow { transform: translateY(calc(var(--r) * -.2px)) rotate(-13deg); }
svg.af:is([data-mood="empathy"], [data-mood="grateful"]) .pe-r .pe-brow { transform: translateY(calc(var(--r) * -.2px)) rotate(13deg); }
svg.af[data-state="sleepy"] .pe-brow { transform: translateY(calc(var(--r) * .25px)); }

/* mouth: the plush's own stitched smile, until there is something to say */
svg.af .pe-mouth > * { opacity: 0; transition: opacity .22s ease; }
svg.af .pm-talk, svg.af .pm-open, svg.af .pm-o { transform-box: fill-box; transform-origin: center top; }
svg.af:is([data-state="speaking"], [data-talk], [data-state="happy"], [data-mood="welcome"], [data-mood="proud"], [data-mood="excited"], [data-mood="encourage"], [data-mood="curious"], [data-mood="empathy"]) .pm-cover { opacity: 1; }
svg.af[data-state="speaking"] .pm-talk { opacity: 1; animation: pmSay 1.9s ease-in-out infinite; }
@keyframes pmSay { 0%, 100% { transform: scale(.8, .25) } 12% { transform: scale(1, .8) } 24% { transform: scale(.85, .4) } 38% { transform: scale(1.05, .95) } 52% { transform: scale(.8, .3) } 66% { transform: scale(.95, .7) } 80% { transform: scale(.85, .35) } }
svg.af[data-talk] .pm-talk { opacity: 1; animation: none; transform: scale(calc(.7 + var(--mw, .5) * .5), calc(.2 + var(--mo, 0) * 1.1)); }
svg.af:is([data-state="happy"], [data-mood="welcome"], [data-mood="proud"], [data-mood="excited"], [data-mood="encourage"]):not([data-talk]):not([data-state="speaking"]) .pm-open { opacity: 1; }
svg.af[data-mood="curious"] .pm-o { opacity: 1; }
svg.af[data-mood="empathy"] .pm-soft { opacity: 1; }

/* the robot's cartoon extras (waving paw, sparkles) stay with the robot; the pet says it with its face */
svg.af[data-form="pet"] .am-fx { opacity: 0; }

/* body: each state's posture, breathing pace and rhythm (lean in to listen, look up to think, small focused
   nods while working, a head that rides the words while speaking) come from POSE and BREATH in faces.js.
   The one-off gestures below (hello, bow, nod, lift) play on their own layer on top of that. */
svg.af[data-mood="welcome"] .af-pet-m { animation: afPetGreet 2.4s cubic-bezier(.4,0,.2,1) both; }
@keyframes afPetGreet { 0%, 100% { transform: none } 20%, 60% { transform: rotate(-3.5deg) translateY(-1px) } }
svg.af:is([data-mood="respect"], [data-mood="grateful"]) .af-pet-m { animation: afPetBow 2.4s cubic-bezier(.4,0,.2,1) both; }
@keyframes afPetBow { 0%, 100% { transform: none } 28%, 68% { transform: translateY(2.4px) scale(1.01, .94) } }
svg.af:is([data-mood="encourage"], [data-mood="nod"]) .af-pet-m { animation: afPetNod 1.3s cubic-bezier(.4,0,.2,1) 1 both; }
@keyframes afPetNod { 0%, 100% { transform: none } 25% { transform: translateY(1.2px) scale(1, .975) } 50% { transform: none } 72% { transform: translateY(.8px) scale(1, .985) } }
svg.af:is([data-mood="excited"], [data-mood="proud"]) .af-pet-m { animation: afPetLift 2s cubic-bezier(.4,0,.2,1) both; }
@keyframes afPetLift { 0%, 100% { transform: none } 30%, 70% { transform: translateY(-2.2px) scale(1.02) } }
svg.af[data-mood="empathy"] .af-pet-m { animation: none; transform: rotate(3.5deg) translateY(.6px); transition-duration: 1.2s; }
svg.af[data-mood="curious"] .af-pet-m { animation: none; transform: rotate(-5deg); }
svg.af[data-mood="seen"] .af-pet-m { animation: afPetGreet 1.6s cubic-bezier(.4,0,.2,1) both; }

@media (prefers-reduced-motion: reduce) {
  svg.af .af-pawi, svg.af .af-pet-b, svg.af .af-pet-m, svg.af .pe-ul, svg.af .pe-brow, svg.af .pm-talk, svg.af[data-mood] .af-tilt { animation: none !important; }
  svg.af .af-pose, svg.af .af-pet, svg.af[data-fx] .af-pose, svg.af[data-fx] .af-pet, svg.af[data-fx][data-form] .af-pose, svg.af[data-fx][data-form] .af-pet { transition: opacity .3s ease !important; transform: none !important; }
}

/* Rigged pets (big ones, see the plush rig in faces.js) bend through a mesh, so the flat layer transforms
   and gesture keyframes step aside: the rig does the head, paws, breath, lean and every gesture itself. */
svg.af[data-rig] .af-pet-g, svg.af[data-rig] .af-pet-m, svg.af[data-rig] .af-pet-b, svg.af[data-rig] .pe-face { transform: none !important; animation: none !important; }
svg.af .af-rig { overflow: visible; pointer-events: none; }
/* Pets playing full-body clips: the clip carries the whole pet, face included, so the drawn layers hide. */
svg.af[data-clip] .af-pet-b > image, svg.af[data-clip] .af-rig:not(.af-clip), svg.af[data-clip] .pe-face { visibility: hidden; }
svg.af[data-clip] .af-pet-g, svg.af[data-clip] .af-pet-m, svg.af[data-clip] .af-pet-b { transform: none !important; animation: none !important; }