/* ==========================================================
   ASVARIS · mascot.css
   IXI yüzen maskotu — sürüklenebilir bileşen
   ========================================================== */
.mascot{
  position:fixed;
  top:100px;
  left:28px;
  z-index:999;
  width:120px;
  height:120px;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  animation:mascotEntry .8s cubic-bezier(.34,1.56,.64,1) both;
}
.mascot:focus-visible{outline:3px solid rgba(122,77,245,.45);outline-offset:6px;border-radius:50%}
.mascot.dragging{cursor:grabbing;z-index:10000}

/* IXI durum makinesi: idle/talk/sleep sprite'ı zaten img kaynağı değişerek oynatılır;
   burada yalnızca "mood" halesi rengini değiştiriyoruz (bkz. src/ixi/state). */
.mascot[data-ixi-state="listening"] .mascot-glow{background:radial-gradient(circle,rgba(47,107,255,.35) 0%,rgba(47,107,255,.12) 45%,transparent 70%)}
.mascot[data-ixi-state="thinking"] .mascot-glow{animation:glowPulse 1.1s ease-in-out infinite}
.mascot .ixi-orbit-dot{position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;background:#7a4df5;opacity:0;transform:translate(-50%,-50%);z-index:1;pointer-events:none}
.mascot[data-ixi-state="thinking"] .ixi-orbit-dot{opacity:.85;animation:ixiOrbitMascot 2.4s linear infinite}
.mascot .dot-2{animation-delay:-.8s;background:#2f6bff}
.mascot .dot-3{animation-delay:-1.6s;background:#12b8e4}
@keyframes ixiOrbitMascot{from{transform:translate(-50%,-50%) rotate(0deg) translateX(46px) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg) translateX(46px) rotate(-360deg)}}
.mascot[data-ixi-state="talking"] .mascot-glow{background:radial-gradient(circle,rgba(18,184,228,.35) 0%,rgba(18,184,228,.12) 45%,transparent 70%)}
.mascot[data-ixi-state="happy"] .mascot-glow{background:radial-gradient(circle,rgba(18,228,160,.4) 0%,rgba(18,228,160,.14) 45%,transparent 70%)}
.mascot[data-ixi-state="happy"] img{animation:mascotIdle 1.2s ease-in-out infinite}
.mascot[data-ixi-state="curious"] .mascot-glow{background:radial-gradient(circle,rgba(122,77,245,.4) 0%,rgba(122,77,245,.14) 45%,transparent 70%)}
.mascot[data-ixi-state="confused"] .mascot-glow{background:radial-gradient(circle,rgba(228,160,18,.3) 0%,rgba(122,77,245,.12) 45%,transparent 70%)}
.mascot[data-ixi-state="error"] .mascot-glow{background:radial-gradient(circle,rgba(228,90,18,.4) 0%,rgba(228,90,18,.14) 45%,transparent 70%)}
.mascot.mascot-sleeping{opacity:.55}
.mascot.mascot-sleeping .mascot-ring,.mascot.mascot-sleeping .mascot-glow{animation:none;opacity:.15}
/* The energetic idle bob (mascotIdle) must not keep playing over the sleep
   artwork -- looked like the mascot was bouncing around while "asleep", which
   read as a broken/mismatched pose. Swap it for a slow, gentle breathing motion. */
.mascot.mascot-sleeping img{animation:mascotSleepBreathe 4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  .mascot[data-ixi-state] .mascot-glow,.mascot[data-ixi-state="happy"] img,.mascot.mascot-sleeping img{animation:none}
  .mascot .ixi-orbit-dot{animation:none;opacity:0}
}
.mascot.dragging img{transform:scale(1.12);filter:drop-shadow(0 18px 40px rgba(11,37,69,.50))}
.mascot.dragging .mascot-ring{opacity:0}
.mascot.dragging .mascot-glow{transform:scale(1.5);opacity:.4}

.mascot img{
  width:100%;
  height:100%;
  object-fit:contain;
  position:relative;
  z-index:2;
  filter:drop-shadow(0 8px 22px rgba(11,37,69,.30));
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),filter .35s;
  animation:mascotIdle 3.4s ease-in-out infinite;
  pointer-events:none;
}
.mascot:not(.dragging):hover img{
  transform:scale(1.2)!important;
  filter:drop-shadow(0 14px 34px rgba(11,37,69,.50));
  animation:none;
}

.mascot-ring{
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:2px solid rgba(11,37,69,.20);
  z-index:1;
  animation:ringPulse 3s ease-in-out infinite;
  transition:opacity .3s;
}

.mascot-glow{
  position:absolute;
  inset:-14px;
  border-radius:50%;
  z-index:0;
  background:radial-gradient(circle,rgba(11,37,69,.18) 0%,rgba(0,65,130,.08) 45%,transparent 70%);
  animation:glowPulse 3.4s ease-in-out infinite;
  pointer-events:none;
  transition:transform .3s,opacity .3s;
}

/* Araç ipucu */
.mascot::after{
  content:"IXI Asistan";
  position:absolute;
  bottom:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%) translateY(6px);
  background:var(--ink);
  color:#fff;
  font-family:var(--f-b);
  font-size:11.5px;
  font-weight:500;
  padding:6px 12px;
  border-radius:8px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s,transform .25s;
}
.mascot:not(.dragging):hover::after{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

@keyframes mascotEntry{
  0%{opacity:0;transform:translateY(40px) scale(.6)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes mascotIdle{
  0%,100%{transform:translateY(0) rotate(0deg)}
  25%{transform:translateY(-8px) rotate(1deg)}
  50%{transform:translateY(-12px) rotate(0deg)}
  75%{transform:translateY(-6px) rotate(-1deg)}
}
@keyframes mascotSleepBreathe{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-3px) scale(1.015)}
}
@keyframes ringPulse{
  0%,100%{transform:scale(1);opacity:.45}
  50%{transform:scale(1.15);opacity:.12}
}
@keyframes glowPulse{
  0%,100%{transform:scale(.9);opacity:.55}
  50%{transform:scale(1.25);opacity:.2}
}

.mascot:active img{
  transform:scale(.95)!important;
  transition:transform .1s;
}

@media(max-width:560px){
  .mascot{width:68px;height:68px;bottom:16px;right:16px}
}

/* ==========================================================
   IXI Matter.js ragdoll drag mode — stable cropped-part rig
   ========================================================== */
.mascot{
  touch-action:none;
  will-change:left,top;
}
.mascot.ragdoll-active > img,
.mascot.ragdoll-active > .mascot-ring,
.mascot.ragdoll-active > .ixi-orbit-dot{
  opacity:0!important;
  animation:none!important;
}
.mascot.ragdoll-active > .mascot-glow{
  opacity:.18!important;
  transform:scale(1.2);
  animation:none!important;
}
.mascot.ragdoll-active::after{opacity:0!important}
.mascot.ragdoll-returning > img{
  animation:ixiRagdollReassemble .24s cubic-bezier(.22,.8,.25,1) both!important;
}

.ixi-ragdoll-stage{
  position:fixed;
  inset:0;
  z-index:10001;
  pointer-events:none;
  overflow:visible;
  opacity:1;
  transition:opacity .24s ease,filter .24s ease;
  filter:drop-shadow(0 14px 24px rgba(11,37,69,.34));
  contain:layout style;
}
.ixi-ragdoll-stage.is-releasing{
  opacity:0;
  filter:drop-shadow(0 4px 10px rgba(11,37,69,.12));
}

/* The outer node is a zero-size physics pivot. The cropped PNG is positioned
   around that pivot, so rotations never spin a full 120px canvas. */
.ixi-ragdoll-part{
  position:fixed;
  left:0;
  top:0;
  width:0;
  height:0;
  pointer-events:none;
  will-change:transform;
  transform-origin:0 0;
  backface-visibility:hidden;
}
.ixi-ragdoll-part > img{
  position:absolute;
  display:block;
  max-width:none;
  object-fit:contain;
  user-select:none;
  -webkit-user-select:none;
  pointer-events:none;
  backface-visibility:hidden;
}

.ixi-ragdoll-stage.is-fallback{
  inset:auto;
  right:auto;
  bottom:auto;
  transform-origin:50% 42%;
  will-change:transform;
}
.ixi-ragdoll-fallback-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

@keyframes ixiRagdollReassemble{
  0%{opacity:.12;transform:scale(.9) rotate(-1.2deg)}
  70%{opacity:1;transform:scale(1.045) rotate(.35deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}

@media(prefers-reduced-motion:reduce){
  .ixi-ragdoll-stage,
  .ixi-ragdoll-part,
  .mascot.ragdoll-returning > img{
    transition:none!important;
    animation:none!important;
  }
}