/* AtashiTech AI product page: the "See it answer" demo (prefix aa-).
   CSS only: page bodies may not carry <script>, so the multilingual turns rotate with keyframes. */
.aa-demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:3rem;align-items:center;}
.aa-demo-copy h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;color:var(--ai-fg);margin:.5rem 0 .9rem;line-height:1.15;}
.aa-demo-copy p{color:var(--ai-muted);line-height:1.7;margin:0 0 1.2rem;}
.aa-langs{list-style:none;padding:0;margin:0 0 1.2rem;display:flex;flex-wrap:wrap;gap:.45rem;}
.aa-langs li{font-size:.8rem;font-weight:600;color:#7a4a2c;background:#fbeee3;border:1px solid #f0d5bf;border-radius:100px;padding:.3rem .8rem;}
.aa-demo-copy .aa-note{font-size:.8rem;color:var(--ai-muted);opacity:.85;margin:0;}

/* stage: dark copper glass */
.aa-stage{position:relative;border-radius:26px;padding:4.2rem 1.6rem 1.6rem;margin-top:3.2rem;
  background:radial-gradient(120% 90% at 85% 0%,rgba(184,115,51,.28),transparent 55%),
             radial-gradient(90% 70% at 0% 100%,rgba(184, 115, 51, .14),transparent 60%),
             linear-gradient(160deg,#241813 0%,#150e0b 100%);
  border:1px solid rgba(240,190,140,.16);box-shadow:0 30px 70px rgba(43,29,22,.35),inset 0 1px 0 rgba(255,255,255,.06);}
.aa-stage::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:18px 18px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%);}

/* brand mark in a glowing copper ring, half above the panel */
.aa-orb{position:absolute;top:-64px;left:50%;transform:translateX(-50%);width:128px;height:128px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 45%,#3a2619 0%,#1a110d 70%);
  box-shadow:0 0 0 2px rgba(232,160,98,.55),0 0 28px rgba(232,140,70,.55),0 0 70px rgba(255,110,50,.25),inset 0 0 22px rgba(232,140,70,.25);
  animation:aa-breathe 4s ease-in-out infinite;}
.aa-mark{width:78px;height:63px;display:block;background:url(/img/atashi-mark.png) center/contain no-repeat;background-image:image-set(url(/img/atashi-mark.webp) type("image/webp"),url(/img/atashi-mark.png) type("image/png"));filter:drop-shadow(0 0 10px rgba(240,150,80,.55));}
.aa-ring{position:absolute;inset:-9px;border-radius:50%;border:2px solid transparent;
  border-top-color:#f2b27a;border-right-color:rgba(242,178,122,.35);animation:aa-spin 6s linear infinite;}
@keyframes aa-spin{to{transform:rotate(360deg)}}
@keyframes aa-breathe{0%,100%{box-shadow:0 0 0 2px rgba(232,160,98,.55),0 0 24px rgba(232,140,70,.45),0 0 60px rgba(255,110,50,.2),inset 0 0 22px rgba(232,140,70,.25)}
  50%{box-shadow:0 0 0 2px rgba(232,160,98,.75),0 0 36px rgba(232,140,70,.65),0 0 90px rgba(255,110,50,.3),inset 0 0 26px rgba(232,140,70,.35)}}

/* conversation */
.aa-chat{position:relative;display:flex;flex-direction:column;gap:.75rem;}
.aa-msg{max-width:86%;padding:.8rem 1rem;border-radius:16px;font-size:.9rem;line-height:1.55;}
.aa-user{align-self:flex-end;color:#fff3e8;background:linear-gradient(135deg,rgba(184,115,51,.42),rgba(154,91,60,.32));
  border:1px solid rgba(242,178,122,.35);border-bottom-right-radius:5px;}
.aa-bot{align-self:flex-start;color:#efe6df;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-bottom-left-radius:5px;}
.aa-src{display:inline-flex;align-items:center;gap:.3rem;margin-top:.45rem;font-size:.76rem;color:#f2b27a;}
.aa-src::before{content:'';width:6px;height:6px;border-radius:50%;background:#f2b27a;box-shadow:0 0 8px #f2b27a;}

/* the rotating multilingual turn: 7 turns x 3s */
.aa-rotator{position:relative;min-height:6.4rem;}
.aa-turn{position:absolute;inset:0;display:flex;flex-direction:column;gap:.7rem;opacity:0;animation:aa-turn 21s infinite;}
.aa-turn:nth-child(2){animation-delay:3s}.aa-turn:nth-child(3){animation-delay:6s}.aa-turn:nth-child(4){animation-delay:9s}
.aa-turn:nth-child(5){animation-delay:12s}.aa-turn:nth-child(6){animation-delay:15s}.aa-turn:nth-child(7){animation-delay:18s}
@keyframes aa-turn{0%{opacity:0;transform:translateY(8px)}2.5%{opacity:1;transform:none}12%{opacity:1;transform:none}14.3%{opacity:0;transform:translateY(-6px)}100%{opacity:0}}
.aa-turn .aa-user{max-width:86%;}
.aa-voice{display:flex;align-items:center;gap:.7rem;font-size:.78rem;color:rgba(255,236,220,.7);padding-left:.2rem;}
.aa-wave{display:inline-flex;align-items:center;gap:3px;height:20px;}
.aa-wave i{display:block;width:3px;height:100%;border-radius:3px;background:linear-gradient(180deg,#ffb37a,#ff6a3d);transform-origin:center;animation:aa-bar 1s ease-in-out infinite;}
.aa-wave i:nth-child(2){animation-delay:.12s}.aa-wave i:nth-child(3){animation-delay:.24s}.aa-wave i:nth-child(4){animation-delay:.36s}
.aa-wave i:nth-child(5){animation-delay:.48s}.aa-wave i:nth-child(6){animation-delay:.6s}.aa-wave i:nth-child(7){animation-delay:.72s}
@keyframes aa-bar{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

@media(prefers-reduced-motion:reduce){
  .aa-orb,.aa-ring,.aa-wave i{animation:none}
  .aa-turn{animation:none}.aa-turn:first-child{opacity:1}
}
@media(max-width:991px){.aa-demo{grid-template-columns:1fr;gap:4.5rem}.aa-demo-copy{text-align:center}.aa-langs{justify-content:center}}
@media(max-width:480px){.aa-stage{padding:4rem 1rem 1.2rem}.aa-msg{max-width:94%;font-size:.86rem}.aa-rotator{min-height:7.4rem}}