/**
 * Apple 级微交互：Tap Scale、二维码动效、导航滚动、骨架屏 Shimmer
 * 可在落地页、首页、下载页按需引入
 */

/* ========== 1. CTA 按钮 Tap Scale（物理下压感） ========== */
.ms-btn,
.btn,
.btn-orange,
.t1-ppb-btn,
.template-btn,
.down_load,
.download-btn,
.btn-main,
.btn-u,
.upload-btn,
.table-btn:not(.delete-app):not(.app-sheet-open),
a.ms-btn,
a.btn,
button.ms-btn,
button.btn {
  transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s ease, opacity 0.2s ease;
}
.ms-btn:active,
.btn:active,
.btn-orange:active,
.t1-ppb-btn:active,
.template-btn:active,
.down_load:active,
.download-btn:active,
.btn-main:active,
.btn-u:active,
.upload-btn:active,
.table-btn:not(.delete-app):not(.app-sheet-open):active,
a.ms-btn:active,
a.btn:active,
button.ms-btn:active,
button.btn:active {
  transform: scale(0.96);
}
/* 避免与 disabled 冲突 */
.ms-btn:disabled:active,
.btn:disabled:active,
.t1-ppb-btn:disabled:active,
.template-btn[disabled]:active,
.btn-u:disabled:active {
  transform: none;
}

/* ========== 2. 二维码 / 下载区出现动效（3D 翻转 + 中心扩散） ========== */
.t1-tmp1-qrbox,
.t1-tmp1-qr-inner,
.download-code-wrap.pc-only,
.download_div_PC .download,
.t4-ppb-mobile-tip + .download_div_PC .download {
  animation: qr-reveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.t1-tmp1-qrbox .t1-tmp1-qr-img,
.download-code-wrap.pc-only img,
.download_div_PC .download img {
  animation: qr-scale-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
  opacity: 0;
  transform: scale(0.3);
}
@keyframes qr-reveal {
  from {
    opacity: 0;
    transform: perspective(600px) rotateY(-90deg) scale(0.85);
  }
  to {
    opacity: 1;
    transform: perspective(600px) rotateY(0) scale(1);
  }
}
@keyframes qr-scale-in {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 下载页密码验证后整块内容出现时的中心扩散（可选，用于整块 download_div） */
.download_div.pc-pwd,
#showtext + .t1-ppb-content {
  animation: content-reveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes content-reveal {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ========== 3. 顶部导航栏滚动态（更模糊 + 缩小） ========== */
.full-site.style-3d header,
body.home30-theme-4 header {
  transition: min-height 0.25s ease, height 0.25s ease, backdrop-filter 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
header.nav-scrolled,
.full-site.style-3d header.nav-scrolled,
body.home30-theme-4 header.nav-scrolled {
  min-height: 56px !important;
  height: 56px !important;
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  background: rgba(15, 10, 26, 0.85) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}
.full-site.style-3d header.nav-scrolled .header.clearfix,
body.home30-theme-4 header.nav-scrolled .header.clearfix {
  min-height: 56px !important;
  height: 56px !important;
}
.full-site.style-3d header.nav-scrolled .header-left img.hidden-xs,
body.home30-theme-4 header.nav-scrolled .header-left img.hidden-xs {
  max-height: 36px !important;
}
.full-site.style-3d header.nav-scrolled .ms-nav > li > a,
body.home30-theme-4 header.nav-scrolled .ms-nav > li > a {
  font-size: 15px !important;
}
.full-site.style-3d header.nav-scrolled .login .ms-btn,
body.home30-theme-4 header.nav-scrolled .login .ms-btn {
  padding: 0.4em 0.85rem !important;
  font-size: 14px !important;
}

/* ========== 4. 骨架屏 Shimmer 效果 ========== */
.skeleton,
.skeleton-wrap {
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.05) 40%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.05) 60%,
    rgba(255, 255, 255, 0.05) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
  border-radius: 8px;
}
.skeleton-line {
  height: 1em;
  margin-bottom: 0.5em;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.06) 40%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.06) 60%,
    rgba(255, 255, 255, 0.06) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
  border-radius: 4px;
}
.skeleton-line.short { width: 60%; }
.skeleton-line.medium { width: 85%; }
.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.06) 40%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.06) 60%,
    rgba(255, 255, 255, 0.06) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}
.skeleton-card {
  padding: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* 替换原有 .loading 图标为骨架块（当父级带 .loading-skeleton 时） */
.loading-skeleton .loading,
.loading-skeleton .qq-upload-spinner {
  width: 120px;
  height: 24px;
  margin: 12px auto;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.06) 40%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.06) 60%,
    rgba(255, 255, 255, 0.06) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
  border-radius: 12px;
  border: none;
}
.loading-skeleton .loading img {
  display: none;
}

/* 浅色背景下的骨架（用于下载页等白底） */
.skeleton-light,
body:not(.full-site):not(.home30) .skeleton {
  background: linear-gradient(
    105deg,
    #e8e8e8 0%,
    #e8e8e8 40%,
    #f5f5f5 50%,
    #e8e8e8 60%,
    #e8e8e8 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}
body:not(.full-site):not(.home30) .skeleton-line {
  background: linear-gradient(
    105deg,
    #e8e8e8 0%,
    #e8e8e8 40%,
    #f0f0f0 50%,
    #e8e8e8 60%,
    #e8e8e8 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}