/* 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 little,
   it blinks with real lids, smiles with its eyes, and its brows and mouth carry the feeling. Motion is slow,
   eased and small, like something breathing, never bouncy. */
svg.af .af-pet-g { transform-box: view-box; transform-origin: 60px 112px; transform: rotate(calc(var(--gx, 0) * 2.4deg)) translate(calc(var(--gx, 0) * 1.2px), calc(var(--gy, 0) * .7px)); }
svg.af .af-pet-m { transform-box: view-box; transform-origin: 60px 112px; transition: transform .9s cubic-bezier(.4,0,.2,1); animation: afPetSway 9s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes afPetSway { 0%, 100% { transform: rotate(-.6deg) } 50% { transform: rotate(.6deg) translateY(-.3px) } }
svg.af .af-pet-b { animation: afPetBreath 4.6s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes afPetBreath { 0%, 100% { transform: none } 45% { transform: scale(1.008, 1.016) } }

/* 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(0); 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: weight shifts and head tilts, slow in and slow out */
svg.af[data-state="thinking"] .af-pet-m { animation: none; transform: rotate(-3deg) translateY(-.4px); }
svg.af:is([data-state="listening"], [data-mood="listen"]) .af-pet-m { animation: none; transform: rotate(2.5deg) scale(1.02); }
svg.af[data-state="speaking"] .af-pet-m { animation: afPetSpeak 2.8s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes afPetSpeak { 0%, 100% { transform: none } 30% { transform: rotate(1.2deg) translateY(-.5px) } 65% { transform: rotate(-.8deg) } }
svg.af[data-state="working"] .af-pet-m { animation: afPetFocus 3.2s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes afPetFocus { 0%, 100% { transform: rotate(1deg) translateY(.6px) } 50% { transform: rotate(-.6deg) translateY(.2px) } }
svg.af[data-state="happy"] .af-pet-m { animation: none; transform: translateY(-1.6px) scale(1.015); }
svg.af[data-state="sleepy"] .af-pet-m { animation: afPetDoze 6s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes afPetDoze { 0%, 100% { transform: rotate(2deg) translateY(1px) } 50% { transform: rotate(2.6deg) translateY(1.4px) scale(1, .99) } }
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; }
}