/* ══ 典藏级动画 · 控制条 · 响应式 ══ */

.slide.on .hold>*,.slide.on .lay-cover>*,.slide.on .lay-chapter>*,.slide.on .lay-event>*,
.slide.on .lay-figure>*,.slide.on .lay-state>*,.slide.on .lay-notes>*,.slide.on .lay-end>*{
  animation:rise .68s var(--ease) both}
.slide.on .eyebrow{animation:wipe .56s var(--ease) both}
.slide.on .h-max,.slide.on .h-mid,.slide.on .f-name,.slide.on .ch-num,.slide.on .crest-panel h2{
  animation:titleUp .74s cubic-bezier(.14,.88,.14,1) both;animation-delay:.07s}
.slide.on .lede{animation:rise .68s var(--ease) both;animation-delay:.16s}
.slide.on .prose{animation:rise .68s var(--ease) both;animation-delay:.22s}
.slide.on .hr{animation:stretch .82s var(--ease) both;animation-delay:.3s}
.slide.on .cite{animation:rise .7s var(--ease) both;animation-delay:.36s}
.slide.on .fact,.slide.on .g-cell,.slide.on .note,.slide.on .hit,
.slide.on .zone-card,.slide.on .tl-row,.slide.on .line,.slide.on .chip{animation:cell .58s var(--ease) both}
.slide.on .fact:nth-child(1),.slide.on .g-cell:nth-child(1),.slide.on .note:nth-child(1),.slide.on .hit:nth-child(1),
.slide.on .zone-card:nth-child(1),.slide.on .tl-row:nth-child(1),.slide.on .line:nth-child(1),.slide.on .chip:nth-child(1){animation-delay:.26s}
.slide.on .fact:nth-child(2),.slide.on .g-cell:nth-child(2),.slide.on .note:nth-child(2),.slide.on .hit:nth-child(2),
.slide.on .zone-card:nth-child(2),.slide.on .tl-row:nth-child(2),.slide.on .line:nth-child(2),.slide.on .chip:nth-child(2){animation-delay:.33s}
.slide.on .fact:nth-child(3),.slide.on .g-cell:nth-child(3),.slide.on .note:nth-child(3),.slide.on .hit:nth-child(3),
.slide.on .zone-card:nth-child(3),.slide.on .tl-row:nth-child(3),.slide.on .line:nth-child(3),.slide.on .chip:nth-child(3){animation-delay:.4s}
.slide.on .note:nth-child(4),.slide.on .hit:nth-child(4),.slide.on .zone-card:nth-child(4),
.slide.on .tl-row:nth-child(4),.slide.on .line:nth-child(4){animation-delay:.47s}
.slide.on .zone-card:nth-child(5),.slide.on .tl-row:nth-child(5),.slide.on .line:nth-child(5),.slide.on .note:nth-child(5){animation-delay:.54s}
.slide.on .zone-card:nth-child(6),.slide.on .tl-row:nth-child(6),.slide.on .line:nth-child(6),.slide.on .note:nth-child(6){animation-delay:.61s}
.slide.on .face{animation:faceIn .9s cubic-bezier(.14,.88,.12,1) both}
.slide.on .crest{animation:sealIn .9s cubic-bezier(.14,.9,.12,1) both;animation-delay:.12s}
.slide.on .chrono{animation:slab .78s cubic-bezier(.16,.86,.14,1) both}
.slide.on .big-num,.slide.on .end-sign{animation:phantom 1.25s var(--ease) both}
.slide.on .ghost{animation:phantom 1.7s var(--ease) both}
.slide.on.rev .hold>*,.slide.on.rev .lay-cover>*,.slide.on.rev .lay-chapter>*,.slide.on.rev .lay-event>*,
.slide.on.rev .lay-figure>*,.slide.on.rev .lay-state>*,.slide.on.rev .lay-notes>*,.slide.on.rev .lay-end>*,
.slide.on.rev .lede,.slide.on.rev .prose,.slide.on.rev .cite{animation-name:fall}
@keyframes rise{from{opacity:0;transform:translate3d(0,30px,0)}to{opacity:1;transform:none}}
@keyframes fall{from{opacity:0;transform:translate3d(0,-24px,0)}to{opacity:1;transform:none}}
@keyframes titleUp{from{opacity:0;transform:translate3d(0,40px,0)}to{opacity:1;transform:none}}
@keyframes wipe{from{opacity:0;transform:translate3d(-22px,0,0)}to{opacity:1;transform:none}}
@keyframes cell{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
@keyframes stretch{from{opacity:0;transform:scaleX(0);transform-origin:left}to{opacity:1;transform:none}}
@keyframes slab{from{opacity:0;transform:translate3d(-36px,0,0)}to{opacity:1;transform:none}}
@keyframes faceIn{from{opacity:0;transform:translate3d(-28px,18px,0) scale(.95)}to{opacity:1;transform:none}}
@keyframes sealIn{from{opacity:0;transform:scale(.68) rotate(-18deg)}to{opacity:1;transform:none}}
@keyframes phantom{from{opacity:0;transform:translate3d(0,38px,0) scale(1.06)}to{opacity:1;transform:none}}

/* 扫光 */
.sweep{position:fixed;z-index:30;top:var(--bar-t);left:0;right:0;bottom:var(--bar-b);pointer-events:none;opacity:0}
.sweep.go{animation:sweepRun .68s var(--ease)}
.sweep::before{content:"";position:absolute;inset:0;
  background:linear-gradient(104deg,transparent 37%,color-mix(in srgb,var(--accent) 24%,transparent) 50%,transparent 63%)}
@keyframes sweepRun{0%{opacity:0;transform:translateX(-46%)}32%{opacity:.95}100%{opacity:0;transform:translateX(46%)}}

/* 点击区 */
.tapzone{position:fixed;z-index:20;top:var(--bar-t);bottom:var(--bar-b);width:20%;background:transparent}
.tapzone.l{left:0;cursor:w-resize}
.tapzone.r{right:0;cursor:e-resize}

/* 底栏 */
.bar-b{position:fixed;z-index:60;left:0;right:0;bottom:0;height:var(--bar-b);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(14px,3vw,34px);padding:0 var(--pad-x);
  border-top:1px solid var(--hairline);background:linear-gradient(0deg,rgba(5,8,13,.99) 18%,rgba(5,8,13,.66))}
.nav{position:relative;height:42px;display:inline-flex;align-items:center;gap:10px;padding:0 19px;overflow:hidden;
  color:#e3e7e0;border:1px solid var(--hairline);background:rgba(255,255,255,.03);transition:.2s var(--ease)}
.nav:hover:not(:disabled){border-color:var(--line-2);background:rgba(255,255,255,.08);transform:translateY(-1px)}
.nav:disabled{opacity:.24;cursor:not-allowed}
.nav.go{border-color:color-mix(in srgb,var(--accent) 50%,transparent);
  background:linear-gradient(114deg,color-mix(in srgb,var(--accent) 22%,transparent),rgba(255,255,255,.02))}
.nav.go::after{content:"";position:absolute;inset:0;transform:translateX(-128%);
  background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);transition:transform .6s var(--ease)}
.nav.go:hover::after{transform:translateX(128%)}
.nav b{font:600 14.5px/1 var(--serif)}
.nav span{font-size:11px;letter-spacing:.12em}
.gaugebar{min-width:0}
.track{position:relative;height:2px;background:rgba(255,255,255,.1);overflow:hidden}
.track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--gold));
  box-shadow:0 0 14px color-mix(in srgb,var(--accent) 62%,transparent);transition:width .36s var(--ease)}
.ticks{display:flex;gap:3px;margin-top:10px}
.tick{flex:1;height:2px;background:rgba(255,255,255,.09);transition:background-color .26s}
.tick.past{background:color-mix(in srgb,var(--accent) 48%,transparent)}
.tick.now{background:var(--accent);box-shadow:0 0 10px var(--accent)}
.readout{display:flex;justify-content:space-between;gap:14px;margin-top:9px;color:var(--fg-3);
  font:8px/1.2 var(--mono);letter-spacing:.18em}
.readout b{color:#d5dad4;font-weight:400;max-width:54vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 目录 */
.drawer{position:fixed;z-index:80;top:0;right:0;bottom:0;width:min(420px,91vw);display:grid;grid-template-rows:var(--bar-t) 1fr;
  transform:translateX(104%);border-left:1px solid var(--line-2);background:var(--ink-1);
  box-shadow:-30px 0 80px rgba(0,0,0,.65);transition:transform .32s var(--ease)}
.drawer.open{transform:none}
.d-head{display:flex;align-items:center;justify-content:space-between;padding:0 19px;border-bottom:1px solid var(--hairline)}
.d-head h2{font:600 15.5px/1 var(--serif);letter-spacing:.12em}
.d-body{overflow:auto;padding:15px 17px 34px}
.d-group{margin-bottom:22px}
.d-group h3{margin-bottom:9px;color:color-mix(in srgb,var(--accent) 78%,white);
  font:7.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase}
.d-link{position:relative;width:100%;display:grid;grid-template-columns:34px 1fr;gap:10px;padding:11px 9px;
  color:#d6dbd4;text-align:left;border-bottom:1px solid var(--hairline);transition:.18s}
.d-link::before{content:"";position:absolute;left:0;top:50%;width:0;height:1px;background:var(--accent);transition:width .24s}
.d-link:hover{background:rgba(255,255,255,.045)}
.d-link.on{padding-left:17px;background:color-mix(in srgb,var(--accent) 11%,transparent)}
.d-link.on::before{width:11px}
.d-link span{color:var(--fg-3);font:8px/1.45 var(--mono)}
.d-link b{font-size:11px;font-weight:500;line-height:1.48}
.scrim{position:fixed;z-index:70;inset:0;opacity:0;pointer-events:none;background:rgba(0,0,0,.64);transition:opacity .24s}
.scrim.show{opacity:1;pointer-events:auto}
.toast{position:fixed;z-index:90;left:50%;bottom:calc(var(--bar-b) + 20px);padding:11px 17px;opacity:0;
  transform:translate(-50%,10px);border:1px solid var(--line-2);background:var(--ink-3);color:#e0e5de;
  font-size:10px;letter-spacing:.08em;pointer-events:none;transition:.24s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* 响应式 */
@media(max-width:1120px){
  .lay-cover,.lay-state,.lay-notes,.lay-figure,.lay-end{grid-template-columns:1fr}
  .big-num,.end-sign{display:none}
  .zones{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lay-event{grid-template-columns:minmax(152px,.4fr) 1fr}
  .face{max-height:25vh;aspect-ratio:auto;height:25vh}
  .lay-figure{gap:20px}
}
@media(max-width:760px){
  :root{--bar-t:58px;--bar-b:66px;--pad-x:16px}
  .bar-t{grid-template-columns:1fr auto}
  .crumb{display:none}
  .brand-txt small,.act span{display:none}
  .slide{padding:14px 16px}
  .h-max{font-size:clamp(33px,10.4vw,52px);margin:11px 0 13px}
  .h-mid{font-size:clamp(25px,7.8vw,40px)}
  .lede{font-size:13.5px;line-height:1.7}
  .prose{font-size:11.5px;line-height:1.74;margin-top:10px}
  .facts,.gauge{grid-template-columns:1fr}
  .fact,.g-cell{padding:10px 12px}
  .lay-chapter{grid-template-columns:1fr;gap:4px}
  .ch-num{font-size:62px}
  .lay-event{grid-template-columns:1fr;gap:12px}
  .chrono{flex-direction:row;align-items:flex-end;justify-content:space-between;padding:14px 16px}
  .c-date{font-size:29px}
  .c-era{margin-top:5px}
  .c-clock{margin-top:0;padding-top:0;border-top:0;text-align:right}
  .c-clock b{font-size:16px}
  .c-clock span{margin-top:4px;font-size:7px}
  .hits{margin-top:12px}
  .hit{padding:9px 11px 9px 25px;font-size:10.5px}
  .face{height:18vh;min-height:112px}
  .face b{margin-bottom:14%;font-size:22px}
  .f-name{font-size:clamp(26px,8.4vw,38px);margin:8px 0 10px}
  .chips{margin-top:12px}
  .cite{margin-top:14px;padding:13px 14px 13px 27px;font-size:12.5px}
  .crest{width:52px;height:52px;margin-bottom:14px;font-size:20px}
  .crest-panel{padding:17px}
  .crest-panel h2{font-size:26px}
  .s-motto{margin-top:15px;padding-top:13px;font-size:11.5px}
  .p-body{padding:13px;gap:11px}
  .line{grid-template-columns:1fr;gap:2px;padding:7px 0}
  .line b{text-align:left}
  .notes{grid-template-columns:1fr;gap:7px;margin-top:13px}
  .note{padding:12px}
  .zones{grid-template-columns:1fr;gap:7px;margin-top:13px}
  .zone-card{padding:12px}
  .tl{margin-top:15px;padding-left:28px;gap:12px}
  .tl-row{grid-template-columns:1fr;gap:2px}
  .tl-row::before{left:-26px}
  .tapzone{display:none}
  .nav{height:38px;padding:0 14px}
  .nav span{display:none}
  .readout b{max-width:44vw}
  .ghost{font-size:136px}
  .stamp{right:16px;top:11px}
}
@media(max-height:640px) and (min-width:761px){
  .h-max{font-size:clamp(33px,5vw,62px)}
  .h-mid{font-size:clamp(25px,3.5vw,44px)}
  .lede{font-size:13.5px;line-height:1.64}
  .facts{margin-top:15px}
  .fact{padding:10px 12px}
  .face{max-height:41vh}
  .notes{margin-top:13px}
  .tl{margin-top:15px;gap:11px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}