/* 独立页面的公共交互样式。
 *
 * 这些规则原先在 30 个页面的内联 <style> 里各写一份（入场动画、卡片
 * 悬停、图表容器、滚动条），内容几乎逐字节相同。集中到这里之后，
 * 各页只保留自己真正独有的样式。
 *
 * 滚动条配色引用 palette.css 的色阶变量，而不是原先写死的
 * #f1f1f1 / #c1c1c1 / #a8a8a8——那三个值与页面的中性灰对不上。
 */

/* ===== 入场动画 ===== */

/* 参数走变量，页面可在自己的 :root 里覆盖。本文件的 <link> 排在页面内联
   <style> 之后，普通规则覆盖不了，但自定义属性是取值时解析的，所以页面
   的 :root 声明依然有效。 */

.animate-fade-in {
  animation: fadeIn var(--fade-in-duration, 0.6s)
    var(--fade-in-easing, ease-out);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(var(--fade-in-offset, 15px));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== 卡片悬停 ===== */

.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -12px rgb(0 0 0 / 0.15);
}

/* .chart-container 刻意不放这里：各页仍在自己的 <style> 里定义它，而本文件
   的 <link> 排在页面内联 <style> 之后，同优先级下会反过来覆盖页面的取值
   （ch5 的 300px、ch1/ch3 的 400px 等）。 */

/* ===== 滚动条 ===== */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgb(var(--c-slate-100));
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgb(var(--c-slate-300));
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--c-slate-400));
}

/* Firefox */
html {
  scrollbar-color: rgb(var(--c-slate-300)) rgb(var(--c-slate-100));
  scrollbar-width: thin;
}

@media (prefers-reduced-motion: reduce) {
  .animate-fade-in {
    animation: none;
  }

  .card-hover,
  .card-hover:hover {
    transform: none;
    transition: none;
  }
}