/* Afford-X · ALM agent + shared animation styles (linked by blog pages) */
.alm-mark{display:inline-block;line-height:0}
.alm-mark svg{display:block;overflow:visible}
.alm-orbit{transform-origin:12px 12px;animation:alm-orbit 5.5s linear infinite}
@keyframes alm-orbit{to{transform:rotate(360deg)}}
.alm-core{transform-origin:12px 12px;animation:alm-breathe 3.4s ease-in-out infinite}
@keyframes alm-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.alm-state-thinking .alm-orbit{animation-duration:1.05s}
.alm-state-thinking .alm-core{animation:alm-think 0.9s ease-in-out infinite}
@keyframes alm-think{0%,100%{transform:scale(0.86) rotate(0deg)}50%{transform:scale(1.12) rotate(8deg)}}
.alm-state-listening .alm-core{animation:alm-listen 1.6s ease-in-out infinite}
@keyframes alm-listen{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.alm-state-listening .alm-orbit{animation-duration:3s}
.alm-state-answering .alm-core{animation:alm-answer 1.3s ease-in-out infinite}
@keyframes alm-answer{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.alm-state-answering .alm-orbit{animation-duration:1.8s}
@media (prefers-reduced-motion: reduce){.alm-orbit,.alm-core{animation:none!important}}
.alm-dot{position:relative}
.alm-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid currentColor;opacity:0;animation:alm-ping 1.8s ease-out infinite}
@keyframes alm-ping{0%{transform:scale(0.7);opacity:0.55}80%,100%{transform:scale(1.7);opacity:0}}
.alm-bubble-ring{position:absolute;inset:0;border-radius:50%;animation:alm-bubblepulse 2.6s ease-out infinite}
@keyframes alm-bubblepulse{0%{box-shadow:0 0 0 0 rgba(84,169,102,0.40)}70%,100%{box-shadow:0 0 0 16px rgba(84,169,102,0)}}
.alm-panel{animation:alm-rise 0.34s cubic-bezier(0.16,1,0.3,1)}
@keyframes alm-rise{from{opacity:0;transform:translateY(16px) scale(0.96)}to{opacity:1;transform:none}}
.alm-msg{animation:alm-msg 0.3s cubic-bezier(0.16,1,0.3,1)}
@keyframes alm-msg{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.alm-think-dots span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--afx-green-500);margin:0 2px;animation:alm-bounce 1.2s ease-in-out infinite}
.alm-think-dots span:nth-child(2){animation-delay:0.18s}
.alm-think-dots span:nth-child(3){animation-delay:0.36s}
@keyframes alm-bounce{0%,80%,100%{transform:translateY(0);opacity:0.4}40%{transform:translateY(-5px);opacity:1}}
.alm-chip{cursor:pointer;transition:background 0.15s ease,border-color 0.15s ease,transform 0.12s ease}
.alm-chip:hover{background:var(--afx-green-50);border-color:var(--afx-green-500);transform:translateY(-1px)}
.alm-scroll::-webkit-scrollbar{width:8px}
.alm-scroll::-webkit-scrollbar-thumb{background:var(--afx-gray-200);border-radius:8px}

/* ===== blog ===== */
.blog-card{transition:transform 0.18s var(--ease-out), box-shadow 0.18s ease, border-color 0.18s ease;cursor:pointer}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--afx-green-300)}
.blog-card:hover .blog-title{color:var(--afx-green-700)}
.blog-thumb img{transition:transform 0.4s var(--ease-out)}
.blog-card:hover .blog-thumb img{transform:scale(1.04)}
.cat-chip{transition:background 0.15s ease,color 0.15s ease,border-color 0.15s ease}
.cat-chip[data-on="true"]{background:var(--afx-green-500);color:#fff;border-color:var(--afx-green-500)}
.cat-chip[data-on="false"]:hover{border-color:var(--afx-green-400);color:var(--afx-green-700)}
.prose p{font-family:var(--font-body);font-size:18px;line-height:1.72;color:var(--afx-gray-700);margin:0 0 22px}
.prose h2{font-family:var(--font-display);font-weight:700;font-size:27px;letter-spacing:-0.02em;color:var(--afx-ink);margin:40px 0 14px}
.prose h3{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--afx-ink);margin:28px 0 10px}
.prose a{color:var(--afx-green-700);text-decoration:underline;text-underline-offset:2px}
.prose strong{color:var(--afx-ink)}
.prose ul{margin:0 0 22px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.prose ul li{position:relative;padding-left:30px;font-family:var(--font-body);font-size:18px;line-height:1.6;color:var(--afx-gray-700)}
.prose ul li::before{content:'';position:absolute;left:6px;top:11px;width:8px;height:8px;border-radius:2px;background:var(--afx-green-500);transform:rotate(45deg)}