/* ============================================================
   自定义样式：只放 Tailwind 覆盖不到的部分
   ============================================================ */

/* 留言/项目卡片的入场动画 */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.animate-fade-up {
  animation: fade-up .28s ease-out both;
}

/* 技能进度条：让宽度变化有个过渡，数据加载完不会"啪"地跳出来 */
.skill-bar {
  transition: width .6s cubic-bezier(.22, 1, .36, 1);
}

/* 留言正文允许换行，同时避免超长英文/链接把布局撑破 */
.message-content {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* 细一点的滚动条（Chrome / Edge / Safari） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgb(148 163 184 / .45);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover { background: rgb(148 163 184 / .7); }

/* 尊重系统的"减少动态效果"设置 */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-up { animation: none; }
  .skill-bar { transition: none; }
}