/* 进站动画（照 Metalab）：暖白纸上先出现一根深色细线，线是透过一条缝看到的首屏；缝向两边长、再上下张开、最后铺满全屏。
   html.hl-intro：动画进行中；html.hl-intro-nav：顶栏开始滑下；html.hl-intro-ran：这次打开放过进站动画（不会移除，首屏文案的延迟靠它）。 */
:root { --intro-paper: #ecebe6; }
html.hl-intro { background: var(--intro-paper); overflow: hidden; }
html.hl-intro #hero { clip-path: inset(calc(50% - 0.5px) 50% calc(50% - 0.5px) 50%); }
html.hl-intro main > section:not(#hero), html.hl-intro .hl-footer { visibility: hidden; }

/* 首屏文案等窗口张开到一半再出来 */
html.hl-intro-ran #hero { --intro-d: 1.2s; }

/* 顶栏：用独立的 translate 属性，不和顶栏自己的样式抢 transform */
html.hl-intro-ran .hl-nav { transition: translate 1s cubic-bezier(0.19, 1, 0.22, 1), opacity .6s ease; }
html.hl-intro:not(.hl-intro-nav) .hl-nav { translate: 0 -100%; opacity: 0; }

/* 角落里一行很小的字，告诉人这是在打开什么 */
.hl-intro-cap { position: fixed; z-index: 60; left: var(--pad); bottom: 28px; font-size: 13px; letter-spacing: .32em; color: rgba(14, 16, 18, .55);
  pointer-events: none; opacity: 0; animation: hl-cap 1.4s ease .1s forwards; }
.hl-intro-cap + .hl-intro-cap { left: auto; right: var(--pad); letter-spacing: .12em; font-family: var(--mono); }
@keyframes hl-cap { 0% { opacity: 0; } 30%, 70% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html.hl-intro { background: var(--bg); overflow: auto; }
  html.hl-intro #hero { clip-path: none; }
  html.hl-intro main > section, html.hl-intro .hl-footer { visibility: visible; }
}