/* Animated icon motion. Each icon has an intro (when .play is added) and some keep a
   gentle idle loop with long rests so a page never feels busy. */
.ai { overflow: visible; color: var(--text, #2E2238); width: 1.2em; height: 1.2em; flex: none; }
.ai * { transform-box: fill-box; transform-origin: center; }
.band-dark .ai, .btn-primary .ai, .tab[aria-selected="true"] .ai { color: #fff; }
.btn-light .ai, .btn-ghost .ai, .band-dark .card .ai { color: var(--aub, #2E2238); }

/* search: lens scans, glint flickers */
.ai-search.play .s-body { animation: s-scan 5.2s var(--ease) infinite; transform-origin: 10.5px 10.5px; transform-box: view-box; }
.ai-search.play .s-glint { animation: s-glint 5.2s ease-in-out infinite; }
@keyframes s-scan { 0%,55%,100% { transform: translate(0,0) rotate(0); } 15% { transform: translate(-1.6px,-1px) rotate(-8deg); } 30% { transform: translate(1.4px,-1.6px) rotate(6deg); } 45% { transform: translate(0,0) rotate(0); } }
@keyframes s-glint { 0%,10%,40%,100% { opacity: 1; } 20%,30% { opacity: .2; } }

/* faq: bubble pops, question mark bounces */
.ai-faq .q-bub { transform-origin: 20% 90%; }
.ai-faq.play .q-bub { animation: q-pop .55s var(--ease) both; }
.ai-faq.play .q-mark { animation: q-bounce 4.8s var(--ease) .5s infinite; }
@keyframes q-pop { from { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } to { transform: scale(1); } }
@keyframes q-bounce { 0%,30%,100% { transform: translateY(0); } 8% { transform: translateY(-2.2px); } 16% { transform: translateY(0); } 22% { transform: translateY(-.8px); } }

/* check & shield tick: draw */
.ai-check .c-ring { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ai-check .c-tick, .ai-shield .c-tick { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ai-check.play .c-ring { animation: draw .6s var(--ease) forwards; }
.ai-check.play .c-tick { animation: draw .45s var(--ease) .45s forwards; }
.ai-shield.play .c-tick { animation: draw .5s var(--ease) .2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* dots: line connects, dots pulse in sequence */
.ai-dots .d-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ai-dots.play .d-line { animation: draw .8s var(--ease) forwards; }
.ai-dots .d-dot { opacity: 0; }
.ai-dots.play .d-dot { animation: d-in .35s var(--ease) forwards, d-pulse 3.6s ease-in-out 1.2s infinite; }
.ai-dots.play .d2 { animation-delay: .3s, 1.5s; }
.ai-dots.play .d3 { animation-delay: .6s, 1.8s; }
@keyframes d-in { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes d-pulse { 0%,30%,100% { transform: scale(1); } 12% { transform: scale(1.35); } }

/* clock: minute hand sweeps */
.ai-clock .k-min { transform-box: view-box; transform-origin: 12px 12px; }
.ai-clock.play .k-min { animation: k-sweep 6s linear infinite; }
@keyframes k-sweep { to { transform: rotate(360deg); } }

/* doc: evidence highlight walks down the rows */
.ai-doc .o-hl { opacity: 0; }
.ai-doc.play .o-hl { animation: o-walk 4.4s var(--ease) infinite; }
@keyframes o-walk { 0% { opacity: 0; transform: translateY(0); } 10%,30% { opacity: .9; transform: translateY(0); } 45%,65% { opacity: .9; transform: translateY(3px); } 80%,90% { opacity: .9; transform: translateY(6px); } 100% { opacity: 0; transform: translateY(6px); } }

/* upload: arrow lifts */
.ai-upload.play .u-arrow { animation: u-lift 2.8s var(--ease) infinite; }
@keyframes u-lift { 0%,60%,100% { transform: translateY(0); opacity: 1; } 30% { transform: translateY(-3px); opacity: 1; } 45% { transform: translateY(-5px); opacity: 0; } 50% { transform: translateY(3px); opacity: 0; } }

/* spark: twinkle */
.ai-spark.play .p-big { animation: p-tw 3.2s var(--ease) infinite; }
.ai-spark.play .p-small { animation: p-tw 3.2s var(--ease) .6s infinite; }
@keyframes p-tw { 0%,40%,100% { transform: scale(1) rotate(0); } 15% { transform: scale(1.18) rotate(12deg); } 28% { transform: scale(.94) rotate(0); } }

/* users: second person slides in */
.ai-users.play .us-2 { animation: us-in .6s var(--ease) both; }
@keyframes us-in { from { transform: translateX(-4px); opacity: 0; } to { transform: none; opacity: 1; } }

/* globe: meridian turns */
.ai-globe.play .g-mer { animation: g-turn 5s ease-in-out infinite; }
@keyframes g-turn { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.12); } }

/* layers: top layer lifts */
.ai-layers.play .l-top { animation: l-lift 3.4s var(--ease) infinite; }
@keyframes l-lift { 0%,50%,100% { transform: translateY(0); } 20%,35% { transform: translateY(-2.4px); } }

/* bell: swings */
.ai-bell .b-body { transform-box: view-box; transform-origin: 12px 4px; }
.ai-bell.play .b-body { animation: b-swing 4s var(--ease) infinite; }
@keyframes b-swing { 0%,40%,100% { transform: rotate(0); } 8% { transform: rotate(14deg); } 16% { transform: rotate(-10deg); } 24% { transform: rotate(6deg); } 32% { transform: rotate(-3deg); } }

/* arrow: nudge on host hover */
a:hover .ai-arrow .a-go, button:hover .ai-arrow .a-go, .card:hover .ai-arrow .a-go { animation: a-go .6s var(--ease); }
@keyframes a-go { 50% { transform: translateX(3px); } }

/* chat: typing dots */
.ai-chat.play .t1, .ai-chat.play .t2, .ai-chat.play .t3 { animation: t-type 1.6s ease-in-out infinite; }
.ai-chat.play .t2 { animation-delay: .18s; } .ai-chat.play .t3 { animation-delay: .36s; }
@keyframes t-type { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-1.6px); opacity: 1; } }

/* loop: rotates slowly */
.ai-loop .lp { transform-box: view-box; transform-origin: 12px 12px; }
.ai-loop.play .lp { animation: k-sweep 9s linear infinite; }

/* target: ping */
.ai-target.play .tg-ping { animation: tg 2.6s var(--ease) infinite; }
@keyframes tg { 0% { transform: scale(1); opacity: .9; } 80%,100% { transform: scale(5.5); opacity: 0; } }

/* mail: flap opens */
.ai-mail .m-flap { transform-origin: 50% 0; }
.ai-mail.play .m-flap { animation: m-flap 3.6s var(--ease) infinite; }
@keyframes m-flap { 0%,50%,100% { transform: scaleY(1); } 20%,35% { transform: scaleY(-.4); } }

/* building windows light up */
.ai-building.play .bw { animation: bw 3s steps(1) infinite; }
@keyframes bw { 0%,100% { opacity: 1; } 40% { opacity: .25; } 60% { opacity: 1; } }

/* merge: branches draw together */
.ai-merge .mg-a, .ai-merge .mg-b { stroke-dasharray: 16; stroke-dashoffset: 16; }
.ai-merge.play .mg-a, .ai-merge.play .mg-b { animation: mg .7s var(--ease) forwards; }
.ai-merge.play .mg-b { animation-delay: .15s; }
@keyframes mg { to { stroke-dashoffset: 0; } }

/* tag: swings */
.ai-tag.play .tg-hole { animation: d-pulse 3.2s ease-in-out infinite; }

/* eye: looks around */
.ai-eye.play .e-pupil { animation: e-look 4.6s var(--ease) infinite; }
@keyframes e-look { 0%,30%,100% { transform: translateX(0); } 10% { transform: translateX(-1.6px); } 20% { transform: translateX(1.6px); } }

/* chart: bars grow */
.ai-chart .ch1, .ai-chart .ch2, .ai-chart .ch3 { transform-origin: 50% 100%; }
.ai-chart.play .ch1 { animation: ch .6s var(--ease) both; }
.ai-chart.play .ch2 { animation: ch .6s var(--ease) .12s both; }
.ai-chart.play .ch3 { animation: ch .6s var(--ease) .24s both; }
@keyframes ch { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* database ring scans */
.ai-database.play .db-ring { animation: db 3.4s var(--ease) infinite; }
@keyframes db { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* roadmap flag waves */
.ai-roadmap .rm-flag { transform-origin: 0% 50%; }
.ai-roadmap.play .rm-flag { animation: rm 3s ease-in-out infinite; }
@keyframes rm { 0%,100% { transform: skewY(0); } 50% { transform: skewY(-6deg); } }

/* handshake / warn / lock */
.ai-handshake.play .hs { animation: l-lift 3s var(--ease) infinite; }
.ai-warn.play .w-mark { animation: q-bounce 3.4s var(--ease) infinite; }
.ai-lock .lk { transform-origin: 70% 100%; }
.ai-lock.play .lk { animation: lk .8s var(--ease) both; }
@keyframes lk { from { transform: translateY(-2px); } to { transform: none; } }

/* reduced motion: final state, no loops */
@media (prefers-reduced-motion: reduce) {
  .ai * { animation: none !important; }
  .ai .c-ring, .ai .c-tick, .ai .d-line, .ai .mg-a, .ai .mg-b { stroke-dashoffset: 0 !important; }
  .ai .d-dot { opacity: 1 !important; }
  .ai-doc .o-hl { opacity: .9 !important; }
}