/* ============================================================
   出场：四间屋，四种开法
   只在进入时演一次，不挡内容、不依赖 JS 也能看
   ============================================================ */
.enter-curtain{
  position:fixed;inset:0;z-index:99;pointer-events:none;
  display:grid;grid-template-rows:1fr 1fr;grid-template-columns:1fr;
}
.enter-curtain i{display:block;background:var(--enter,#175a57);will-change:transform,opacity}
html:not(.js-enter) .enter-curtain{display:none}

/* 颜色：各间自己那口 */
html[data-enter="book"]{--enter:#a63a26}
html[data-enter="reel"]{--enter:#141210}
html[data-enter="pan"]{--enter:#2e6f7e}
html[data-enter="glow"]{--enter:#0e1114}

/* 默认：上下分开 */
html.js-enter .enter-curtain i{transition:transform .95s cubic-bezier(.76,0,.24,1)}
html.js-enter.enter-open .enter-curtain i:first-child{transform:translateY(-101%)}
html.js-enter.enter-open .enter-curtain i:last-child{transform:translateY(101%)}

/* 相册：左右分开，像合上一本书 */
html[data-enter="book"] .enter-curtain{grid-template-rows:1fr;grid-template-columns:1fr 1fr}
html[data-enter="book"].js-enter.enter-open .enter-curtain i:first-child{transform:translateX(-101%)}
html[data-enter="book"].js-enter.enter-open .enter-curtain i:last-child{transform:translateX(101%)}

/* 作品：幕布往上卷 */
html[data-enter="reel"] .enter-curtain{grid-template-rows:1fr;grid-template-columns:1fr}
html[data-enter="reel"] .enter-curtain i:last-child{display:none}
html[data-enter="reel"].js-enter .enter-curtain i:first-child{transition-duration:1.45s}
html[data-enter="reel"].js-enter.enter-open .enter-curtain i:first-child{transform:translateY(-101%)}

/* 风景：左右反向，像车窗 */
html[data-enter="pan"] .enter-curtain{grid-template-rows:1fr;grid-template-columns:1fr 1fr}
html[data-enter="pan"].js-enter.enter-open .enter-curtain i:first-child{transform:translateX(101%)}
html[data-enter="pan"].js-enter.enter-open .enter-curtain i:last-child{transform:translateX(-101%)}

/* 伙伴：不拉帘，亮起来 */
html[data-enter="glow"] .enter-curtain{grid-template-rows:1fr;grid-template-columns:1fr}
html[data-enter="glow"] .enter-curtain i:last-child{display:none}
html[data-enter="glow"].js-enter .enter-curtain i{transition:opacity 1.25s ease}
html[data-enter="glow"].js-enter.enter-open .enter-curtain i:first-child{opacity:0}

@media (prefers-reduced-motion:reduce){
  .enter-curtain{display:none!important}
}