/* Animated badge icons (Guided by care cards). Pure CSS, so they also work in carousel copies. */
.llk-badge--green { color: var(--llk-green); } .llk-badge--lilac { color: var(--llk-purple); } .llk-badge--peach { color: var(--llk-yellow); }
.llk-badge svg { overflow: visible; }
.llk-badge svg * { transform-box: fill-box; }

/* child: happy little hop with arms up */
.ai-child { transform-origin: 50% 100%; animation: ai-hop 2.4s cubic-bezier(.3,.6,.3,1) infinite; }
@keyframes ai-hop { 0%, 55%, 100% { transform: translateY(0) scale(1, 1); } 62% { transform: translateY(0) scale(1.08, .9); } 72% { transform: translateY(-5px) scale(.95, 1.06); } 84% { transform: translateY(0) scale(1.06, .94); } 92% { transform: translateY(0) scale(1, 1); } }

/* ball: keeps rolling, with a small bounce */
.ai-ball { transform-origin: 50% 50%; animation: ai-spin 3.2s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.llk-badge:has(.ai-ball) svg { animation: ai-ballbounce 1.6s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes ai-ballbounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* bricks: the wall builds itself brick by brick in its square shape (bottom row first), then clears and builds again */
.ai-brick { transform-origin: 50% 100%; opacity: 0; animation: 5.6s cubic-bezier(.3,.7,.4,1) infinite; }
.ai-b1 { animation-name: ai-br; animation-delay: 0s; }
.ai-b2 { animation-name: ai-br; animation-delay: .22s; }
.ai-b3 { animation-name: ai-br; animation-delay: .44s; }
.ai-b4 { animation-name: ai-br; animation-delay: .76s; }
.ai-b5 { animation-name: ai-br; animation-delay: .98s; }
.ai-b6 { animation-name: ai-br; animation-delay: 1.3s; }
.ai-b7 { animation-name: ai-br; animation-delay: 1.52s; }
.ai-b8 { animation-name: ai-br; animation-delay: 1.74s; }
.ai-brick { animation-fill-mode: both; }
@keyframes ai-br { 0% { opacity: 0; transform: translateY(-14px); } 4% { opacity: 1; } 7% { transform: translateY(0) scale(1.1, .82); } 10% { transform: translateY(-1px) scale(.97, 1.04); } 12%, 64% { opacity: 1; transform: translateY(0) scale(1); } 72%, 100% { opacity: 0; transform: translateY(0) scale(.5); } }

/* team: three teammates with arms linked do a little wave, then cheer together */
.ai-mate { transform-origin: 50% 100%; animation: 3.6s cubic-bezier(.3,.7,.4,1) infinite; }
.ai-m1 { animation-name: ai-mate1; } .ai-m2 { animation-name: ai-mate2; } .ai-m3 { animation-name: ai-mate3; }
@keyframes ai-mate1 { 0%, 100% { transform: translateY(0); } 8% { transform: translateY(-4px); } 16% { transform: translateY(0); } 58% { transform: translateY(0); } 66% { transform: translateY(-5px); } 76% { transform: translateY(0); } }
@keyframes ai-mate2 { 0%, 10%, 100% { transform: translateY(0); } 18% { transform: translateY(-4px); } 26% { transform: translateY(0); } 58% { transform: translateY(0); } 66% { transform: translateY(-5px); } 76% { transform: translateY(0); } }
@keyframes ai-mate3 { 0%, 20%, 100% { transform: translateY(0); } 28% { transform: translateY(-4px); } 36% { transform: translateY(0); } 58% { transform: translateY(0); } 66% { transform: translateY(-5px); } 76% { transform: translateY(0); } }
.ai-arms { animation: ai-arms 3.6s cubic-bezier(.3,.7,.4,1) infinite; }
@keyframes ai-arms { 0%, 56%, 80%, 100% { d: path("M4 20.5Q11 15.5 18 18Q25 15.5 32 20.5"); } 66% { d: path("M4 12Q11 9 18 13Q25 9 32 12"); } }

/* family: grown-up and child holding hands, swinging them while they walk; a little heart pops up */
.ai-adult { transform-origin: 50% 100%; animation: ai-walk 1.4s ease-in-out infinite; }
.ai-kid { transform-origin: 50% 100%; animation: ai-walk 1.4s ease-in-out -.7s infinite; }
@keyframes ai-walk { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-2px) rotate(2deg); } }
.ai-hands { transform-origin: 50% 0; animation: ai-swing 1.4s ease-in-out infinite; }
@keyframes ai-swing { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(8deg) translateY(1.5px); } }
.ai-heart { transform-origin: 50% 100%; animation: ai-heart 2.8s ease-out infinite; }
@keyframes ai-heart { 0%, 40% { opacity: 0; transform: translateY(6px) scale(.2); } 55% { opacity: 1; transform: translateY(-1px) scale(1.25); } 65% { transform: translateY(-2px) scale(1); } 85% { opacity: 1; transform: translateY(-6px) scale(1); } 100% { opacity: 0; transform: translateY(-9px) scale(.8); } }

@media (prefers-reduced-motion: reduce) {
  .ai-child, .ai-ball, .ai-adult, .ai-kid, .ai-hands, .ai-mate, .ai-arms, .llk-badge svg { animation: none !important; }
  .ai-brick { animation: none !important; opacity: 1; }
  .ai-heart { animation: none !important; opacity: 0; }
}