/* ---- 载入：笔尖扫描，纸面随笔路显形 ---- */
.boot{
  position:fixed;inset:0;z-index:100;
  display:none;flex-direction:column;align-items:center;justify-content:center;
}
/* 黑场单独一层，收场只改不透明度 */
.boot::before{
  content:"";position:absolute;inset:0;z-index:0;background:#000;
  transition:opacity .7s ease;
}
html.boot-on .boot{display:flex}
html.boot-on,html.boot-on body{overflow:hidden}
.boot-out{pointer-events:none}
.boot-out::before{opacity:0}
.boot-sig{position:relative;z-index:2;width:min(74vw,520px)}
.boot-cv{display:block;width:100%;height:auto}
.boot-hint{
  position:relative;z-index:2;
  margin:clamp(28px,6vh,56px) 0 0;padding:0;border:0;background:none;
  font:11px/1 var(--sans);letter-spacing:.44em;text-indent:.44em;color:var(--ash);
  cursor:pointer;opacity:0;transition:opacity 1.1s ease .1s;
}
.hint-in .boot-hint{opacity:1}
/* 点下的那一刻就开始退，赶在整层撤走之前退干净 */
.boot-out .boot-hint{opacity:0;transition:opacity .3s ease}
.boot-hint:hover{color:var(--smoke)}

/* ---- 底图：载入层从清晰推到模糊，页面背景停在终态 ---- */
/* 载入层永远是首页那张图，与页面底图起始状态重合 */
.boot-art-b{
  background:
    linear-gradient(rgba(15,15,15,.82),rgba(15,15,15,.82)),
    #0f0f0f url("../media/picture/Arcane-AuthorNullRain.jpg") no-repeat 0% 40% / cover;
}
/* 页面底图是两层图加一层压暗：平时只有下面那层，换板块时旧图临时盖到上面那层
   被擦掉（见 scene.js 的 wipe）。缩放放外层、模糊放内层——两层各动一样，
   收尾才不会为「最终半径 × 最终比例」再算一遍整屏；模糊多留 6% 余量，
   半径再大也不在边缘露出透明 */
.backdrop{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  overflow:hidden;background:#0f0f0f;
}
.bd-zoom{
  position:absolute;inset:0;transform:scale(1.06);
  transition:transform .42s ease;will-change:transform;
}
.bd-art{
  position:absolute;inset:0;filter:blur(10px);
  transition:filter .42s ease;will-change:filter;
}
/* 清晰态：模糊归零，同时收回那 6% 余量 */
.bd-zoom.is-sharp{transform:scale(1)}
.bd-art.is-sharp{filter:blur(0)}
.bd-img{
  position:absolute;inset:0;
  background:no-repeat 0% 40% / cover;
}
#bdBase{background-image:url("../media/picture/Arcane-AuthorNullRain.jpg")}
.bd-over{will-change:clip-path}
/* 吾之诀专用：底图整张保持清晰，模糊只落在文字那一条带里，横向分界、纵向到顶。
    左右两缘与羽化在 base.css 的 --frost-mask 里，与同一页的网点共用；
    定位与取图沿用 .bd-img */
.bd-frost{
  pointer-events:none;
  filter:blur(10px);
  opacity:0;transition:opacity .72s ease;
  mask-image:var(--frost-mask);
}
html[data-scene="about"] .bd-frost{opacity:1}
.bd-veil{
  position:absolute;inset:0;
  background:linear-gradient(rgba(15,15,15,.82),rgba(15,15,15,.82));
}
/* 外层只做推近与淡出 */
.boot-art{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:0;transition:opacity 1.6s ease,transform .78s ease;
  will-change:transform;
}
.boot.art-in .boot-art{opacity:1}
.boot.boot-out .boot-art{
  opacity:0;transform:scale(1.06);
  transition:opacity .78s ease,transform .78s ease;
}
/* 内层只动模糊半径 */
.boot-art-b{
  position:absolute;inset:0;transition:filter .78s ease;
  will-change:filter;
}
.boot.boot-out .boot-art-b{filter:blur(10px)}

/* 窄屏模糊减半，页面底图与载入层要停在同一档 */
@media (max-width:860px){
  .bd-art{filter:blur(6px)}
  .bd-frost{filter:blur(6px)}
  .boot.boot-out .boot-art-b{filter:blur(6px)}
}

@media (prefers-reduced-motion:reduce){
  .boot::before,.boot-hint,.mark-sig,.boot-art,.boot-art-b{transition:none}
}