/* layz.top · 启动页（手写体：Kalam，SIL OFL，见 static/fonts/OFL-Kalam.txt）
   手写体 wordmark："layz" 逐字写出 → y/z 之间下方渐显一个点 → 整体左移让出 hu 并写出
   → 收到左上角，页面其余内容淡入。
   只出现在首页；样式与首页同一套近黑画布 / 蓝色强调色。 */

/* 字体在 site-header.css 里声明（每个页面都要用），这里不再重复 */

/* 注意：不能给 html 加 overflow:hidden——滚动条消失会让整页横移，落位就对不上了。
   播放期间改为拦下滚动事件，布局宽度始终不变。 */
html.intro-play .site-header,
html.intro-play main { opacity: 0; pointer-events: none; }

/* 落位后的交接全部由 intro.js 用 Web Animations 驱动：
   覆盖层整体淡出 + 顶栏里同位置、同字体的品牌字同时淡入（交叉淡出，看不出切换），
   副标题再晚一拍出现。这里只声明启动页期间的隐藏状态。 */
html.intro-play .site-header .site-brand-text small { opacity: 0; }

.intro { display: none; }

html.intro-play .intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: #090909;
  cursor: pointer;
  overflow: hidden;
}
html.intro-play .intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(255, 255, 255, .055), transparent 64%),
    radial-gradient(80% 60% at 50% 50%, rgba(255, 255, 255, .03), transparent 72%);
  opacity: 0;
  transition: opacity .9s ease;
}
html.intro-play .intro.is-lit::before { opacity: 1; }
html.intro-play .intro::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 72%);
}


.intro-dock {                    /* 只为「收到左上角」服务：动画施加在这一层，词标内部的位移互不影响 */
  display: inline-block;
  transform-origin: 0 0;
  will-change: transform, opacity;
}

.intro-word {
  position: relative;
  display: flex;
  align-items: baseline;
  margin: 0;
  font-family: "layz-hand", "Kalam", "Segoe Script", cursive;
  font-weight: 700;
  font-size: clamp(76px, 17vw, 210px);
  line-height: 1;
  letter-spacing: .005em;
  color: #fff;
  text-shadow: 0 0 38px rgba(255, 255, 255, .16), 0 0 110px rgba(255, 255, 255, .07);
  user-select: none;
}
/* 落位收尾：覆盖层整体由 JS 用 Web Animations 淡出 */
.intro-word span {
  display: inline-block;
  opacity: 0;                      /* JS 逐字写出来之前不可见 */
  transform-origin: 50% 85%;
  will-change: opacity, transform, clip-path;
}
.intro-word .intro-dot {
  color: #0099ff;
  text-shadow: 0 0 18px rgba(0, 153, 255, .38);
}
@media (max-width: 520px) {
  .intro-word { font-size: clamp(64px, 21vw, 110px); }
}
@media (prefers-reduced-motion: reduce) {
  html.intro-play { overflow: auto; }
  html.intro-play .intro { display: none; }
  html.intro-play .site-header,
  html.intro-play main { opacity: 1; pointer-events: auto; }
}