/* 过渡与入场。只碰 transform / opacity / filter，不碰布局属性。 */

/* 首屏黑幕：数据就绪后向当前侧栏按钮收缩，像幕布最终变成按钮。 */
.boot {
  --boot-top: 16px;
  --boot-right: calc(100% - 58px);
  --boot-bottom: calc(100% - 58px);
  --boot-left: 16px;
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: #000;
  color: #F2F0EC;
  will-change: clip-path;
}
.boot__content { text-align: center; transition: opacity 180ms ease, transform 180ms ease; }
.boot__title {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.15;
}
.boot__sub { margin-top: 5px; font-size: var(--t-sm); color: #909096; }
.boot__indicator {
  position: relative;
  display: block;
  width: 54px;
  height: 1px;
  margin: var(--s5) auto 0;
  overflow: hidden;
  background: #34343A;
}
.boot__indicator::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #F2F0EC;
  transform: translateX(-100%);
  animation: boot-line 900ms var(--ease) infinite;
}
@keyframes boot-line {
  50%, 100% { transform: translateX(100%); }
}
.boot.is-leaving {
  animation: curtain-close 760ms var(--ease) forwards;
}
.boot.is-leaving .boot__content { opacity: 0; transform: scale(.96); }
@keyframes curtain-close {
  0% { clip-path: inset(0 0 0 0 round 0); opacity: 1; }
  78% {
    clip-path: inset(var(--boot-top) var(--boot-right)
                    var(--boot-bottom) var(--boot-left) round var(--r-pill));
    opacity: 1;
  }
  100% {
    clip-path: inset(var(--boot-top) var(--boot-right)
                    var(--boot-bottom) var(--boot-left) round var(--r-pill));
    opacity: 0;
  }
}
.boot__err {
  max-width: 34ch;
  text-align: center;
  font-size: var(--t-sm);
  color: #B3B3B8;
  line-height: 1.7;
}
.boot__err code { color: #909096; font-size: var(--t-xs); }

/* 这一整段就是本站唯一编排过的入场：画布先浮现，侧边栏和名字随后跟上。
   刻意不给每个区块都套同一个淡入——那会让整页看起来像模板。 */
.field, .sidebar, .focus-label { opacity: 0; }
body.is-ready .field {
  opacity: 1;
  transition: opacity var(--d-slow) var(--ease);
}
body.is-ready .sidebar {
  opacity: 1;
  transition: opacity var(--d-base) var(--ease) 120ms,
              transform var(--d-base) var(--ease);
}
body.is-ready .focus-label {
  opacity: 1;
  transition: opacity var(--d-base) var(--ease) 420ms;
}

/* L2 / L3 */
.panel-layer .scrim { opacity: 0; transition: opacity var(--d-base) var(--ease); }
.panel-layer.is-open .scrim { opacity: 1; }


body.is-locked .stage { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .field, .sidebar, .focus-label { opacity: 1; }
}