/* ==========================================================================
   MB01 · 首页（表达版：星空粒子 Hero + 分类入口 + 四模块 + 排行）
   ========================================================================== */

/* ---------------- Hero ---------------- */
.hero{
  position:relative; overflow:hidden;
  margin-top:var(--header-h);           /* 让出固定导航 */
  padding:clamp(28px,4vw,54px) 0 clamp(20px,3vw,34px);
}

.hero__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:.9;
}
.hero__slides{ position:relative; z-index:1; }
.hero__slide{
  display:none; align-items:center; gap:clamp(18px,3vw,40px);
  min-height:clamp(240px,34vw,380px);
}
.hero__slide.is-active{ display:flex; animation:hero-in .6s ease both; }
@keyframes hero-in{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }

.hero__poster{
  flex:0 0 clamp(150px,20vw,230px); position:relative;
  aspect-ratio:2/3; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line-strong);
  box-shadow:0 18px 46px rgba(2,6,23,.6), 0 0 34px rgba(59,130,246,.22);
  background:linear-gradient(160deg,#0d1430,#111a3a);
}
.hero__poster img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero__info{ flex:1 1 auto; min-width:0; max-width:640px; }
.hero__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.hero__title{
  font-size:clamp(24px,3.6vw,40px); font-weight:800; line-height:1.25; color:#fff;
  margin-bottom:12px; text-shadow:0 4px 24px rgba(2,6,23,.7);
}
.hero__desc{
  color:var(--t-secondary); font-size:14px; line-height:1.9; margin-bottom:16px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.hero__meta{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.hero__acts{ display:flex; flex-wrap:wrap; gap:12px; }

/* Hero 控制条 */
.hero__ctrl{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:12px; margin-top:22px;
}
.hero__dots{ display:flex; align-items:center; gap:8px; flex:1 1 auto; }
.hero__dot{
  width:9px; height:9px; border-radius:50%; padding:0;
  background:rgba(255,255,255,.22); border:1px solid var(--line);
  transition:all .3s ease;
}
.hero__dot.is-active{
  width:26px; border-radius:999px; border-color:transparent;
  background:var(--grad-main); box-shadow:0 0 14px rgba(59,130,246,.6);
}
.hero__arrow{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--t-secondary); background:rgba(255,255,255,.06);
  border:1px solid var(--line-strong); transition:all .25s ease;
}
.hero__arrow:hover{ color:#fff; background:rgba(59,130,246,.22); border-color:rgba(34,211,238,.5); }

@media (max-width:760px){
  .hero__slide{ flex-direction:column; align-items:flex-start; }
  .hero__poster{ flex:0 0 auto; width:38%; max-width:170px; }
}

/* ---------------- 分类入口 ---------------- */
.cats{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
}
@media (max-width:640px){ .cats{ grid-template-columns:repeat(3,1fr); gap:10px; } }
.cat{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:18px 10px; border-radius:var(--radius-sm);
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--line);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.cat:hover{
  transform:translateY(-4px);
  border-color:rgba(34,211,238,.5);
  box-shadow:0 12px 30px rgba(59,130,246,.26);
}
.cat__icon{
  width:38px; height:38px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-tech); font-size:15px; font-weight:700; color:#fff;
  background:var(--grad-main); box-shadow:0 6px 18px rgba(59,130,246,.35);
}
.cat__name{ font-size:13px; color:var(--t-primary); }
.cat:hover .cat__name{ color:#fff; }
.cat__count{ font-size:11px; color:var(--t-muted); font-family:var(--font-tech); }

/* ---------------- 楼层 ---------------- */
.floor{ margin-top:clamp(26px,3.6vw,44px); }
.floor__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:16px;
}
.floor__title{
  display:flex; align-items:center; gap:10px;
  font-size:clamp(17px,1.9vw,21px); font-weight:700; color:var(--t-ink);
}
.floor__title::before{
  content:""; width:4px; height:18px; border-radius:2px;
  background:var(--grad-main); box-shadow:var(--glow);
}
.floor__more{ font-size:13px; color:var(--t-muted); }
.floor__more:hover{ color:var(--c-cyan); }

/* 首页双栏：影片网格 + 侧边排行 */
.floor__split{ display:grid; gap:var(--gap); grid-template-columns:minmax(0,1fr) var(--sidebar); align-items:start; }
.floor__split > *{ min-width:0; }
@media (max-width:960px){ .floor__split{ grid-template-columns:minmax(0,1fr); } }
.side-card{ padding:16px; }

/* ---------------- 推荐大卡（3:1 横幅） ---------------- */
.banner-grid{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.banner{
  position:relative; overflow:hidden; border-radius:var(--radius);
  aspect-ratio:16/9; display:block; border:1px solid var(--line);
  background:linear-gradient(160deg,#0d1430,#111a3a);
}
.banner img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.banner:hover img{ transform:scale(1.08); }
.banner::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(5,8,22,.92) 8%, rgba(5,8,22,.15) 60%, transparent);
}
.banner__body{ position:absolute; inset:auto 0 0 0; z-index:2; padding:14px 16px; }
.banner__title{
  font-size:15px; font-weight:700; color:#fff; margin-bottom:6px;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.banner__desc{
  font-size:12px; color:var(--t-secondary);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ---------------- 快捷筛选条 ---------------- */
.quick{ display:flex; flex-wrap:wrap; gap:8px; }
.quick__link{
  padding:6px 14px; border-radius:999px; font-size:13px; color:var(--t-secondary);
  background:rgba(255,255,255,.05); border:1px solid var(--line);
  transition:all .25s ease;
}
.quick__link:hover,.quick__link.is-on{
  color:#fff; background:rgba(59,130,246,.2); border-color:rgba(34,211,238,.5);
}