/* ===== 百叶窗横条：盖在主页背景图上（static/js/blinds.js 驱动） =====
   层级与 .hero-bg 完全一致：同样 fixed、同样的 top/height、z-index:0，
   靠 DOM 顺序排在 #hero-bg 之后 → 盖住背景图、但在 z-index:1 的页面内容之下。
   横条由 JS 生成，--n = 横条总数，--i = 该横条自上而下的序号。 */

.blinds-bars {
  position: fixed;
  top: -8vh;                /* 与 .hero-bg 对齐 */
  left: 0;
  width: 100%;
  height: 116vh;            /* 与 .hero-bg 对齐 */
  z-index: 0;
  pointer-events: none;
}

/* 一根横条占一整格；只改 scaleY，在格子内部开合，不触发重排 */
.blinds-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(100% / var(--n, 12));
  top: calc(var(--i, 0) * 100% / var(--n, 12));
  background: #000;
  transform-origin: center center;
  will-change: transform;
}