/* ==========================================================================
   焕影Club v18 — 线稿美学 / 立体按钮 / 高级交互
   ========================================================================== */

:root {
  --fig-face: #07111f;
  --fig-line: rgba(196, 216, 240, .34);
  --fig-line-soft: rgba(196, 216, 240, .14);
  --fig-hot: #b8e875;
  --fig-hot-2: #8fe8ff;
  --hair: rgba(158, 188, 222, .1);
  --spot: rgba(143, 232, 255, .09);
  --spot-edge: rgba(184, 232, 117, .38);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}
:root[data-theme="light"] {
  --fig-face: #ffffff;
  --fig-line: rgba(17, 26, 39, .42);
  --fig-line-soft: rgba(17, 26, 39, .12);
  --fig-hot: #4f9a12;
  --fig-hot-2: #0d5fa8;
  --hair: #e8ebf0;
  --spot: rgba(13, 79, 139, .05);
  --spot-edge: rgba(111, 176, 46, .55);
}

/* ---------- 嵌入式线稿：裸放在卡片标题右侧，融入现有版块 ---------- */
.block-head--fig { align-items: center; }
.fig-embed { flex-shrink: 0; margin-left: auto; align-self: center; }
.fig-embed .fig-art { display: block; width: 100%; height: auto; overflow: visible; }
.fig-embed--stack { width: 104px; padding-left: 12px; }
.fig-embed--cubes { width: 100px; padding-left: 12px; }
.sources, .headlines { cursor: default; }
/* 线稿描边：进入视口时逐面绘制 */
.iso-box polygon { fill: var(--fig-face); stroke: var(--fig-line); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke .35s var(--ease); }
.iso-box .iso-top { stroke: color-mix(in srgb, var(--fig-line) 100%, white 12%); }
.iso-box.is-hot polygon { stroke: var(--fig-hot); }
.iso-box.is-hot .iso-top { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--fig-hot) 45%, transparent)); }
.iso-guide { fill: none; stroke: var(--fig-line-soft); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.iso-lens { fill: none; stroke: var(--fig-line); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .35s; }
.is-open .iso-lens { stroke: var(--fig-hot-2); }
.iso-dot { fill: var(--fig-hot); opacity: 0; transition: opacity .3s; }
.is-open .iso-dot { opacity: 1; }
.iso-mark { fill: none; stroke: var(--fig-line-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.iso-box.is-hot .iso-mark { stroke: var(--fig-hot-2); }
.iso-floor circle { fill: var(--fig-line-soft); }

.fx-ready .fig-art:not(.is-drawn) polygon, .fx-ready .fig-art:not(.is-drawn) path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.fx-ready .fig-art:not(.is-drawn) .iso-box polygon { fill-opacity: 0; }
.fig-art.is-drawn polygon, .fig-art.is-drawn .iso-lens, .fig-art.is-drawn .iso-mark {
  animation: figDraw 1.1s var(--ease) both; animation-delay: var(--d, 0ms);
}
@keyframes figDraw { from { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; } 70% { fill-opacity: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; fill-opacity: 1; } }

/* ---------- 指针光晕：卡片描边跟随光标 ---------- */
.card, .follow, .tutorial-rail-item { position: relative; }
.card::after, .follow::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1px; opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), var(--spot-edge), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .35s var(--ease);
}
.card:hover::after, .follow:hover::after { opacity: 1; }

/* ---------- 立体按钮：悬停抬升 + 磁吸偏移 + 按下压缩 ---------- */
.btn, .chip, .theme-toggle, .lang-btn, .icon-btn, .cmdk-hint {
  transform: translate3d(var(--tx, 0), var(--ty, 0), 0);
  transition: transform .28s var(--spring), box-shadow .22s var(--ease), background-color .2s, border-color .2s, color .2s;
}
.chip, .lang-btn, .cmdk-hint { box-shadow: 0 1px 0 var(--line-strong), inset 0 1px 0 rgba(255, 255, 255, .04); }
:root[data-theme="light"] .chip, :root[data-theme="light"] .lang-btn, :root[data-theme="light"] .cmdk-hint { box-shadow: 0 2px 0 #dfe3ea, 0 1px 2px rgba(16, 24, 40, .05); background: #fff; }
.chip.is-magnet, .lang-btn.is-magnet, .cmdk-hint.is-magnet { box-shadow: 0 3px 0 var(--line-strong), 0 10px 20px rgba(0, 0, 0, .18); }
:root[data-theme="light"] .chip.is-magnet, :root[data-theme="light"] .lang-btn.is-magnet, :root[data-theme="light"] .cmdk-hint.is-magnet { box-shadow: 0 3px 0 #d3d9e2, 0 10px 18px rgba(16, 24, 40, .08); }
.chip.active { box-shadow: 0 3px 0 var(--accent-shadow), 0 8px 18px color-mix(in srgb, var(--accent) 22%, transparent); }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::before, .chip.active::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 52%); mix-blend-mode: soft-light;
}
.chip { position: relative; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 34%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); opacity: 0;
}
.btn-primary:hover::after { animation: sheen .9s var(--ease); }
@keyframes sheen { from { left: -40%; opacity: 1; } to { left: 120%; opacity: 0; } }
.btn:active, .chip:active, .lang-btn:active, .cmdk-hint:active, .theme-toggle:active, .icon-btn:active {
  transform: translate3d(var(--tx, 0), calc(var(--ty, 0px) + 2px), 0) scale(.98); transition-duration: .08s;
}
.btn-primary:active, .chip.active:active { box-shadow: 0 1px 0 var(--accent-shadow); }

/* ---------- 列表行：悬停时绿色细线从左侧推入 ---------- */
.feed-row, .headline-row, .trend-row { position: relative; }
.feed-row::before, .headline-row::before {
  content: ""; position: absolute; left: -14px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px;
  background: var(--accent-line); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ease);
}
.feed-row:hover::before, .headline-row:hover::before, .feed-row.is-kfocus::before, .feed-row:focus-visible::before { transform: scaleY(1); }
.feed-row.is-kfocus, .feed-row:focus-visible { outline: none; background: linear-gradient(90deg, var(--accent-soft), transparent 70%); }
.trend-rank { transition: transform .3s var(--spring); }
.trend-row:hover .trend-rank { transform: translateX(3px) skewX(-4deg); }

/* ---------- 滚动渐显 ---------- */
.fx-ready [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--rd, 0ms); }
.fx-ready [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- ⌘K 入口 ---------- */
.cmdk-hint {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 11px; border-radius: 9px;
  border: 1px solid var(--line-strong); color: var(--text-3); font-size: 12.5px; background: var(--surface);
}
.cmdk-hint svg { width: 15px; height: 15px; }
.cmdk-hint:hover { color: var(--text); border-color: var(--text-3); }
kbd {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px;
  font-family: var(--mono); font-size: 10.5px; color: var(--text-2);
  border: 1px solid var(--line-strong); border-bottom-width: 2px; background: var(--surface-2);
}

/* ---------- ⌘K 面板 ---------- */
.cmdk { position: fixed; inset: 0; z-index: 90; display: grid; justify-items: center; align-items: start; padding: 12vh 16px 16px; }
.cmdk[hidden] { display: none; }
.cmdk-backdrop { position: absolute; inset: 0; background: rgba(3, 9, 18, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .22s var(--ease); }
:root[data-theme="light"] .cmdk-backdrop { background: rgba(17, 26, 39, .22); }
.cmdk-panel {
  position: relative; width: min(640px, 100%); max-height: 70vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  border-radius: 16px; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05); overflow: hidden;
  opacity: 0; transform: translateY(-8px) scale(.98); transition: opacity .22s var(--ease), transform .3s var(--spring);
}
:root[data-theme="light"] .cmdk-panel { box-shadow: 0 30px 70px rgba(16, 24, 40, .18); background: #fff; }
.cmdk.is-on .cmdk-backdrop { opacity: 1; }
.cmdk.is-on .cmdk-panel { opacity: 1; transform: none; }
.cmdk-input { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--text-3); }
.cmdk-input svg { width: 18px; height: 18px; flex-shrink: 0; }
.cmdk-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; }
.cmdk-input kbd { cursor: pointer; }
.cmdk-list { overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.cmdk-group { padding: 10px 10px 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--text-3); text-transform: uppercase; }
.cmdk-row {
  position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%;
  min-height: 42px; padding: 8px 10px; border-radius: 10px; text-align: left; color: var(--text-2); font-size: 14.5px;
}
.cmdk-row svg { width: 18px; height: 18px; color: var(--text-3); }
.cmdk-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-label small { display: block; margin-top: 2px; color: var(--text-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.cmdk-row--item .cmdk-label { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cmdk-go { opacity: 0; font-family: var(--mono); font-size: 12px; color: var(--accent-text); transition: opacity .15s; }
.cmdk-row.is-active { background: var(--surface-2); color: var(--text); }
.cmdk-row.is-active::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--accent-line); }
.cmdk-row.is-active svg { color: var(--accent-text); }
.cmdk-row.is-active .cmdk-go { opacity: 1; }
.cmdk-empty { padding: 28px 12px; text-align: center; color: var(--text-3); font-size: 14px; }
.cmdk-foot { display: flex; gap: 18px; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 12px; }
.cmdk-foot span { display: inline-flex; align-items: center; gap: 4px; }
.cmdk-foot i { font-style: normal; margin-left: 2px; }
html.cmdk-open { overflow: hidden; }

/* ---------- 响应式 ---------- */
@media (max-width: 899px) {
  .fig-embed--stack { width: 92px; }
  .fig-embed--cubes { width: 88px; }
  .cmdk-hint .cmdk-hint-text, .cmdk-hint kbd { display: none; }
  .cmdk-hint { width: 38px; padding: 0; justify-content: center; border-color: transparent; background: transparent; box-shadow: none; }
  :root[data-theme="light"] .cmdk-hint { background: transparent; box-shadow: none; }
  .cmdk-foot-jk { display: none !important; }
  .cmdk { padding-top: 8vh; }
  .feed-row::before, .headline-row::before { left: -10px; }
}
@media (max-width: 640px) {
}
@media (prefers-reduced-motion: reduce) {
  .fx-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
  .fig-art.is-drawn polygon, .fig-art.is-drawn .iso-lens, .fig-art.is-drawn .iso-mark { animation: none; }
  .fx-ready .fig-art:not(.is-drawn) polygon, .fx-ready .fig-art:not(.is-drawn) path { stroke-dasharray: none; stroke-dashoffset: 0; }
  .fx-ready .fig-art:not(.is-drawn) .iso-box polygon { fill-opacity: 1; }
}