/* ================================================
   enhancements.css — Atelier Editorial 增强层
   纯增量层，加载在所有样式之后，不修改任何既有文件。
   回滚方法：从 index.html 删除本 <link> 即可。
   设计方向：精致编辑风 + 暖调阴影 + 有机微动效
   ================================================ */

/* ===== 全局润色 ===== */

/* 文本选中色 */
::selection{
  background:color-mix(in srgb,var(--accent) 22%,transparent);
  color:var(--text-1);
}
::-moz-selection{
  background:color-mix(in srgb,var(--accent) 22%,transparent);
  color:var(--text-1);
}

/* 全局滚动条精致化（WebKit） */
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--text-3) 35%,transparent);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{
  background:color-mix(in srgb,var(--text-3) 55%,transparent);
  background-clip:padding-box;
  border:2px solid transparent;
}
/* Firefox */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--text-3) 35%,transparent) transparent}

/* 键盘聚焦环（无障碍，仅键盘导航显示） */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ===== 首屏 Hero 增强 ===== */

/* 首屏渐变光晕背景 */
.home-view{
  position:relative;
}
.home-view::before{
  content:'';
  position:absolute;
  top:-40px;left:-20px;right:-20px;
  height:340px;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(ellipse 50% 60% at 18% 30%,color-mix(in srgb,var(--accent) 8%,transparent) 0%,transparent 70%),
    radial-gradient(ellipse 40% 50% at 82% 40%,color-mix(in srgb,var(--accent-2) 6%,transparent) 0%,transparent 70%);
  opacity:.9;
}
/* 深色主题下光晕更明显 */
[data-theme="tokyo-night"] .home-view::before,
[data-theme="dracula"] .home-view::before,
[data-theme="catppuccin-mocha"] .home-view::before{
  background:
    radial-gradient(ellipse 50% 60% at 18% 30%,color-mix(in srgb,var(--accent) 14%,transparent) 0%,transparent 70%),
    radial-gradient(ellipse 40% 50% at 82% 40%,color-mix(in srgb,var(--accent-2) 10%,transparent) 0%,transparent 70%);
}
.home-view > *{position:relative;z-index:1}

/* 首屏标题装饰：左侧竖线 */
.page-title{
  position:relative;
  padding-left:18px;
}
.page-title::before{
  content:'';
  position:absolute;
  left:0;top:6px;bottom:6px;
  width:4px;border-radius:999px;
  background:var(--grad,linear-gradient(180deg,var(--accent),var(--accent-2)));
}
/* 移除上一轮 main.css 加的标题下划线（与竖线重复） */
.page-title::after{display:none}

/* 首屏描述渐入 */
.page-desc{
  animation:enh-fade-in .6s var(--ease-out,cubic-bezier(.22,1,.36,1)) .15s both;
}
@keyframes enh-fade-in{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

/* ===== 幻灯片容器增强 ===== */

/* 嵌入式幻灯片容器：更精致的边框与内阴影 */
.deck-container{
  position:relative;
}
.deck-container::after{
  content:'';
  position:absolute;inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 6%,transparent);
  z-index:5;
}

/* ===== 幻灯片组件增强 ===== */

/* --- 卡片系统 (.card / .concept-card) --- */
.deck-container .card,
.deck-container .concept-card{
  transition:transform .3s var(--ease-out,cubic-bezier(.22,1,.36,1)),
             box-shadow .3s var(--ease-out,cubic-bezier(.22,1,.36,1)),
             border-color .3s var(--ease-out,cubic-bezier(.22,1,.36,1));
}
.deck-container .card:hover,
.deck-container .concept-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(0,0,0,.1),0 4px 12px rgba(0,0,0,.05);
}

/* --- 流程图 (.flow) --- */
.deck-container .flow .node{
  transition:transform .3s var(--ease-out,cubic-bezier(.22,1,.36,1)),
             box-shadow .3s var(--ease-out,cubic-bezier(.22,1,.36,1)),
             border-color .3s var(--ease-out,cubic-bezier(.22,1,.36,1));
}
.deck-container .flow .node:hover{
  transform:translateY(-4px) scale(1.02);
  border-color:var(--accent);
  box-shadow:0 12px 32px rgba(0,0,0,.1),0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent);
}
/* 高亮节点持续微光 */
.deck-container .flow .node.hl{
  animation:enh-pulse-soft 3s ease-in-out infinite;
}
@keyframes enh-pulse-soft{
  0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent),var(--shadow,0 10px 30px rgba(0,0,0,.08))}
  50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 24%,transparent),var(--shadow,0 10px 30px rgba(0,0,0,.08))}
}
/* 流程箭头渐变着色 */
.deck-container .flow .arr{
  background:linear-gradient(90deg,var(--text-3),var(--accent),var(--text-3));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  opacity:.6;
}

/* --- 步骤 (.steps .step) --- */
.deck-container .steps .step{
  transition:transform .3s var(--ease-out,cubic-bezier(.22,1,.36,1)),
             box-shadow .3s var(--ease-out,cubic-bezier(.22,1,.36,1));
}
.deck-container .steps .step:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,.1),0 4px 12px rgba(0,0,0,.05);
}
/* 步骤编号圆：渐变背景 + 微光 */
.deck-container .steps .step .num{
  background:var(--grad,linear-gradient(135deg,var(--accent),var(--accent-2)));
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 35%,transparent),
             0 0 0 4px color-mix(in srgb,var(--accent) 8%,transparent);
}
.deck-container .steps .step:hover .num{
  transform:scale(1.08);
  transition:transform .3s var(--ease-out,cubic-bezier(.22,1,.36,1));
}

/* --- 水平时间线 (.tl) --- */
/* 时间线连接线渐变 */
.deck-container .tl::before{
  background:linear-gradient(90deg,
    transparent 0%,
    var(--accent) 15%,
    var(--accent-2,var(--accent)) 50%,
    var(--accent) 85%,
    transparent 100%);
  opacity:.3;
  height:2px;
}
/* 时间线圆点脉冲 */
.deck-container .tl .dot{
  animation:enh-dot-pulse 2.5s ease-in-out infinite;
}
@keyframes enh-dot-pulse{
  0%,100%{box-shadow:0 0 0 2px var(--accent),0 0 0 0 color-mix(in srgb,var(--accent) 30%,transparent)}
  50%{box-shadow:0 0 0 2px var(--accent),0 0 0 8px color-mix(in srgb,var(--accent) 0%,transparent)}
}
.deck-container .tl .item{
  transition:transform .3s var(--ease-out,cubic-bezier(.22,1,.36,1));
}
.deck-container .tl .item:hover{
  transform:translateY(-3px);
}

/* --- 垂直时间线 (.tl-v) --- */
.deck-container .tl-v::before{
  background:linear-gradient(180deg,
    var(--accent) 0%,
    var(--accent-2,var(--accent)) 50%,
    transparent 100%);
  opacity:.25;
}
.deck-container .tl-v-item{
  transition:transform .25s var(--ease-out,cubic-bezier(.22,1,.36,1));
}
.deck-container .tl-v-item:hover{
  transform:translateX(4px);
}
.deck-container .tl-v-item::before{
  animation:enh-dot-pulse 2.5s ease-in-out infinite;
}

/* --- 思维导图 (.mm) --- */
.deck-container .mm .root{
  background:var(--grad,linear-gradient(135deg,var(--accent),var(--accent-2)));
  box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 35%,transparent),
             0 0 0 6px color-mix(in srgb,var(--accent) 8%,transparent);
  animation:enh-breathe 4s ease-in-out infinite;
}
@keyframes enh-breathe{
  0%,100%{box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 35%,transparent),0 0 0 6px color-mix(in srgb,var(--accent) 8%,transparent)}
  50%{box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 35%,transparent),0 0 0 12px color-mix(in srgb,var(--accent) 4%,transparent)}
}
.deck-container .mm .n{
  transition:transform .25s var(--ease-out,cubic-bezier(.22,1,.36,1)),
             box-shadow .25s var(--ease-out,cubic-bezier(.22,1,.36,1));
}
.deck-container .mm .n:hover{
  transform:scale(1.06);
  box-shadow:0 8px 24px rgba(0,0,0,.1),0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
  z-index:10;
}
/* 思维导图连接线增强：渐变色 + 透明度 */
.deck-container .mm svg path{
  stroke:color-mix(in srgb,var(--accent) 50%,var(--border-strong));
  opacity:.6;
  stroke-width:1.8;
}

/* --- 架构图 (.arch) --- */
.deck-container .arch .cell{
  transition:transform .3s var(--ease-out,cubic-bezier(.22,1,.36,1)),
             box-shadow .3s var(--ease-out,cubic-bezier(.22,1,.36,1)),
             border-color .3s var(--ease-out,cubic-bezier(.22,1,.36,1));
}
.deck-container .arch .cell:hover{
  transform:translateY(-3px);
  border-color:var(--accent);
  box-shadow:0 12px 28px rgba(0,0,0,.08),0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent);
}
/* 层名称渐变背景 */
.deck-container .arch .tname{
  background:var(--grad-soft,linear-gradient(135deg,var(--surface-2),var(--surface)));
  border-left:3px solid var(--accent);
}

/* --- 表格 (.t) --- */
.deck-container .t{
  border-radius:10px;
  overflow:hidden;
}
.deck-container .t th{
  background:var(--surface-2);
  position:relative;
}
.deck-container .t th::after{
  content:'';
  position:absolute;left:0;right:0;bottom:0;
  height:2px;
  background:var(--grad,linear-gradient(90deg,var(--accent),var(--accent-2)));
  opacity:.4;
}
.deck-container .t tbody tr{
  transition:background .2s ease;
}
.deck-container .t tbody tr:nth-child(even){
  background:color-mix(in srgb,var(--surface-2) 40%,transparent);
}
.deck-container .t tbody tr:hover{
  background:color-mix(in srgb,var(--accent) 8%,transparent);
}
.deck-container .t tbody tr:hover td:first-child{
  box-shadow:inset 3px 0 0 var(--accent);
}

/* --- 优缺点 (.pc) --- */
.deck-container .pc .card{
  transition:transform .3s var(--ease-out,cubic-bezier(.22,1,.36,1));
}
.deck-container .pc .pro:hover{
  transform:translateY(-2px);
}
.deck-container .pc .con:hover{
  transform:translateY(-2px);
}

/* --- 玻璃卡片 (.glass-card) --- */
.deck-container .glass-card{
  transition:transform .35s var(--ease-out,cubic-bezier(.22,1,.36,1)),
             box-shadow .35s var(--ease-out,cubic-bezier(.22,1,.36,1));
}
.deck-container .glass-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 48px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12);
}

/* --- 终端 (.term) --- */
.deck-container .term{
  position:relative;
}
.deck-container .term::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:10px;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,transparent 60%,rgba(0,255,120,.03) 100%);
}

/* --- 代码块 (pre.card) --- */
.deck-container pre.card{
  position:relative;
}
/* 代码块顶部 macOS 窗口点 */
.deck-container pre.card::before{
  content:'';
  position:absolute;
  top:10px;left:14px;
  width:12px;height:12px;
  border-radius:50%;
  background:#ff5f57;
  box-shadow:18px 0 0 #febc2e,36px 0 0 #28c840;
  z-index:1;
}
.deck-container pre.card{
  padding-top:36px;
}
.deck-container pre.card code{
  display:block;
  margin-top:4px;
}

/* --- 对比 (.vs) --- */
.deck-container .vs .side{
  transition:transform .3s var(--ease-out,cubic-bezier(.22,1,.36,1)),
             box-shadow .3s var(--ease-out,cubic-bezier(.22,1,.36,1));
}
.deck-container .vs .side:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(0,0,0,.08);
}
/* VS 中间符号渐变 */
.deck-container .vs .mid{
  background:var(--grad,linear-gradient(135deg,var(--accent),var(--accent-2)));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  opacity:.5;
}

/* --- 路线图 (.rm) --- */
.deck-container .rm .col{
  transition:background .3s ease;
}
.deck-container .rm .col:hover{
  background:color-mix(in srgb,var(--accent) 4%,var(--surface));
}

/* --- 平台卡片 (.plat) --- */
.deck-container .plat{
  transition:transform .3s var(--ease-out,cubic-bezier(.22,1,.36,1));
}
.deck-container .plat:hover{
  transform:translateY(-3px);
}

/* --- 矩阵网格 (.mx) --- */
.deck-container .mx{
  transition:transform .25s var(--ease-out,cubic-bezier(.22,1,.36,1)),
             box-shadow .25s var(--ease-out,cubic-bezier(.22,1,.36,1));
}
.deck-container .mx:hover{
  transform:scale(1.03);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

/* --- 马卡龙卡片 (.macaron-card) --- */
.deck-container .macaron-card{
  transition:transform .3s var(--ease-out,cubic-bezier(.22,1,.36,1)),
             box-shadow .3s var(--ease-out,cubic-bezier(.22,1,.36,1));
}
.deck-container .macaron-card:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 12px 32px rgba(0,0,0,.08);
}

/* --- 台账 (.ledger-row) --- */
.deck-container .ledger-row{
  transition:background .25s ease,padding-left .25s var(--ease-out,cubic-bezier(.22,1,.36,1));
}
.deck-container .ledger-row:hover{
  background:color-mix(in srgb,var(--accent) 4%,transparent);
  padding-left:8px;
}

/* --- CTA 按钮 --- */
.deck-container .cta .btn{
  transition:transform .25s var(--ease-out,cubic-bezier(.22,1,.36,1)),
             box-shadow .25s var(--ease-out,cubic-bezier(.22,1,.36,1));
  position:relative;
  overflow:hidden;
}
.deck-container .cta .btn::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.3) 50%,transparent 60%);
  transform:translateX(-100%);
  transition:transform .6s var(--ease-out,cubic-bezier(.22,1,.36,1));
}
.deck-container .cta .btn:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 12px 32px color-mix(in srgb,var(--accent) 35%,transparent);
}
.deck-container .cta .btn:hover::after{
  transform:translateX(100%);
}

/* --- 封面 (.cover-bg) --- */
/* 封面占位符渐变更丰富 */
.deck-container .cover-bg .placeholder{
  background:
    radial-gradient(60% 50% at 25% 30%,color-mix(in srgb,var(--accent) 40%,transparent) 0%,transparent 70%),
    radial-gradient(50% 40% at 75% 70%,color-mix(in srgb,var(--accent-2) 35%,transparent) 0%,transparent 70%),
    radial-gradient(40% 35% at 50% 50%,color-mix(in srgb,var(--accent-3) 20%,transparent) 0%,transparent 70%),
    linear-gradient(135deg,#0b1024,#1a2238);
}
/* 封面内容渐入 */
.deck-container .cover-content .h1{
  animation:enh-cover-in .8s var(--ease-out,cubic-bezier(.22,1,.36,1)) .2s both;
}
.deck-container .cover-content .lede{
  animation:enh-cover-in .8s var(--ease-out,cubic-bezier(.22,1,.36,1)) .4s both;
}
@keyframes enh-cover-in{
  from{opacity:0;transform:translateY(20px);filter:blur(4px)}
  to{opacity:1;transform:translateY(0);filter:none}
}

/* --- 技术规格 (.spec-kpi) --- */
.deck-container .spec-kpi{
  transition:transform .3s var(--ease-out,cubic-bezier(.22,1,.36,1));
}
.deck-container .spec-kpi:hover{
  transform:translateY(-2px);
}
.deck-container .spec-kpi.accent .num{
  background:var(--grad,linear-gradient(135deg,var(--accent),var(--accent-2)));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* --- 差异对比 (.diff) --- */
.deck-container .diff .add{
  position:relative;
  padding-left:28px;
}
.deck-container .diff .add::before{
  content:'+';position:absolute;left:12px;color:var(--good);font-weight:700;
}
.deck-container .diff .del{
  position:relative;
  padding-left:28px;
}
.deck-container .diff .del::before{
  content:'−';position:absolute;left:12px;color:var(--bad);font-weight:700;
}

/* --- 进度条增强 --- */
.progress-bar > span{
  background:linear-gradient(90deg,var(--accent),var(--accent-2,var(--accent)));
  box-shadow:0 0 8px color-mix(in srgb,var(--accent) 50%,transparent);
  position:relative;
  overflow:hidden;
}
.progress-bar > span::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  animation:enh-progress-shine 2s linear infinite;
}
@keyframes enh-progress-shine{
  from{transform:translateX(-100%)}
  to{transform:translateX(100%)}
}

/* ===== 应用层增强 ===== */

/* 空筛选结果增强 */
.filter-empty{
  position:relative;
  padding:56px 20px 48px;
}
.filter-empty::before{
  content:'🔍';
  display:block;
  font-size:36px;
  margin-bottom:12px;
  opacity:.3;
  filter:grayscale(1);
}

/* 按钮 hover 涟漪效果（纯 CSS） */
.btn-primary,
.btn-create,
.search-box button,
.player-controls button{
  position:relative;
  overflow:hidden;
}
.btn-primary::after,
.btn-create::after,
.search-box button::after{
  content:'';
  position:absolute;
  top:50%;left:50%;
  width:0;height:0;
  border-radius:50%;
  background:rgba(255,255,255,.25);
  transform:translate(-50%,-50%);
  transition:width .5s ease,height .5s ease;
  pointer-events:none;
}
.btn-primary:active::after,
.btn-create:active::after,
.search-box button:active::after{
  width:300px;height:300px;
  transition:width 0s,height 0s;
}

/* 侧边栏 logo 图标微动 */
.logo{
  cursor:default;
}
.logo-icon{
  display:inline-block;
}

/* 导航项 hover 左移微动 */
.nav-item{
  transition:background .22s var(--ease-out,cubic-bezier(.22,1,.36,1)),
             color .22s ease,
             padding-left .22s var(--ease-out,cubic-bezier(.22,1,.36,1));
}
.nav-item:hover{
  padding-left:18px;
}

/* 模态框关闭按钮旋转 */
.modal-close{
  transition:transform .25s var(--ease-out,cubic-bezier(.22,1,.36,1)),
             background .2s ease,
             color .2s ease,
             border-color .2s ease;
}

/* 输入框聚焦渐变边框 */
.search-box input:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  background:var(--surface);
}

/* 分类卡片右下角序号（需要 JS 设置 data-num，这里做兜底装饰） */
.category-card{
  counter-increment:enh-cat-counter;
}
.category-grid{
  counter-reset:enh-cat-counter;
}
.category-card:not([data-num])::after{
  content:counter(enh-cat-counter,decimal-leading-zero);
}

/* 题目卡片 meta 区 AI 徽章增强 */
.topic-card .meta span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-weight:500;
}

/* 模型池项 hover 左侧指示条 */
.model-pool-item{
  position:relative;
  overflow:hidden;
}
.model-pool-item::before{
  content:'';
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:var(--grad,linear-gradient(180deg,var(--accent),var(--accent-2)));
  transform:scaleY(0);
  transform-origin:center;
  transition:transform .3s var(--ease-out,cubic-bezier(.22,1,.36,1));
}
.model-pool-item:hover::before{
  transform:scaleY(1);
}

/* API 状态成功/错误图标前缀 */
.api-status.success::before{
  content:'✓ ';
  font-weight:800;
}
.api-status.error::before{
  content:'⚠ ';
  font-weight:800;
}

/* ===== 幻灯片切换增强 ===== */

/* 幻灯片切换时的微光效果 */
.deck-container .slide.is-active{
  animation:enh-slide-glow .6s var(--ease-out,cubic-bezier(.22,1,.36,1));
}
@keyframes enh-slide-glow{
  from{box-shadow:inset 0 0 60px color-mix(in srgb,var(--accent) 8%,transparent)}
  to{box-shadow:inset 0 0 0 transparent}
}

/* ===== 无障碍：尊重减少动效偏好 ===== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001s!important;
    animation-iteration-count:1!important;
    transition-duration:.001s!important;
  }
  .deck-container .flow .node.hl,
  .deck-container .tl .dot,
  .deck-container .tl-v-item::before,
  .deck-container .mm .root,
  .progress-bar > span::after{
    animation:none!important;
  }
}