/* ═══════════════════════════════════════════════════════════════
   Lớp điện ảnh — nhịp vào, chương mục, chiều sâu.
   Không thêm nội dung. Chỉ thêm thời điểm.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Màn mở: một đường kẻ chạy ngang rồi nâng lên ─────────── */
.curtain{
  position:fixed;
  inset:0;
  z-index:9000;
  background:var(--ink);
  display:grid;
  place-items:center;
  pointer-events:none;
  animation:curtainLift .9s cubic-bezier(.76,0,.24,1) 1.05s forwards;
}
.curtain__line{
  width:min(52vw,520px);
  height:1px;
  background:linear-gradient(90deg,transparent,var(--acid),var(--cyan),transparent);
  transform:scaleX(0);
  transform-origin:left;
  animation:lineDraw .95s cubic-bezier(.76,0,.24,1) .1s forwards;
}
.curtain__mark{
  position:absolute;
  font-family:var(--f-mono);
  font-size:9px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--dim-2);
  transform:translateY(26px);
  opacity:0;
  animation:fadeUp .7s ease-out .5s forwards;
}
@keyframes lineDraw{to{transform:scaleX(1)}}
@keyframes fadeUp{to{opacity:1;transform:translateY(14px)}}
@keyframes curtainLift{
  to{transform:translateY(-101%);opacity:0}
}

/* ── 2. Dải chương bên phải ──────────────────────────────────── */
.chapters{
  position:fixed;
  right:clamp(10px,2vw,26px);
  top:50%;
  transform:translateY(-50%);
  z-index:70;
  display:none;
  flex-direction:column;
  gap:14px;
  align-items:flex-end;
}
.chapters__item{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--f-mono);
  font-size:9px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--dim-2);
  text-decoration:none;
  opacity:.5;
  transition:opacity .3s linear,color .3s linear;
}
.chapters__item::after{
  content:"";
  width:16px;
  height:1px;
  background:currentColor;
  transition:width .34s cubic-bezier(.16,.84,.24,1);
}
.chapters__item:hover{opacity:1;color:var(--bone)}
.chapters__item.is-on{opacity:1;color:var(--acid)}
.chapters__item.is-on::after{width:34px}

/* ── 3. Vào trang: nội dung nổi lên chậm hơn nhịp thường ─────── */
.js .hero__title,
.js .hero__body,
.js .figures{
  animation:heroIn 1s cubic-bezier(.16,.84,.24,1) 1.15s both;
}
@keyframes heroIn{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}

/* ── 4. Đường kẻ mảnh vẽ ra khi mỗi khối vào khung ───────────── */
.band__head{position:relative}
.band__head::before{
  content:"";
  position:absolute;
  left:0;top:-18px;
  width:min(120px,22%);
  height:1px;
  background:var(--line-2);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .8s cubic-bezier(.16,.84,.24,1);
}
.band__head.in-view::before{transform:scaleX(1)}

@media (min-width:1280px){
  .chapters{display:flex}
}

@media (prefers-reduced-motion:reduce){
  .curtain{display:none}
  .js .hero__title,.js .hero__body,.js .figures{animation:none}
  .band__head::before{transform:scaleX(1)}
}