/* Ask AI mascot: layered 3D robot brought to life with CSS only (transform/opacity, GPU-friendly). */
.aai{position:relative;aspect-ratio:784/1168;width:100%;user-select:none;-webkit-user-select:none;touch-action:none}
.aai .rig{position:absolute;inset:0;transform-origin:50% 86%;animation:aai-bob 3.2s ease-in-out infinite}
.aai.hop .rig{animation:aai-hop 1.3s cubic-bezier(.3,.7,.4,1) 1}
.aai .lay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.aai .shadow{position:absolute;left:30%;right:30%;bottom:13.5%;height:3%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);animation:aai-shadow 3.2s ease-in-out infinite}
.aai.hop .shadow{animation:aai-shadow-hop 1.3s cubic-bezier(.3,.7,.4,1) 1}
.aai .hr{transform-origin:69.8% 60.6%}
.aai .hl{transform-origin:30.6% 60.6%;animation:aai-swingL 3.2s ease-in-out infinite}
.aai.wave .hr{animation:aai-wave 2.2s ease-in-out 1}
.aai .head{position:absolute;inset:0;transform-origin:50% 52%;animation:aai-tilt 7s ease-in-out infinite}
.aai.nod .head{animation:aai-nod .9s ease-in-out 2}
/* eyes live on the face screen and can look anywhere inside it */
.aai .eyes{position:absolute;left:0;top:0;width:100%;height:100%;transition:transform .32s cubic-bezier(.3,1.5,.5,1)}
.aai .eye{position:absolute;width:9.6%;height:7%;margin:-3.5% 0 0 -4.8%;border-radius:50%;background:linear-gradient(180deg,#FF6BB8 0%,#B57BFF 50%,#5C8DFF 100%);box-shadow:0 0 1.2em .25em rgba(190,110,255,.75),0 0 .35em .1em rgba(255,140,220,.9) inset;animation:aai-blink 4.2s infinite;transition:height .25s,border-radius .25s,margin .25s}
.aai .eye.l{left:41.8%;top:39.6%}.aai .eye.r{left:61.7%;top:39.1%}
.aai.happy .eye{height:3.2%;margin-top:-2.6%;border-radius:100% 100% 18% 18%/140% 140% 20% 20%}
.aai.wow .eye{height:8.6%;width:10.6%;margin-left:-5.3%;margin-top:-4.3%}
/* the antenna light: glows, changes colour, throws light rings */
.aai .bulb{position:absolute;left:51.25%;top:16.1%;width:12.4%;aspect-ratio:1;margin:-6.2% 0 0 -6.2%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 12%,#ffb6e3 26%,#c58bff 55%,#6ea8ff 100%);box-shadow:0 0 1.4em .5em rgba(205,120,255,.85);animation:aai-glow 2.4s ease-in-out infinite,aai-hue 6s linear infinite}
.aai .bulb::before,.aai .bulb::after{content:"";position:absolute;inset:-10%;border-radius:50%;border:2px solid rgba(220,160,255,.9);animation:aai-ring 2.4s ease-out infinite}
.aai .bulb::after{animation-delay:1.2s}
.aai .rays{position:absolute;left:51.25%;top:16.1%;width:34%;aspect-ratio:1;margin:-17% 0 0 -17%;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,170,230,.35) 0 6deg,transparent 6deg 30deg);-webkit-mask:radial-gradient(closest-side,transparent 30%,#000 32%,transparent 100%);mask:radial-gradient(closest-side,transparent 30%,#000 32%,transparent 100%);animation:aai-spin 8s linear infinite,aai-rays 2.4s ease-in-out infinite;pointer-events:none}
.aai.wow .rays{animation:aai-spin 2s linear infinite;opacity:1}
@keyframes aai-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.2%)}}
@keyframes aai-shadow{0%,100%{transform:scaleX(1);opacity:.9}50%{transform:scaleX(.86);opacity:.6}}
@keyframes aai-tilt{0%,100%{transform:rotate(0)}20%{transform:rotate(-5deg)}45%{transform:rotate(3deg)}70%{transform:rotate(-2deg)}}
@keyframes aai-nod{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(0) translateY(1.6%)}}
@keyframes aai-swingL{0%,100%{transform:rotate(0)}50%{transform:rotate(6deg)}}
@keyframes aai-wave{0%,100%{transform:rotate(0)}15%{transform:rotate(-58deg)}30%{transform:rotate(-38deg)}45%{transform:rotate(-62deg)}60%{transform:rotate(-38deg)}75%{transform:rotate(-58deg)}}
@keyframes aai-hop{0%{transform:translateY(0) scale(1,1)}18%{transform:translateY(2%) scale(1.08,.86)}40%{transform:translateY(-16%) scale(.95,1.07)}62%{transform:translateY(0) scale(1.07,.9)}78%{transform:translateY(-2%) scale(.98,1.03)}100%{transform:translateY(0) scale(1,1)}}
@keyframes aai-shadow-hop{0%,100%{transform:scaleX(1);opacity:.9}40%{transform:scaleX(.55);opacity:.3}62%{transform:scaleX(1.15);opacity:1}}
@keyframes aai-blink{0%,90%,100%{transform:scaleY(1)}93%{transform:scaleY(.08)}96%{transform:scaleY(1)}}
@keyframes aai-glow{0%,100%{box-shadow:0 0 1em .3em rgba(205,120,255,.7)}50%{box-shadow:0 0 2.2em 1em rgba(255,120,210,.95)}}
@keyframes aai-hue{0%,100%{filter:hue-rotate(0)}33%{filter:hue-rotate(-28deg)}66%{filter:hue-rotate(48deg)}}
@keyframes aai-ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@keyframes aai-spin{to{transform:rotate(360deg)}}
@keyframes aai-rays{0%,100%{opacity:.35}50%{opacity:.9}}
@media (prefers-reduced-motion:reduce){.aai *,.aai .rig{animation:none!important}}
/* thinking: hand goes up to the side of the head and scratches, head leans in, eyes look up, dots appear */
.aai .head{z-index:2}.aai .hl{z-index:1}
.aai.think .hl{z-index:3;transform-origin:24% 62%;animation:aai-think 3s ease-in-out 1}
.aai.think .head{animation:aai-ponder 3s ease-in-out 1}
.aai.think .eyes{transform:translate(-3.6%,-3.2%)!important}
.aai.think .eye{height:4.6%;margin-top:-2.6%}
.aai .dots{position:absolute;left:68%;top:17%;display:flex;gap:2.5%;width:15%;opacity:0;transition:opacity .3s}
.aai .dots i{flex:1;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 .6em rgba(190,120,255,.9);animation:aai-dot 1s ease-in-out infinite}
.aai .dots i:nth-child(2){animation-delay:.15s}.aai .dots i:nth-child(3){animation-delay:.3s}
.aai.think .dots{opacity:1}
@keyframes aai-think{0%,100%{transform:none}22%{transform:translate(-2.6%,-24.5%) rotate(38deg)}32%,52%,72%{transform:translate(-2%,-26%) rotate(48deg)}42%,62%{transform:translate(-3.2%,-23.5%) rotate(28deg)}84%{transform:translate(-2.6%,-24.5%) rotate(38deg)}}
@keyframes aai-ponder{0%,100%{transform:rotate(0)}22%,84%{transform:rotate(-7deg)}}
@keyframes aai-dot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-35%);opacity:1}}