/* OpsJi helper: the helmet, engraved J. States on .stage: idle · listen · think · answer */
@font-face{font-family:'Satisfy';src:url(brand/Satisfy.woff2) format('woff2');font-display:swap}
.stage{--hi:#fff;--shell:#f3f2ee;--shell2:#b9b8b2;--shell3:#6d6d6a;--visor:#15171b;--visor2:#2b2e35;--glow:var(--gold);--bub:#f3f2ee;--bubink:#15171b}
@keyframes rfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes rblink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.15)}}
@keyframes rpulse{from{opacity:.35}to{opacity:1}}
@keyframes rant{0%{box-shadow:0 0 0 0 var(--glow)}100%{box-shadow:0 0 0 10px transparent}}
@keyframes rhalo{to{transform:rotateX(74deg) rotateZ(360deg)}}
@keyframes rscan{0%,100%{transform:translateX(-7px)}50%{transform:translateX(7px)}}
@keyframes rnod{0%,100%{transform:rotate(0)}30%{transform:rotate(3deg) translateY(2px)}60%{transform:rotate(-1deg)}}
@keyframes rtalk{from{transform:scaleX(.5)}to{transform:scaleX(1.1)}}
@keyframes rjflash{0%{text-shadow:0 0 6px color-mix(in srgb,var(--gold) 50%,transparent)}50%{text-shadow:0 0 14px var(--gold),0 0 26px color-mix(in srgb,var(--gold) 70%,transparent)}100%{text-shadow:0 0 6px color-mix(in srgb,var(--gold) 50%,transparent)}}
@keyframes rbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.bot{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-84px 0 0 -75px;animation:rfloat 3.8s ease-in-out infinite}
.answer .bot{animation:rbob 1.1s ease-in-out 2}
.head{position:absolute;left:0;right:0;top:18px;bottom:0;border-radius:46% 46% 44% 44%/50% 50% 42% 42%;background:radial-gradient(circle at 40% 25%,var(--hi) 0,var(--shell) 20%,var(--shell2) 68%,var(--shell3) 100%);box-shadow:inset -13px -17px 32px rgba(0,0,0,.35),inset 8px 10px 20px rgba(255,255,255,.45),0 30px 50px -24px rgba(0,0,0,.8);transition:transform .35s;transform-origin:50% 70%}
.listen .head{transform:rotate(-4deg)}
.think .head{transform:rotate(2deg)}
.answer .head{animation:rnod .9s ease-in-out 1}
.face{position:absolute;left:14%;top:30%;width:72%;height:44%;border-radius:38% 38% 42% 42%/48% 48% 52% 52%;background:linear-gradient(180deg,var(--visor2),var(--visor) 50%,#07080a);box-shadow:inset 0 2px 4px rgba(255,255,255,.18),inset 0 -8px 14px rgba(0,0,0,.7),0 2px 0 rgba(255,255,255,.22);overflow:hidden}
.face .scanline{position:absolute;left:0;right:0;top:0;height:100%;background:linear-gradient(180deg,transparent 40%,color-mix(in srgb,var(--glow) 18%,transparent) 50%,transparent 60%);transform:translateY(-100%);opacity:0}
.think .face .scanline{opacity:1;animation:rscanline 1.2s linear infinite}
@keyframes rscanline{from{transform:translateY(-100%)}to{transform:translateY(100%)}}
.eyes{position:absolute;inset:0}
.think .eyes{animation:rscan 1.6s ease-in-out infinite}
.eye{position:absolute;top:44%;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff 0,var(--glow) 40%,color-mix(in srgb,var(--glow) 10%,transparent) 75%);box-shadow:0 0 10px var(--glow),0 0 22px var(--glow);transition:transform .25s,opacity .25s}
.eye.l{left:22%}.eye.r{right:22%}
.idle .eye{animation:rblink 5s infinite}
.listen .eye{transform:translateX(5px)}
.think .eye{transform:scale(.62);animation:rpulse .7s ease-in-out infinite alternate}
.answer .eye{transform:scale(1.18)}
.mouth{position:absolute;left:50%;top:70%;width:32px;height:5px;margin-left:-16px;border-radius:4px;background:color-mix(in srgb,var(--glow) 40%,transparent);transform:scaleX(.6);transition:transform .2s}
.answer .mouth{animation:rtalk .32s ease-in-out infinite alternate}
.ant{position:absolute;top:0;width:3px;height:30px;background:linear-gradient(180deg,var(--shell2),var(--shell3));border-radius:2px;transform-origin:bottom;transition:transform .3s}
.ant.l{left:34%;transform:rotate(-16deg)}.ant.r{right:34%;transform:rotate(16deg)}
.ant:after{content:"";position:absolute;left:50%;top:-8px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:radial-gradient(circle at 40% 35%,var(--hi),var(--shell2) 60%,var(--shell3))}
.think .ant:after{animation:rant .9s infinite}.think .ant.r:after{animation-delay:.45s}
.listen .ant.l{transform:rotate(-30deg)}.listen .ant.r{transform:rotate(30deg)}
.answer .ant.l{transform:rotate(-8deg)}.answer .ant.r{transform:rotate(8deg)}
.ear{position:absolute;top:48%;width:16px;height:30px;margin-top:-15px;border-radius:8px;background:linear-gradient(90deg,var(--shell3),var(--shell2));box-shadow:0 6px 10px -6px rgba(0,0,0,.6)}
.ear.l{left:-10px}
.ear.r{right:-13px;width:20px;height:34px;margin-top:-17px;background:linear-gradient(270deg,var(--shell3),var(--shell2));display:flex;align-items:center;justify-content:center}
.ear.r:after{content:"J";font-family:Satisfy,cursive;font-size:17px;color:var(--gold);text-shadow:0 0 6px color-mix(in srgb,var(--gold) 50%,transparent),0 1px 0 rgba(0,0,0,.4);line-height:1}
.think .ear.r:after{animation:rjflash 1.2s ease-in-out infinite}
.answer .ear.r:after{animation:rjflash .6s ease-in-out 2}
.halo{position:absolute;left:50%;top:50%;width:230px;height:230px;margin:-115px 0 0 -115px;border-radius:50%;border:1px solid color-mix(in srgb,var(--glow) 30%,transparent);transform:rotateX(74deg);box-shadow:0 0 10px -3px var(--glow)}
.halo.b{width:190px;height:190px;margin:-95px 0 0 -95px;border-color:color-mix(in srgb,var(--glow) 15%,transparent);transform:rotateX(74deg) rotateZ(40deg)}
.think .halo{animation:rhalo 1.4s linear infinite;border-top-color:var(--glow)}
.think .halo.b{animation:rhalo 2.2s linear infinite reverse;border-bottom-color:var(--glow)}
.answer .halo{border-color:color-mix(in srgb,var(--glow) 60%,transparent);transition:border-color .3s}
.floor{position:absolute;left:50%;bottom:32px;width:150px;height:22px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);filter:blur(4px)}
:root[data-theme="light"] .floor{background:radial-gradient(closest-side,rgba(0,0,0,.28),transparent)}
.bub{position:absolute;right:6px;top:18px;background:var(--bub);color:var(--bubink);font-weight:700;font-size:14px;padding:8px 13px;border-radius:14px;box-shadow:0 10px 30px -12px rgba(0,0,0,.6);opacity:0;transform:translateY(6px) scale(.96);transition:opacity .25s,transform .25s;white-space:nowrap;max-width:230px}
.bub:after{content:"";position:absolute;left:14px;bottom:-7px;width:14px;height:14px;background:var(--bub);transform:rotate(45deg);border-radius:2px}
.bub.show{opacity:1;transform:none}
.bub .dots i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--bubink);margin:0 1.5px;animation:rdot 1s infinite}
.bub .dots i:nth-child(2){animation-delay:.15s}.bub .dots i:nth-child(3){animation-delay:.3s}
@keyframes rdot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-4px);opacity:1}}
.st{position:absolute;left:0;right:0;bottom:4px;text-align:center;font-size:12px;color:var(--mut);letter-spacing:.06em;text-transform:uppercase}
@media (max-width:900px){.bot{width:120px;height:120px;margin:-68px 0 0 -60px}.halo{width:180px;height:180px;margin:-90px 0 0 -90px}.halo.b{width:150px;height:150px;margin:-75px 0 0 -75px}.bub{right:10px;top:10px;font-size:13px}}