/* Kai · animaciones. Usar con el SVG inline (kai-idle*.svg, kai-pointing.svg). */
.kai-idle{--dur:3s;--amp:1;--off:.3}
.kai-idle .breath,.kai-idle .shadow,.kai-idle .earL,.kai-idle .earR,.kai-idle .eye,.kai-idle .glow{transform-box:view-box;animation:var(--dur) ease-in-out infinite}
.kai-idle .breath{transform-origin:200px 442px;animation-name:kBreath}
.kai-idle .shadow{transform-origin:200px 462px;animation-name:kShadow}
.kai-idle .earL{transform-origin:100px 116px;animation-name:kEarL}
.kai-idle .earR{transform-origin:282px 96px;animation-name:kEarR;animation-delay:calc(var(--dur) * var(--off) * -1)}
.kai-idle .eye,.kai-idle .glow{transform-origin:200px 182px;animation-name:kPulse}
.kai-idle .glow{animation-name:kGlow}
.kai .look{transform-box:view-box;transition:transform .45s cubic-bezier(.25,.8,.3,1);will-change:transform}
@keyframes kBreath{0%,100%{transform:none}50%{transform:translateY(calc(var(--amp) * -3px))}}
@keyframes kShadow{0%,100%{transform:none}50%{transform:scale(calc(1 - var(--amp) * .04))}}
@keyframes kEarL{0%,100%{transform:rotate(calc(var(--amp) * -3deg))}50%{transform:rotate(calc(var(--amp) * 3deg))}}
@keyframes kEarR{0%,100%{transform:rotate(calc(var(--amp) * 3deg))}50%{transform:rotate(calc(var(--amp) * -3deg))}}
@keyframes kPulse{0%,100%{transform:none}50%{transform:scale(calc(1 + var(--amp) * .1))}}
@keyframes kGlow{0%,100%{transform:none;opacity:.55}50%{transform:scale(calc(1 + var(--amp) * .14));opacity:1}}

.kai-pointing{--dur:2.6s;--amp:1;--bounce:1}
.kai-pointing .arm{transform-box:view-box;transform-origin:253px 313px;animation:kPoint var(--dur) infinite}
@keyframes kPoint{
0%{transform:none;animation-timing-function:cubic-bezier(.3,0,.2,1)}
26%{transform:rotate(calc(var(--amp) * -50deg - var(--bounce) * 9deg)) translateX(calc(var(--amp) * 4px));animation-timing-function:cubic-bezier(.4,0,.4,1)}
36%{transform:rotate(calc(var(--amp) * -50deg + var(--bounce) * 4deg)) translateX(calc(var(--amp) * 4px));animation-timing-function:cubic-bezier(.4,0,.4,1)}
44%,70%{transform:rotate(calc(var(--amp) * -50deg)) translateX(calc(var(--amp) * 4px));animation-timing-function:cubic-bezier(.5,0,.3,1)}
92%,100%{transform:none}}

/* Pensando → confirmación (0.9s, una vez). Repetir: quitar y volver a poner .kai-confirm */
.kai-confirm{--d:.5s}
.kai-confirm *{transform-box:view-box}
.kai-confirm :is(.hop,.shadow,.head,.eyeG,.visor,.armR,.earL,.earR,.dot,.chk,.spk){animation-duration:.9s;animation-fill-mode:both;animation-delay:var(--d)}
.kai-confirm .hop{transform-origin:200px 442px;animation-name:kcHop}
.kai-confirm .shadow{transform-origin:200px 462px;animation-name:kcShadow}
.kai-confirm .head{transform-origin:200px 285px;animation-name:kcHead}
.kai-confirm .eyeG{transform-origin:200px 182px;animation-name:kcEye}
.kai-confirm .visor{animation-name:kcVisor}
.kai-confirm .armR{transform-origin:252px 305px;animation-name:kcArm}
.kai-confirm .earL{transform-origin:100px 116px;animation-name:kcEarL}
.kai-confirm .earR{transform-origin:282px 96px;animation-name:kcEarR}
.kai-confirm .dot{transform-box:fill-box;transform-origin:center;opacity:0;animation-name:kcDot;animation-duration:.24s;animation-timing-function:cubic-bezier(.5,0,.75,0)}
.kai-confirm .d2{animation-delay:calc(var(--d) + .04s)}
.kai-confirm .d3{animation-delay:calc(var(--d) + .08s)}
.kai-confirm .chk{transform-box:fill-box;transform-origin:30% 70%;animation-name:kcChk}
.kai-confirm .chk path{stroke-dasharray:80;animation:kcDraw .9s var(--d) both}
.kai-confirm .spk{transform-box:fill-box;transform-origin:0 100%;animation-name:kcSpk}
.kai-confirm .s2{animation-delay:calc(var(--d) + .05s)}
@keyframes kcHop{
0%{transform:none;animation-timing-function:cubic-bezier(.3,0,.4,1)}
16%{transform:scale(1.04,.95);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
44%{transform:translateY(-16px) scale(.98,1.03);animation-timing-function:cubic-bezier(.6,0,.8,.4)}
62%{transform:scale(1.03,.97);animation-timing-function:cubic-bezier(.3,0,.3,1)}
80%{transform:translateY(-2px)}
100%{transform:none}}
@keyframes kcShadow{0%,16%{transform:none;opacity:1}44%{transform:scale(.78);opacity:.55}62%{transform:scale(1.04);opacity:1}100%{transform:none}}
@keyframes kcHead{
0%{transform:translateX(6px) rotate(7deg)}
16%{transform:translateX(6px) rotate(8deg);animation-timing-function:cubic-bezier(.3,0,.2,1)}
48%{transform:rotate(-2.5deg)}
64%{transform:translateY(5px) rotate(1deg);animation-timing-function:cubic-bezier(.3,0,.3,1)}
82%{transform:translateY(-1px) rotate(-.4deg)}
100%{transform:none}}
@keyframes kcEye{
0%,16%{transform:translate(24px,-12px) scale(.92);animation-timing-function:cubic-bezier(.3,0,.2,1)}
46%{transform:scale(1.14)}
66%{transform:scale(.97)}
100%{transform:none}}
@keyframes kcVisor{0%,16%{transform:translate(12px,-3px);animation-timing-function:cubic-bezier(.3,0,.2,1)}50%,100%{transform:none}}
@keyframes kcArm{
0%{transform:rotate(-100deg) scale(.72)}
16%{transform:rotate(-104deg) scale(.7);animation-timing-function:cubic-bezier(.25,0,.2,1)}
52%{transform:rotate(-80deg) scale(1.03)}
72%{transform:rotate(-88deg)}
100%{transform:rotate(-85deg)}}
@keyframes kcEarL{0%,16%{transform:rotate(-4deg)}46%{transform:rotate(-9deg)}66%{transform:rotate(5deg)}84%{transform:rotate(-1.5deg)}100%{transform:none}}
@keyframes kcEarR{0%,20%{transform:rotate(3deg)}50%{transform:rotate(8deg)}70%{transform:rotate(-5deg)}88%{transform:rotate(1.5deg)}100%{transform:none}}
@keyframes kcDot{0%{opacity:1;transform:none}35%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:scale(0)}}
@keyframes kcDraw{0%,28%{stroke-dashoffset:80;animation-timing-function:cubic-bezier(.3,0,.2,1)}60%,100%{stroke-dashoffset:0}}
@keyframes kcChk{0%,28%{opacity:0;transform:scale(.6)}32%{opacity:1}60%{transform:scale(1.14);animation-timing-function:cubic-bezier(.3,0,.3,1)}78%{transform:scale(.97)}100%{opacity:1;transform:none}}
@keyframes kcSpk{0%,58%{opacity:0;transform:translate(-8px,8px) scale(.3)}78%{opacity:1;transform:translate(2px,-2px) scale(1.08)}100%{opacity:1;transform:none}}

/* Fondo hero: constelaciones flotando (loop 40/60/80 s) */
.kai-hero-bg{--khb-speed:1;--khb-amp:1}
.kai-hero-bg .khb-l{animation:khbFloat calc(80s / var(--khb-speed)) ease-in-out infinite}
.kai-hero-bg .khb-l1{--a:6px;animation-duration:calc(80s / var(--khb-speed))}
.kai-hero-bg .khb-l2{--a:12px;animation-duration:calc(60s / var(--khb-speed));animation-delay:calc(-20s / var(--khb-speed))}
.kai-hero-bg .khb-l3{--a:20px;animation-duration:calc(40s / var(--khb-speed));animation-delay:calc(-7s / var(--khb-speed))}
.kai-hero-bg .khb-tw{animation:khbTwinkle 9s ease-in-out infinite}
@keyframes khbFloat{
0%,100%{transform:translate(0,0)}
25%{transform:translate(calc(var(--a) * var(--khb-amp)),calc(var(--a) * var(--khb-amp) * -.5))}
50%{transform:translate(0,calc(var(--a) * var(--khb-amp) * -1))}
75%{transform:translate(calc(var(--a) * var(--khb-amp) * -1),calc(var(--a) * var(--khb-amp) * -.5))}}
@keyframes khbTwinkle{0%,100%{opacity:1}50%{opacity:.35}}

/* Ícono 32px · módulo activo */
.kai-icon{--ki-dur:2.2s}
.kai-icon .ki-glow,.kai-icon .ki-eye{transform-box:view-box;transform-origin:16px 18.4px;animation:var(--ki-dur) ease-in-out infinite}
.kai-icon .ki-glow{animation-name:kiGlow}
.kai-icon .ki-eye{animation-name:kiEye}
@keyframes kiGlow{0%,100%{opacity:.35;transform:none}50%{opacity:1;transform:scale(1.3)}}
@keyframes kiEye{0%,100%{opacity:.82}50%{opacity:1}}

@media (prefers-reduced-motion:reduce){.kai *,.kai-hero-bg *,.kai-icon *{animation:none!important;transition:none!important}}