/* 前台动效：加载页、页面切换、陪玩名片点击与个人主页入场 + 毛玻璃 + 粒子。
   纯 CSS 动画 + Canvas 粒子；所有 transform/opacity 走合成层。 */

/* ---------- 基础：主内容半透明，让粒子层透上来 ---------- */
body{background:transparent!important}
#app,.mc-app,.page,#page{
  background:rgba(255,255,255,.35)!important;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}

/* ---------- 0. 毛玻璃基础（Glassmorphism） ---------- */
.mc-glass{
  background:rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 8px 32px rgba(170,130,190,.18),
             inset 0 1px 0 rgba(255,255,255,.7),
             inset 0 -1px 0 rgba(255,255,255,.2)}

/* 底部导航毛玻璃（z-index:40 区域） */
nav.tabbar,.tabbar,.mc-tabbar,
.bottom-nav,.bar-bottom{
  background:rgba(255,255,255,.7)!important;
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  border-top:1px solid rgba(255,255,255,.55)!important;
  box-shadow:0 -6px 24px rgba(180,130,190,.12)!important}

/* 个人主页弹层毛玻璃 */
#modal.cd-full,#modal{
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  backdrop-filter:blur(20px) saturate(170%)}
#modalMask:not([hidden]){
  background:rgba(80,60,110,.3)!important;
  -webkit-backdrop-filter:blur(4px) saturate(150%);
  backdrop-filter:blur(4px) saturate(150%)}

/* 所有卡片毛玻璃（覆盖 comp-card / cl-card / hr-card / boss-card / card / gift-card / menu-cover 等） */
.comp-card,.cl-card,.hr-card,.boss-card,.card,.gift-card,.fun-item,.board-sample,.questionnaire-box,.order-card{
  background:rgba(255,255,255,.38)!important;
  -webkit-backdrop-filter:blur(14px) saturate(165%);
  backdrop-filter:blur(14px) saturate(165%);
  border:1px solid rgba(255,255,255,.55)!important;
  box-shadow:0 6px 22px rgba(180,130,190,.14),
             inset 0 1px 0 rgba(255,255,255,.8)!important}

/* 浮动按钮毛玻璃 */
.service-fab,.bgm-fab{
  background:rgba(255,255,255,.72)!important;
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  backdrop-filter:blur(16px) saturate(180%);
  border:1px solid rgba(255,255,255,.5)!important;
  box-shadow:0 6px 20px rgba(200,130,180,.25)!important}

/* header */
header,.topbar,.sec-head,.page-head{
  background:rgba(255,255,255,.58)!important;
  -webkit-backdrop-filter:blur(16px) saturate(170%);
  backdrop-filter:blur(16px) saturate(170%)}

/* toast 毛玻璃 */
.toast{
  background:rgba(80,60,110,.78)!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.2)}

/* ---------- 1. 加载页 ---------- */
#loading{transform:translateZ(0);will-change:opacity,transform,filter}
#loading.hide{opacity:0;transform:scale(1.06);filter:blur(8px);transition:opacity .55s ease,transform .55s ease,filter .55s ease}
#loading .loading-inner{animation:mcSplashIn .7s cubic-bezier(.2,.9,.25,1) both}
#loading .logo-bubble{animation:mcBreath 2.8s ease-in-out infinite .7s}
#loading .logo-disc{position:relative;overflow:hidden}
#loading .logo-disc::after{
  content:"";position:absolute;top:-60%;left:-70%;width:45%;height:220%;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.9),rgba(255,255,255,0));
  transform:rotate(12deg);animation:mcSheen 2.2s ease-in-out infinite .5s}
#loading .progress-fill{background-size:200% 100%;animation:mcFlow 1s linear infinite}
#loading .progress-heart{animation:mcBeat .9s ease-in-out infinite}
#loading .loading-title{animation:mcTitleIn .8s cubic-bezier(.9,.9,.25,1) both .12s}
#loading .float-heart{animation:mcRise 4.2s ease-in-out infinite}
#loading .float-heart.h2{animation-delay:1.1s}
#loading .float-heart.h3{animation-delay:2.2s}
@keyframes mcSplashIn{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
@keyframes mcTitleIn{from{opacity:0;letter-spacing:14px;filter:blur(4px)}to{opacity:1;letter-spacing:6px;filter:none}}
@keyframes mcBreath{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.02)}}
@keyframes mcSheen{0%{left:-70%}55%,100%{left:130%}}
@keyframes mcFlow{0%{background-position:0 0}100%{background-position:-24px 0}}
@keyframes mcBeat{0%,100%{transform:translate(-50%,-50%) scale(1)}35%{transform:translate(-50%,-50%) scale(1.22)}}
@keyframes mcRise{0%{transform:translateY(10px);opacity:.3}50%{opacity:.9}100%{transform:translateY(-26px);opacity:0}}

/* ---------- 2. 页面切换 ---------- */
.view{animation:mcViewIn .46s cubic-bezier(.22,.75,.3,1) both}
@keyframes mcViewIn{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
.comp-card,.cl-card{animation:mcCardIn .5s cubic-bezier(.22,.75,.3,1) both}
.comp-card:nth-child(2),.cl-card:nth-child(2){animation-delay:.06s}
.comp-card:nth-child(3),.cl-card:nth-child(3){animation-delay:.12s}
.comp-card:nth-child(4),.cl-card:nth-child(4){animation-delay:.18s}
.comp-card:nth-child(5),.cl-card:nth-child(5){animation-delay:.24s}
@keyframes mcCardIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.tab{transition:transform .18s ease,color .18s ease}
.tab:active{transform:scale(.88)}

/* ---------- 3. 名片按压 + 水波纹 ---------- */
.comp-card,.cl-card{position:relative;overflow:hidden;
  transition:transform .2s cubic-bezier(.22,.7,.3,1),box-shadow .2s ease}
.comp-card.is-tap{transform:scale(.935);box-shadow:0 22px 40px rgba(198,138,190,.38)!important}
.comp-card.is-tap .comp-photo{filter:brightness(.95) saturate(1.1)}
.cl-card.is-tap{transform:scale(.93)}
.mc-ripple{
  position:absolute;border-radius:50%;pointer-events:none;z-index:6;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,196,224,.7) 42%,rgba(255,196,224,0) 72%);
  transform:scale(.15);opacity:1;animation:mcRipple .7s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes mcRipple{to{transform:scale(2.8);opacity:0}}
.comp-photo::after,.cl-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.38) 50%,rgba(255,255,255,0) 65%);
  transform:translateX(-120%);transition:transform .55s ease}
.comp-card:active .comp-photo::after,.cl-card:active .cl-photo::after{transform:translateX(120%)}

/* ---------- 4. 整屏过渡遮罩 ---------- */
.mc-page-veil{
  position:fixed;inset:0;z-index:88;pointer-events:none;opacity:0;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 42%,rgba(255,241,248,.98),rgba(244,236,253,.96) 55%,rgba(234,240,253,.98));
  -webkit-backdrop-filter:blur(6px) saturate(160%);
  backdrop-filter:blur(6px) saturate(160%);
  transition:opacity .14s ease}
.mc-page-veil.on{opacity:1}
.mc-veil-heart{
  font-size:72px;color:#f19ec4;opacity:0;transform:scale(.4);
  text-shadow:0 12px 28px rgba(214,140,190,.4)}
.mc-page-veil.on .mc-veil-heart{animation:mcVeilHeart .56s cubic-bezier(.2,.8,.3,1) forwards}
.mc-page-veil.on::before{
  content:"";position:absolute;width:160px;height:160px;border-radius:50%;
  border:2px solid rgba(241,158,196,.55);animation:mcVeilRing .56s ease-out forwards}
@keyframes mcVeilHeart{0%{opacity:0;transform:scale(.4)}45%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:scale(1.8)}}
@keyframes mcVeilRing{0%{opacity:.85;transform:scale(.35)}100%{opacity:0;transform:scale(2)}}
.comp-card.is-open .comp-photo,.cl-card.is-open .cl-photo{transform:scale(1.05);transition:transform .38s ease}

/* ---------- 5. 个人主页入场 ---------- */
#modalMask:not([hidden]){animation:mcMaskIn .3s ease both}
#modalMask:not([hidden]) #modal{animation:mcModalIn .42s cubic-bezier(.2,.8,.25,1) both}
#modal.cd-full .cd-hero{animation:mcHeroZoom .85s cubic-bezier(.2,.7,.3,1) both;transform-origin:center 35%}
#modal.cd-full .cd-body{animation:mcBodyIn .5s cubic-bezier(.22,.7,.3,1) .08s both}
#modal.cd-full .cd-foot,#modal.cd-full .cd-cta{animation:mcFootIn .45s cubic-bezier(.22,.7,.3,1) .14s both}
@keyframes mcMaskIn{from{opacity:0}to{opacity:1}}
@keyframes mcModalIn{from{opacity:0;transform:translateY(40px) scale(.97)}to{opacity:1;transform:none}}
@keyframes mcHeroZoom{from{opacity:.35;transform:scale(1.15)}to{opacity:1;transform:scale(1)}}
@keyframes mcBodyIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes mcFootIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------- 6. 粒子 Canvas（关键：z-index 在弹层之下、内容之上） ---------- */
.mc-particles{
  position:fixed;inset:0;z-index:85;pointer-events:none;
  width:100vw;height:100dvh;opacity:.9}

/* ---------- 7. 按钮按下涟漪 ---------- */
.btn-primary:active,.btn:active,.chip:active{
  transform:scale(.96);
  box-shadow:0 2px 8px rgba(200,130,180,.25),
             inset 0 1px 0 rgba(255,255,255,.5)!important}

/* ---------- 9. 设置页（画面模式 / 背景音乐 / 版本 / 关于） ---------- */
.mc-set-title{font-weight:900;margin-bottom:10px}
.mc-set-label{font-weight:800;margin:2px 0 4px}
.mc-set-desc{margin:0 0 12px;line-height:1.6;font-size:12px;color:#a294b8}
.mc-set-line{height:1px;background:rgba(140,110,170,.12);margin:16px 0}
.mc-set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;background:none;border:0;padding:0;text-align:left;font:inherit;color:inherit}
.mc-set-l{min-width:0}
.mc-set-l b{display:block;font-weight:800;font-size:14px;color:#3d3350}
.mc-set-l small{display:block;margin-top:3px;font-size:11px;line-height:1.5;color:#a294b8}
.mc-switch{position:relative;flex:none;width:52px;height:30px;border-radius:999px;
  border:0;padding:0;background:rgba(160,140,190,.22);transition:background .22s;cursor:pointer}
.mc-switch i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(80,60,110,.25);transition:transform .22s}
.mc-switch.on{background:linear-gradient(110deg,#ffb7d5,#f19ec4)}
.mc-switch.on i{transform:translateX(22px)}
.mc-vol{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:12px;color:#8d7fa6}
.mc-vol input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;
  background:linear-gradient(90deg,#ffc2dc,#e7d5ff);outline:none}
.mc-vol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;
  border-radius:50%;background:#fff;border:2px solid #f3a8cd;box-shadow:0 2px 8px rgba(210,130,180,.35);cursor:pointer}
.mc-vol input[type=range]::-moz-range-thumb{width:16px;height:16px;border:2px solid #f3a8cd;
  border-radius:50%;background:#fff;cursor:pointer}
.mc-vol b{flex:none;min-width:38px;text-align:right;color:#e07ba9;font-weight:800}
.mc-home-btn{flex:none;padding:9px 16px;border-radius:999px;border:0;font-weight:800;font-size:13px;
  color:#8a6a2c;background:linear-gradient(110deg,#ffedc4,#ffe3ae);
  box-shadow:0 4px 14px rgba(210,170,90,.28);cursor:pointer}
.mc-home-btn:active{transform:scale(.95)}
.mc-set-link{margin-top:16px;cursor:pointer}
.mc-set-link:active{opacity:.7}
.mc-ver{flex:none;font-weight:900;font-size:14px;color:#5b4a72}
.mc-about-h{font-weight:900;margin-bottom:8px}
.mc-about p{margin:0;line-height:1.85;font-size:13px;color:#5b4a72}
.mc-copy{margin:18px 0 8px;text-align:center;font-size:11px;line-height:1.9;color:#b3a6c6}
.mc-log{max-height:56vh;overflow:auto}
.mc-log-item{padding:12px 0;border-bottom:1px dashed rgba(140,110,170,.16)}
.mc-log-item:last-child{border-bottom:0}
.mc-log-head{display:flex;align-items:baseline;gap:8px}
.mc-log-head b{font-size:14px;color:#3d3350}
.mc-log-head span{font-size:11px;color:#a294b8}
.mc-log-item ul{margin:8px 0 0;padding-left:18px;font-size:13px;line-height:1.8;color:#64557c}
.mc-log-cur{margin:14px 0 0;text-align:center;font-size:12px;color:#a294b8}

/* ---------- 8. 减少动态效果 ---------- */
@media (prefers-reduced-motion: reduce){
  .mc-particles{display:none!important}
  #loading .loading-inner,#loading .logo-title,
  #loading .logo-bubble,#loading .logo-disc::after,#loading .progress-fill,
  #loading .progress-heart,#loading .float-heart,
  .view,.comp-card,.cl-card,#modalMask:not([hidden]),#modalMask:not([hidden]) #modal,
  #modal.cd-full .cd-hero,#modal.cd-full .cd-body,#modal.cd-full .cd-foot,#modal.cd-full .cd-cta{animation:none!important}
  .mc-page-veil,.mc-ripple{display:none}
}