/* =========================================================
   晶匣 · 分类过渡页（resources/index.html）
   ---------------------------------------------------------
   一个场，不是一副牌。

     立   —— 四片晶片沿环站住，各自有影子落在地上；
     照   —— 立方在圆心发光，晶片的下缘被它照暖；
     收   —— 三道顺时针箭头指向圆心，环是容器的口沿。

   地面三圈环 + 一圈刻度：说明这是一个有边界的容器，
   不是行星轨道。晶片本身仍是全站那块晶体：切棱、薄边、冰面。
   ========================================================= */

/* ---------- 主题色：白天白瓷，夜里暗玻璃 ---------- */
.slabs{
  --cd-f1:#3d2d5c; --cd-f2:#2a1d40; --cd-f3:#211536;
  --cd-e1:#4b3870; --cd-e2:#180e28;
  --cd-t1:#584180; --cd-t2:#3a2960;
  --cd-stroke:rgba(203,170,255,.30);
  --cd-shadow:rgba(2,0,8,.62);
  --cd-cap:1;
  --plate-1:rgba(150,116,214,.17); --plate-2:rgba(130,100,196,.11);
  --plate-3:rgba(120,92,184,.05); --plate-4:rgba(120,92,184,0);
  --dais-1:rgba(201,166,255,.24);
  --dais-2:rgba(160,120,230,.11);
  --dais-3:rgba(120,90,190,0);
}
html[data-time="day"] .slabs,
html[data-time="dawn"] .slabs{
  --cd-f1:#ffffff; --cd-f2:#fcfdfd; --cd-f3:#eef4f4;
  --cd-e1:#e3ecec; --cd-e2:#c9d8d8;
  --cd-t1:#ffffff; --cd-t2:#f3f8f8;
  --cd-stroke:rgba(41,52,58,.15);
  --cd-shadow:rgba(22,56,52,.42);
  --cd-cap:.92;
  --plate-1:rgba(150,206,192,.40); --plate-2:rgba(126,190,174,.26);
  --plate-3:rgba(120,186,170,.12); --plate-4:rgba(120,186,170,0);
  --dais-1:rgba(86,158,142,.46);
  --dais-2:rgba(96,166,150,.22);
  --dais-3:rgba(96,166,150,0);
}
html[data-time="dusk"] .slabs{
  --cd-f1:#4a3050; --cd-f2:#33203c; --cd-f3:#281832;
  --cd-e1:#5a3d5e; --cd-e2:#1d1128;
  --cd-shadow:rgba(8,2,10,.6);
  --cd-t1:#6a4a6c; --cd-t2:#42283f;
}

/* 图里的字号都是装饰，别让拖选把分类名选上 */
.slabs-stage svg{display:block;width:100%;height:100%;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}

/* ---------- 台面：光池、三圈环、刻度、箭头 ---------- */
.dais-plate{pointer-events:none}
.dais-floor{opacity:.95}
.dais-ring{fill:none;stroke:var(--accent);stroke-width:1;
  transform-box:fill-box;transform-origin:center}
.dais-ring.r1{stroke-opacity:.30}
.dais-ring.r2{stroke-opacity:.20}
.dais-ring.r3{stroke-opacity:.13}
.dais-ring.dash{stroke-opacity:.22;stroke-dasharray:3 10;
  animation:daisSpin 46s linear infinite}
@keyframes daisSpin{to{transform:rotate(360deg)}}
.dais-tick{stroke:var(--accent);stroke-opacity:.09;stroke-width:1}
/* 压在前面的那道环沿：卡片站没站在环里，全看这一条 */
.dais-rim{fill:none;stroke:var(--accent);stroke-opacity:.34;stroke-width:1.4}
.dais-arc{fill:none;stroke:var(--accent);stroke-opacity:.42;stroke-width:1.2;
  stroke-linecap:round}
.dais-tip{fill:var(--accent);opacity:.42}

/* ---------- 中心晶立方 ---------- */
.core-pool{pointer-events:none}
.core-cast{opacity:.7;filter:url(#cdCast);pointer-events:none}
/* 点一下晶匣：金色烟花（粒子样式沿用 wiki.css 里的 .sparks/.spark） */
.d-core{cursor:pointer}
.d-core .c-top{fill:url(#slLampTop);stroke:#e0631c;stroke-opacity:.7;stroke-width:1.3}
.d-core .c-left{fill:url(#slLampLeft)}
.d-core .c-right{fill:url(#slLampRight)}
.d-core .c-core{fill:url(#slCore);pointer-events:none;
  animation:dCore 5.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center;
  transition:opacity .55s ease,transform .55s ease}
@keyframes dCore{0%,100%{opacity:.72}50%{opacity:1}}
.d-glow{opacity:.9;animation:dBreath 7.6s ease-in-out infinite;
  transform-box:fill-box;transform-origin:center;transition:opacity .8s ease}
@keyframes dBreath{0%,100%{opacity:.62;transform:scale(1)}50%{opacity:.9;transform:scale(1.04)}}

/* ---------- 一片立着的晶片 ---------- */
.cd{cursor:pointer;outline:none;
  filter:drop-shadow(0 14px 22px rgba(3,0,10,.5));
  transition:opacity .5s ease,filter .5s ease}

/* 漂浮层：微微上下，说明它被场托着，不是插在台面上 */
.cd-drift{animation:cdFloat 9s ease-in-out infinite;
  transform-box:fill-box;transform-origin:50% 100%}
@keyframes cdFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* 起身：翻上来的时候绕脚下那条边抬，像真的被立起来 */
.cd-body{transform-box:fill-box;transform-origin:50% 100%;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
  animation:cdStand .9s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes cdStand{from{opacity:0;transform:translateY(26px) scaleY(.94)}}

/* 面：白瓷 / 暗玻璃 */
.cd-face{fill:url(#cdFace);stroke:var(--cd-stroke);stroke-width:1}
/* 顶棱：俯视才看得见的那一条面，比正面亮一档 —— 卡片"立着"的关键 */
.cd-top{fill:url(#cdTop);stroke:var(--cd-stroke);stroke-width:.7}
/* 右棱：背光的一侧，比正面暗一档 */
.cd-edge{fill:url(#cdEdge);stroke:var(--cd-stroke);stroke-width:.7}
/* 顶口的分类色：一类一个颜色，跟知识库的簇色同一套 */
.cd-cap{opacity:var(--cd-cap);transition:opacity .5s ease}
/* 斜光 */
.cd-sheen{pointer-events:none;opacity:.75;transition:opacity .5s ease}
/* 右下角的折角：纸页的记号，也是分类色第二次出现 */
.cd-corner{opacity:.16;transition:opacity .5s ease,fill .5s ease}

/* 影：身子下面那一小片，紧了才有分量 */
.cd-cast{fill:var(--cd-shadow);opacity:.62;filter:url(#cdCast);pointer-events:none;
  transition:opacity .7s ease,transform .7s ease;
  transform-box:fill-box;transform-origin:center}
/* 接触影：脚底那一小点最暗，缺了它，卡片就是悬空的 */
.cd-touch{fill:var(--cd-shadow);opacity:.8;pointer-events:none;filter:url(#cdCast)}

/* ---------- 面上的字 ---------- */
.cd-idx{font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  fill:var(--muted);opacity:.85;transition:fill .5s ease,opacity .5s ease}
.cd-name{font-family:var(--sans);font-weight:700;letter-spacing:.05em;
  fill:var(--ink);transition:fill .55s ease}
.cd-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  fill:var(--tx-fig,var(--muted));opacity:.9;transition:fill .55s ease}
.cd-kinds{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  fill:var(--muted);opacity:.8;transition:fill .55s ease}
.cd-rule{fill:none;stroke:var(--accent);stroke-opacity:.22;stroke-width:1;
  transition:stroke .5s ease,stroke-opacity .5s ease}

/* ---------- 悬停：只抬起来，不换妆 ----------
   卡片被指到时从环里立起来一点，影子收紧，其余的让开。
   不转金、不改字色 —— 卡面保持原样。 */
.cd:hover .cd-body,
.cd:focus-visible .cd-body{transform:translateY(-16px) scale(1.04)}
.cd:hover .cd-cast,
.cd:focus-visible .cd-cast{opacity:.5;transform:scale(.9)}
.cd:hover,
.cd:focus-visible{
  filter:drop-shadow(0 26px 32px rgba(4,0,12,.5))}

/* 抬起一片，其余退半步 —— 不是消失 */
.deck:has(.cd:hover) .cd:not(:hover),
.deck:has(.cd:focus-visible) .cd:not(:focus-visible){
  opacity:.55;filter:saturate(.72)}

/* 灯塔也跟着亮一下：晶片是被它照亮的 */
.stage:has(.cd:hover) .d-core .c-core,
.stage:has(.cd:focus-visible) .d-core .c-core{opacity:1;transform:scale(1.22)}
.stage:has(.cd:hover) .d-glow,
.stage:has(.cd:focus-visible) .d-glow{opacity:1}

/* ---------- 白天：光要收，影要淡 ---------- */
html[data-time="day"] .cd,
html[data-time="dawn"] .cd{filter:drop-shadow(0 16px 26px rgba(32,68,64,.16))}
html[data-time="day"] .cd:hover,
html[data-time="day"] .cd:focus-visible,
html[data-time="dawn"] .cd:hover,
html[data-time="dawn"] .cd:focus-visible{
  filter:drop-shadow(0 26px 30px rgba(30,64,60,.2))}
html[data-time="day"] .cd-cast,
html[data-time="dawn"] .cd-cast{opacity:.5}
html[data-time="day"] .cd-sheen,
html[data-time="dawn"] .cd-sheen{opacity:.5}
html[data-time="day"] .d-glow,
html[data-time="dawn"] .d-glow{opacity:.42}
html[data-time="day"] .core-pool,
html[data-time="dawn"] .core-pool{opacity:.55}

/* ---------- 字体与提示 ---------- */
.brand-stat{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  fill:var(--muted);opacity:.92}

.sl-note{position:fixed;left:0;right:0;bottom:26px;z-index:4;text-align:center;
  font-family:var(--sans);font-size:13px;letter-spacing:.1em;color:var(--muted);
  pointer-events:none;opacity:.9}
.sl-note a{color:var(--accent);text-decoration:none;pointer-events:auto;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent);padding-bottom:1px}
.sl-note a:hover{color:var(--warm);border-color:var(--warm)}

/* ---------- 窄屏：立不起来，就收成清单 ---------- */
.sl-m{display:none}
@media (max-width:900px){
  .sl-note{display:none}
  .sl-m{display:block;position:relative;z-index:3;max-width:560px;margin:0 auto;
    padding:96px 20px 70px}
  .sl-m .m-head{padding:0 2px 20px;border-bottom:1px solid var(--line)}
  .sl-m .m-head .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--accent)}
  .sl-m .m-head h1{margin:8px 0 6px;font-size:38px;line-height:1.15;font-weight:700}
  .sl-m .m-head p{margin:0;font-size:14px;color:var(--muted);line-height:1.8}
  .sl-m ul{list-style:none;margin:0;padding:0}
  .sl-m li{border-bottom:1px solid var(--line)}
  .sl-m a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
    padding:18px 2px;text-decoration:none;color:var(--ink)}
  .sl-m a:active{background:color-mix(in srgb,var(--accent) 8%,transparent)}
  /* 手机上画不出等轴测，就用 CSS 立一块"薄板"：斜的、有厚边、有分类色带 */
  .sl-m .plate{width:42px;height:54px;position:relative;flex:none;
    border:1px solid var(--cd-stroke);
    background:linear-gradient(160deg,var(--cd-f1),var(--cd-f3));
    box-shadow:3px 3px 0 -1px color-mix(in srgb,var(--tc,var(--accent)) 60%,transparent),
               0 10px 18px -12px rgba(0,0,0,.5)}
  .sl-m .plate::before{content:'';position:absolute;left:0;right:0;top:0;height:5px;
    background:var(--tc,var(--accent));opacity:.9}
  .sl-m .n{font-size:19px;font-weight:700;letter-spacing:.03em}
  .sl-m .s{display:block;margin-top:5px;font-family:var(--mono);font-size:11px;
    letter-spacing:.1em;color:var(--tx-fig,var(--muted))}
  .sl-m .ar{font-family:var(--mono);color:var(--accent);font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .d-glow,.d-core .c-core,.cd-drift,.cd-body,.dais-ring.dash{animation:none!important}
}