/* ============================================
   ibyzhang.com - 全站交互效果
   品牌色：玫瑰金 #B76E79 | 藏青 #273C5B
   ============================================ */

/* ===== CSS 变量 ===== */
:root {
  --rose-gold: #B76E79;
  --deep-sea: #273C5B;
  --deep-charcoal: #333333;
  --neutral-gray: #7A7A7A;
  --warm-white: #FCFBF9;
  --pale-blue: #f0f4f8;
  --warm-gold: #c9a96e;
  --green-glow: 0 0 16px rgba(7, 193, 96, 0.35);
  --transition-smooth: all 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ===== 1. 头像 hover：放大 10% + 阴影，点击缩小 ===== */
.avatar-hover,
.profile-avatar,
.author-avatar {
  transition: var(--transition-smooth);
  cursor: pointer;
}
.avatar-hover:hover,
.profile-avatar:hover,
.author-avatar:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(39, 60, 91, 0.2);
}
.avatar-hover:active,
.profile-avatar:active,
.author-avatar:active {
  transform: scale(0.95);
}

/* ===== 2. 原创标签 hover：上移 + 绿色发光 ===== */
.original-tag,
.tag-original {
  transition: var(--transition-smooth);
  display: inline-block;
}
.original-tag:hover,
.tag-original:hover {
  transform: translateY(-3px);
  box-shadow: var(--green-glow);
}

/* ===== 3. 文章标题 hover：深海蓝 → 玫瑰粉渐变 ===== */
.article-title-hover,
.post-title {
  transition: var(--transition-smooth);
  background: linear-gradient(90deg, var(--deep-sea), var(--deep-sea));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.article-title-hover:hover,
.post-title:hover {
  background: linear-gradient(90deg, var(--deep-sea), var(--rose-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== 4. 正文段落 hover：极淡蓝底高亮 ===== */
.paragraph-hover,
.article-body p,
.post-content p {
  transition: var(--transition-smooth);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: -6px;
  margin-right: -6px;
}
.paragraph-hover:hover,
.article-body p:hover,
.post-content p:hover {
  background-color: var(--pale-blue);
}

/* ===== 5. 引言块 hover：背景加深 + 边框变绿 ===== */
.quote-hover,
blockquote {
  transition: var(--transition-smooth);
  border-left: 3px solid var(--neutral-gray);
  background: linear-gradient(135deg, rgba(252,251,249,0.8), rgba(240,244,248,0.4));
}
.quote-hover:hover,
blockquote:hover {
  border-left-color: #07C160;
  background: linear-gradient(135deg, rgba(252,251,249,1), rgba(240,244,248,0.8));
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}

/* ===== 6. 章节标题 hover：暖金色滑动下划线，点击微缩 ===== */
.section-title-hover,
.chapter-title {
  position: relative;
  display: inline-block;
  transition: var(--transition-smooth);
  cursor: pointer;
}
.section-title-hover::after,
.chapter-title::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--warm-gold), var(--rose-gold));
  transition: width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.section-title-hover:hover::after,
.chapter-title:hover::after {
  width: 100%;
}
.section-title-hover:active,
.chapter-title:active {
  transform: scale(0.97);
}

/* ===== 7. 加粗关键词 hover：玫瑰金 + 字间距微增 ===== */
.keyword-hover,
strong,
b {
  transition: var(--transition-smooth);
}
.keyword-hover:hover,
strong:hover,
b:hover {
  color: var(--rose-gold);
  letter-spacing: 0.5px;
}

/* ===== 8. 幕后手记卡片 hover：上浮 2px + 阴影增强，点击微缩 ===== */
.card-hover,
.note-card {
  transition: var(--transition-smooth);
  cursor: pointer;
}
.card-hover:hover,
.note-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(39, 60, 91, 0.12);
}
.card-hover:active,
.note-card:active {
  transform: scale(0.98);
}

/* ===== 9. 结尾签名 hover：玫瑰金 + 下划线从左展开 ===== */
.signature-hover,
.author-signature {
  position: relative;
  display: inline-block;
  transition: var(--transition-smooth);
  cursor: pointer;
}
.signature-hover:hover,
.author-signature:hover {
  color: var(--rose-gold);
}
.signature-hover::after,
.author-signature::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--rose-gold);
  transition: width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.signature-hover:hover::after,
.author-signature:hover::after {
  width: 100%;
}

/* ===== 10. 入场动画：fadeInUp 交错淡入 ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeInUp 0.7s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  opacity: 0;
}

/* 交错延迟 */
.delay-01 { animation-delay: 0.1s; }
.delay-02 { animation-delay: 0.2s; }
.delay-03 { animation-delay: 0.3s; }
.delay-04 { animation-delay: 0.4s; }
.delay-05 { animation-delay: 0.5s; }
.delay-06 { animation-delay: 0.6s; }
.delay-07 { animation-delay: 0.7s; }
.delay-08 { animation-delay: 0.8s; }
.delay-09 { animation-delay: 0.9s; }
.delay-10 { animation-delay: 1.0s; }

/* ===== 通用 hover 增强 ===== */
a {
  transition: color 0.3s ease;
}
a:hover {
  color: var(--rose-gold);
}

/* 按钮统一 hover */
button, .btn {
  transition: var(--transition-smooth);
}
button:hover, .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(39, 60, 91, 0.15);
}
button:active, .btn:active {
  transform: scale(0.97);
}

/* 图片通用 hover */
img {
  transition: var(--transition-smooth);
}
img:hover {
  filter: brightness(1.02);
}

/* ===== 移动端适配：简化 hover ===== */
@media (hover: none) {
  .avatar-hover:hover,
  .original-tag:hover,
  .article-title-hover:hover,
  .paragraph-hover:hover,
  .quote-hover:hover,
  .section-title-hover:hover,
  .keyword-hover:hover,
  .card-hover:hover,
  .signature-hover:hover {
    transform: none;
    box-shadow: none;
  }
  
  .section-title-hover::after,
  .signature-hover::after {
    width: 0 !important;
  }
}