/* ===== 星梦曜 · 动画吉祥物（星梦喵） ===== */

/* 容器：固定左下角，贴边，可拖动 */
.mascot{
  position:fixed;
  left:16px;
  bottom:16px;
  z-index:350;
  width:210px;
  height:246px;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}

/* 拖动中与回原位平滑过渡 */
.mascot.dragging{ cursor:grabbing; }
.mascot.returning{
  transition:left .7s cubic-bezier(.2,.8,.3,1), top .7s cubic-bezier(.2,.8,.3,1);
}

/* 主体：正方形图片区，翻转中心在底部 */
.mascot-body{
  position:relative;
  width:210px;
  height:210px;
  transform-origin:bottom center;
}

/* 四视角图片叠加，通过 .show 切换显示（交叉淡化） */
.mascot-body img{
  position:absolute;
  left:0;
  top:0;
  width:210px;
  height:210px;
  opacity:0;
  transition:opacity .32s ease, transform .32s ease;
  will-change:opacity, transform;
  pointer-events:none;
}
.mascot-body img.show{ opacity:1; }

/* 视角切换时的滑入过渡：新视角图从下方轻微浮起，配合交叉淡化更丝滑 */
.mascot-body img.pop{
  animation:mascotPop .4s cubic-bezier(.2,.85,.32,1.1);
}
@keyframes mascotPop{
  0%   { transform:translateY(14px) scale(.95); }
  100% { transform:translateY(0)    scale(1); }
}

/* —— 待机浮动（入场结束后由 JS 加上 .idle） —— */
.mascot.idle .mascot-body{
  animation:mascotFloat 3.4s ease-in-out infinite;
}
@keyframes mascotFloat{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-8px); }
}

/* 地面投影（与浮动同步缩放） */
.mascot-shadow{
  position:absolute;
  left:50%;
  bottom:4px;
  transform:translateX(-50%);
  width:126px;
  height:18px;
  border-radius:50%;
  background:rgba(31,36,48,.18);
  filter:blur(2px);
  animation:mascotShadow 3.4s ease-in-out infinite;
}
@keyframes mascotShadow{
  0%,100%{ transform:translateX(-50%) scale(1);    opacity:.9; }
  50%    { transform:translateX(-50%) scale(.8);   opacity:.55; }
}

/* —— 入场打招呼（加载时弹出） —— */
.mascot.enter{ animation:mascotEnter .62s cubic-bezier(.2,.85,.32,1.18) both; }
@keyframes mascotEnter{
  0%   { transform:translateY(70px) scale(.55); opacity:0; }
  70%  { transform:translateY(-8px) scale(1.05); opacity:1; }
  100% { transform:translateY(0)    scale(1);   opacity:1; }
}

/* —— 点击欢跳 —— */
.mascot.hop .mascot-body{ animation:mascotHop .5s ease; }
@keyframes mascotHop{
  0%,100%{ transform:translateY(0) rotate(0); }
  25%    { transform:translateY(-20px) rotate(-7deg); }
  50%    { transform:translateY(-6px) rotate(5deg); }
  75%    { transform:translateY(-16px) rotate(0); }
}

/* —— 语音气泡 —— */
.mascot-bubble{
  position:absolute;
  left:6px;
  bottom:275px;
  max-width:230px;
  background:#fff;
  border:1px solid rgba(120,130,160,.18);
  border-radius:14px;
  padding:10px 13px;
  box-shadow:0 8px 24px rgba(31,36,48,.15);
  font-size:13px;
  line-height:1.55;
  color:#2b3345;
  opacity:0;
  transform:translateY(10px) scale(.9);
  transform-origin:bottom left;
  transition:opacity .25s ease,transform .25s ease;
  pointer-events:none;
  z-index:351;
  white-space:normal;
}
.mascot-bubble.show{ opacity:1; transform:translateY(0) scale(1); }
.mascot-bubble::after{
  content:"";
  position:absolute;
  bottom:-8px;
  left:24px;
  width:0;height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-top:9px solid #fff;
}

/* —— 移动端：略缩小，避免遮挡 —— */
@media (max-width:600px){
  .mascot{ left:10px; bottom:14px; width:172px; height:202px; }
  .mascot-body{ width:172px; height:172px; }
  .mascot-body img{ width:172px; height:172px; }
  .mascot-bubble{ bottom:230px; max-width:200px; font-size:12.5px; }
  .mascot-shadow{ width:96px; }
}