/* ═══════════════════════════════════════════════════════════════
   Miai 主题层（本站专属，不进骨架）
   ---------------------------------------------------------------
   设计依据：2026-10 新版首图配色
     主粉 #FF6FB5 / 深粉 #E0338C / 浅粉 #FFC4E1
     霓虹紫 #8B5CF6 / 淡紫 #A78BFA   （M 字母、耳机光环）
     星星金 #FFD86B
   性能约束：2 核 ECS + 3Mbps + 手机端 ⇒ 只用 transform/opacity，
             柔光用 radial-gradient（不用大面积 filter:blur）
   ═══════════════════════════════════════════════════════════════ */

/* ── 0. 清掉原站内联奶黄底 ───────────────────────────────── */
.van-pull-refresh__track > div[style] { background-color: transparent !important; }
.middle { background-image: none !important; background-color: transparent !important; }
/* 内联奶黄另有两处（app.js 写死）：落地页包裹层 + 详情页容器
   <div style="background-image:linear-gradient(180deg,#FFFDE4,#FDFCF6);min-height:100vh…"> */
[style*="FFFDE4"] {
  background-color: transparent !important;
  background-image: none !important;
}

/* ── 1. 层级：背景 0 / 内容 1 / 光尘 2 / 弹层 3 ─────────── */
html, body { background: #fff2fa; }
#app { position: relative; z-index: 1; }
#layer, #lightbox { z-index: 3; }

/* ── 2. 动态背景：顶部冷紫白 → 中段暖粉 → 底部回紫 ────────
   首图的紫（M 字母）与粉（IP/标题）要在页面底色里延续，
   否则 hero 是紫粉、下面纯粉，视觉断层。 */
.miai-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(174deg,
    #fdf8ff 0%,
    #fff2fa 24%,
    #ffeaf6 50%,
    #ffe6f5 74%,
    #f8efff 100%);
}
.miai-bg::before,
.miai-bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
/* 左上：粉光球 */
.miai-bg::before {
  width: 74vw; height: 74vw; left: -22vw; top: -18vw;
  background: radial-gradient(circle, rgba(255,138,196,.58) 0%, rgba(255,138,196,.20) 46%, transparent 68%);
  animation: miaiOrb1 24s ease-in-out infinite;
}
/* 右下：紫光球（呼应 M 字母霓虹紫） */
.miai-bg::after {
  width: 82vw; height: 82vw; right: -26vw; bottom: -24vw;
  background: radial-gradient(circle, rgba(167,139,250,.54) 0%, rgba(167,139,250,.18) 48%, transparent 70%);
  animation: miaiOrb2 30s ease-in-out infinite;
}

/* ── 3. 光尘浮层（内容之上、弹层之下，不拦交互）────────── */
.miai-fx {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
/* 3.1 粒子三档景深：far 小虚慢 / mid / near 大亮快 */
.miai-fx i {
  position: absolute;
  bottom: var(--y, -12vh);
  left: var(--x, 10%);
  font-size: var(--s, 16px);
  font-style: normal;
  line-height: 1;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  animation: miaiFloat var(--d, 24s) linear infinite;
  animation-delay: var(--dl, 0s);
  color: var(--c, #ff8ac4);
  text-shadow: 0 0 7px currentColor, 0 0 20px currentColor;
}
.miai-fx i[data-d='far']  { --o: 0.5;  filter: blur(0.6px); }
.miai-fx i[data-d='mid']  { --o: 0.78; }
.miai-fx i[data-d='near'] { --o: 0.95; text-shadow: 0 0 10px currentColor, 0 0 30px currentColor; }

/* ── 4. hero 与主题融为一体（4 层）──────────────────────
   首图底部本身是粉色背景 + 白色波纹，若直接贴到页面底上会留一条
   "图片边界"。做法：
     · img     : mask 从 74% 开始羽化 → 底部背景区化掉，不留边
     · ::before: 居中对称的紫粉光晕（soft-light）→ 图自带主题色温
     · ::after : 粉 → 紫 → 页面底色的渐变带 → 明显但收口同色
     · 载入     : 轻微推近淡入                                        */
.top {
  position: relative;
  /* 下方留 28px 缓冲带：渐变带在这里走到背景色，接缝才真正消失
     （margin 负值抵消，不影响整体布局与门禁） */
  padding-bottom: 28px;
  margin-bottom: -28px;
}
.top img {
  display: block;
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%, #000 86%,
    rgba(0,0,0,.88) 91%,
    rgba(0,0,0,.52) 95%,
    rgba(0,0,0,.20) 98%,
    transparent 100%);
  mask-image: linear-gradient(to bottom,
    #000 0%, #000 86%,
    rgba(0,0,0,.88) 91%,
    rgba(0,0,0,.52) 95%,
    rgba(0,0,0,.20) 98%,
    transparent 100%);
  animation: miaiHeroIn .72s cubic-bezier(.22,.61,.36,1) both;
}
/* 4.1 对称光晕：中心偏上，左右对称，紫粉双色 */
.top::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 66% at 50% 26%,
    rgba(255,143,196,.26) 0%,
    rgba(196,165,255,.16) 42%,
    rgba(139,92,246,.10) 66%,
    transparent 100%);
  mix-blend-mode: soft-light;
}
/* 4.2 渐变收口：粉雾 → 紫雾 → 页面底色（同色收口 = 无缝） */
.top::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(14% + 28px);
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255,140,195,0) 0%,
    rgba(255,140,195,.26) 15%,
    rgba(255,100,175,.46) 30%,
    rgba(178,130,255,.54) 42%,
    rgba(255,222,250,.88) 58%,
    #fff2fa 80%,
    #fff2fa 100%);
  animation: miaiGlow 5.2s ease-in-out infinite;
}

/* ── 5. 分类条：粉色微光缓慢扫过 ───────────────────────── */
.block-bar {
  position: relative;
  overflow: hidden;
}
.block-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 30%,
    rgba(255,255,255,.55) 48%,
    transparent 66%);
  background-size: 260% 100%;
  animation: miaiShine 6.5s ease-in-out infinite;
}

/* ── 6. 卡片：粉雾质感 ─────────────────────────────────── */
.block {
  background-color: rgba(255,255,255,.92) !important;
  box-shadow: 0 6px 18px rgba(255,120,180,.12), 0 1px 0 rgba(255,255,255,.9) inset;
}

/* ── 8. 动画关键帧 ─────────────────────────────────────── */
@keyframes miaiOrb1 {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(6vw,5vh,0) scale(1.08); }
}
@keyframes miaiOrb2 {
  0%, 100% { transform: translate3d(0,0,0) scale(1.04); }
  50%      { transform: translate3d(-7vw,-4vh,0) scale(.96); }
}
@keyframes miaiFloat {
  0%   { transform: translate3d(0,0,0) scale(.5) rotate(0deg); opacity: 0; }
  10%  { opacity: var(--o, .7); }
  55%  { opacity: calc(var(--o, .7) * .82); }
  88%  { opacity: calc(var(--o, .7) * .34); }
  100% { transform: translate3d(var(--dx,3vw), -110vh, 0) scale(1.12) rotate(var(--rot, 25deg)); opacity: 0; }
}
@keyframes miaiHeroIn {
  from { opacity: 0; transform: scale(1.035); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes miaiGlow {
  0%, 100% { opacity: .86; }
  50%      { opacity: 1; }
}
@keyframes miaiShine {
  0%, 62% { background-position: 180% 0; }
  100%    { background-position: -80% 0; }
}

/* ── 9. 无障碍 / 省电模式 ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .miai-bg::before,
  .miai-bg::after,
  .miai-fx i,
  .top::after,
  .top img,
  .block-bar::after {
    animation: none !important;
  }
  .miai-fx i { opacity: .45; }
}