/* ===========================================================
   新掌门平台吉祥物 · PAY 星宝
   ① 开场：全屏 3D 跳出 + 翻跟头（高清透明 PNG + CSS 3D）
   ② 首页常驻：蓝色区域动态透明吉祥物（PNG + CSS 3D idle）
   =========================================================== */

/* ---------- 开场全屏动画 ---------- */
#mascotIntroStage{
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 50% 30%, #3b62ff 0%, #2b5cff 45%, #1f47d6 100%);
  overflow:hidden;
  transition:opacity .55s ease, visibility .55s ease;
}
#mascotIntroStage::after{ /* 品牌光晕 */
  content:""; position:absolute; width:140vw; height:140vw; left:50%; top:42%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 60%);
  pointer-events:none;
}
#mascotIntroStage.mi-done{ opacity:0; visibility:hidden; pointer-events:none; }

.mi-actor{
  position:absolute; left:50%; top:55%;
  width:min(78vw, 360px); height:min(78vw, 360px);
  transform-style:preserve-3d;
  perspective:900px;
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.30));
  animation:miEnter 2.6s cubic-bezier(.22,.67,.28,1.02) forwards;
  will-change:transform, opacity;
}
.mi-actor img{
  width:100%; height:100%; object-fit:contain; display:block;
  transform-style:preserve-3d;
}

@keyframes miEnter{
  0%{
    transform:translate3d(-50%,-50%,0) translate3d(0, 85vh, -200px) scale3d(.25,.25,.25) rotateY(0deg);
    opacity:0;
  }
  18%{ opacity:1; }
  36%{
    transform:translate3d(-50%,-50%,0) translate3d(0, -12vh, 80px) scale3d(1.18,1.18,1.18) rotateY(720deg);
  }
  50%{
    transform:translate3d(-50%,-50%,0) translate3d(0, 0, 0) scale3d(1,1,1) rotateY(720deg);
  }
  62%{
    transform:translate3d(-50%,-50%,0) translate3d(0, -8vh, 40px) scale3d(.95,.95,.95) rotateY(900deg);
  }
  82%{
    transform:translate3d(-50%,-50%,0) translate3d(0, -32vh, -60px) scale3d(.38,.38,.38) rotateY(1080deg);
    opacity:1;
  }
  100%{
    transform:translate3d(-50%,-50%,0) translate3d(0, -38vh, -120px) scale3d(.28,.28,.28) rotateY(1080deg);
    opacity:0;
  }
}

.mi-skip{
  position:absolute; top:calc(env(safe-area-inset-top,0px) + 14px); right:16px; z-index:3;
  padding:7px 16px; border-radius:999px; font-size:13px; color:#fff;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.32);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  cursor:pointer; user-select:none; opacity:.9;
}

/* ---------- 首页常驻吉祥物 ---------- */
#homeMascot{
  position:absolute; right:6px; top:80px;
  width:90px; height:90px; z-index:5;
  perspective:520px;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  opacity:0;
  transform:scale(.6);
  transition:opacity .45s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}
#homeMascot.mm-show{
  opacity:1;
  transform:scale(1);
}
#homeMascot .mm-img{
  width:100%; height:100%; object-fit:contain; display:block;
  transform-style:preserve-3d;
  filter:drop-shadow(0 7px 12px rgba(0,0,0,.22));
  animation:mmIdle 3.2s ease-in-out infinite;
  will-change:transform;
}
#homeMascot.mm-tap .mm-img{ animation:mmFlip .75s ease; }

@keyframes mmIdle{
  0%,100%{ transform:translateY(0) rotateY(-9deg) rotateZ(-1.5deg) scale(1); }
  50%    { transform:translateY(-8px) rotateY(9deg) rotateZ(1.5deg) scale(1.045); }
}
@keyframes mmFlip{
  0%  { transform:rotateY(0) scale(1); }
  50% { transform:rotateY(180deg) scale(1.12); }
  100%{ transform:rotateY(360deg) scale(1); }
}

/* 极小屏适配 */
@media (max-width:360px){
  #homeMascot{ width:78px; height:78px; right:4px; top:74px; }
}