/* ============================================================
   动效与质感引擎（叠加层 · 不改动现有结构）
   页面入场 / 卡片错落 / 微交互 / 滚动显现 / 呼吸渐变 / 骨架屏
   遵循 prefers-reduced-motion 降级
   ============================================================ */

/* ---------- 缓动曲线（产品级） ---------- */
:root {
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
  --dur-xs: .15s;
  --dur-sm: .28s;
  --dur-md: .45s;
  --dur-lg: .7s;
}

/* ---------- 页面入场 ---------- */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.admin-content > *, .fill-shell > *, .client-grid, .client-top-inner { animation: pageIn var(--dur-md) var(--ease-out) both; }

/* ---------- 卡片错落浮入（需 JS 加 .reveal / 或直接用 nth-child 延迟） ---------- */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.reveal { opacity: 0; }
.reveal.in { animation: cardIn var(--dur-md) var(--ease-out) both; }

/* 网格卡片自动错落（无 JS 也可用） */
.survey-grid > *, .training-grid > *, .client-grid > *, .stat-row > *, .overview > * {
  animation: cardIn var(--dur-md) var(--ease-out) both;
}
.survey-grid > *:nth-child(2), .training-grid > *:nth-child(2), .client-grid > *:nth-child(2), .stat-row > *:nth-child(2), .overview > *:nth-child(2) { animation-delay: .06s; }
.survey-grid > *:nth-child(3), .training-grid > *:nth-child(3), .client-grid > *:nth-child(3), .stat-row > *:nth-child(3), .overview > *:nth-child(3) { animation-delay: .12s; }
.survey-grid > *:nth-child(4), .training-grid > *:nth-child(4), .client-grid > *:nth-child(4), .stat-row > *:nth-child(4), .overview > *:nth-child(4) { animation-delay: .18s; }
.survey-grid > *:nth-child(n+5), .training-grid > *:nth-child(n+5), .client-grid > *:nth-child(n+5) { animation-delay: .24s; }

/* ---------- 按钮微交互（涟漪 + 按压） ---------- */
.btn { position: relative; overflow: hidden; transform: translateZ(0); }
.btn:active { transform: scale(.96); transition-duration: .05s; }
.btn .ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(255,255,255,.5); pointer-events: none;
  animation: ripple .55s var(--ease-out);
}
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }
.btn-primary:hover { box-shadow: 0 4px 14px rgba(45,105,102,.38); }
.btn { transition: all var(--dur-xs) var(--ease-out); }

/* ---------- 卡片悬停提升 ---------- */
.card-hover, .s-card, .t-card, .survey-card, .stat-box, .ov-box {
  transition: box-shadow var(--dur-sm) var(--ease-out),
              transform var(--dur-sm) var(--ease-out),
              border-color var(--dur-sm) var(--ease-out);
  will-change: transform;
}
.s-card:hover, .t-card:hover, .stat-box:hover, .ov-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ---------- 数字 / 强调 ---------- */
.ov-num, .sb-num { display: inline-block; }

/* ---------- 渐变呼吸（顶部 hero / 横幅） ---------- */
@keyframes heroShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.client-top, .login-wrap, .report-banner {
  background-size: 200% 200%;
  animation: heroShift 12s ease-in-out infinite;
}

/* ---------- 评分按钮弹性 ---------- */
.rate-btn { transition: all var(--dur-xs) var(--ease-spring); }
.rate-btn:active { transform: scale(1.18); }
.rate-btn.on { box-shadow: 0 0 0 1px #FFFDF9, 0 0 0 2.5px rgba(45,105,102,.55), 0 3px 10px rgba(45,105,102,.32); }
.rate-btn.on:nth-last-child(-n+2) { /* 高分渐变 */ }

/* ---------- 选项选中反馈 ---------- */
.opt-row { position: relative; transition: all var(--dur-xs) var(--ease-out); }
.opt-row.sel { box-shadow: 0 0 0 3px var(--brand-light); transform: translateX(2px); }

/* ---------- 进度条平滑 + 发光 ---------- */
.progress-fill { box-shadow: 0 0 8px rgba(45,105,102,.55); transition: width .4s var(--ease-out); }

/* ---------- 成功打勾动画（完成页） ---------- */
@keyframes popIn { 0%{transform:scale(0) rotate(-20deg);opacity:0} 60%{transform:scale(1.15) rotate(6deg);opacity:1} 100%{transform:scale(1) rotate(0)} }
.done-circle { animation: popIn .6s var(--ease-spring) both; }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }

/* ---------- 骨架屏 ---------- */
.skeleton { position: relative; overflow: hidden; background: #EAE5D9; border-radius: var(--radius-sm); }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------- 侧边栏导航微交互 ---------- */
.admin-nav a { position: relative; }
.admin-nav a::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0;
  background: var(--brand); border-radius: 2px; transform: translateY(-50%);
  transition: height var(--dur-xs) var(--ease-out);
}
.admin-nav a:hover::before { height: 60%; }
.admin-nav a.active { box-shadow: 0 4px 14px rgba(45,105,102,.4); }

/* ---------- 顶部进度条（全站加载感） ---------- */
#nprogress-bar { position: fixed; top:0; left:0; right:0; height:3px; z-index:9999;
  background: linear-gradient(90deg,#7F9B96,#2D6966); width:0; transition: width .3s, opacity .4s; opacity:0; }

/* ---------- 标签弹性出现 ---------- */
.tag { animation: pageIn .3s var(--ease-out) both; }

/* ---------- 滚动平滑 ---------- */
html { scroll-behavior: smooth; }

/* ---------- 降低动效（无障碍） ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}