/* Kikun 博客自定义样式 — 交互动画微调
 * 仅做加法（过渡 / 阴影 / 淡入），不改布局，不修改 themes/butterfly/ submodule。
 * 主色硬编码 #4a8fe7，与 _config.butterfly.yml 的 theme_color.main 保持一致。
 */

/* ===== 首页大字字号（可自行调整）=====
 * clamp(最小, 首选, 最大)：随屏幕宽度平滑缩放，手机小、桌面大。
 *   第 1 个数：最小字号（手机端的下限）
 *   第 2 个数：首选字号（随屏幕宽度变，7vw = 屏宽的 7%）
 *   第 3 个数：最大字号（大屏封顶）
 * 想整体更大/更小 → 主要改第 3 个数；嫌手机端太小 → 改第 1 个数。 */
:root {
  --home-title-size: clamp(1.85em, 7vw, 2.85em);
}

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

/* 交互动效仅在用户未偏好减少动画时启用（无障碍） */
@media (prefers-reduced-motion: no-preference) {

  /* —— 首屏文章卡片淡入 —— */
  .recent-post-item {
    animation: kikun-fade-up 0.5s ease both;
  }
  .recent-post-item:nth-child(1) { animation-delay: 0.02s; }
  .recent-post-item:nth-child(2) { animation-delay: 0.08s; }
  .recent-post-item:nth-child(3) { animation-delay: 0.14s; }
  .recent-post-item:nth-child(4) { animation-delay: 0.20s; }
  .recent-post-item:nth-child(5) { animation-delay: 0.26s; }

  @keyframes kikun-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* —— 文章卡片 hover：上浮 + 柔和阴影 —— */
  .recent-post-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .recent-post-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(74, 143, 231, 0.14);
  }

  /* —— 导航菜单 hover：下划线滑入 + 颜色过渡 —— */
  #nav .menus_item .site-page {
    position: relative;
    transition: color 0.25s ease;
  }
  #nav .menus_item .site-page::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: #4a8fe7;
    transition: width 0.25s ease, left 0.25s ease;
  }
  #nav .menus_item .site-page:hover::after {
    width: 60%;
    left: 20%;
  }
}

/* —— 首页标题打字机光标（Typed.js v2）—— */
/* typing.js 把标题文本包进内层 span 再打字，光标成为 #site-title 的子节点，
   继承标题的白色与大字号。这里把 #site-title 改为 inline-block，使光标紧跟文字之后
   （覆盖主题 limit-more-line 的 -webkit-box 纵向堆叠）。 */
#site-info {
  text-align: center;
}
/* 仅首页（full_page banner）启用打字机所需的 inline-block 并去掉淡入；
   非首页（归档/分类/标签/关于/文章）保持主题默认：块级 + 居中。 */
#page-header.full_page #site-title {
  display: inline-block !important;
  text-align: center;
  font-size: var(--home-title-size) !important;   /* 首页大字字号，改文件顶部 --home-title-size */
  animation: none !important;   /* 去掉首页标题 titleScale 淡入，只保留打字机；导航栏 header-effect 不受影响 */
}
.typed-cursor {
  display: inline-block;
  font-weight: 300;
  margin-left: 0.05em;
  -webkit-animation: typedjsBlink 0.7s infinite;
  animation: typedjsBlink 0.7s infinite;
}
@-webkit-keyframes typedjsBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes typedjsBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}