/* ============================================================
   张虎军个人网站 · 动态效果增强包 (animations.css)
   作用：滚动揭示 / Hero 入场 / 卡片悬停 / 按钮微交互 /
        导航下划线 / 数字滚动 / 顶部光晕视差 / 页面转场幕布
   兼容性：叠加在现有 style.*.css 之上，不改动任何结构
   无障碍：尊重 prefers-reduced-motion；无 JS 时内容照常可见
   ============================================================ */

:root{
  --zhj-green:#1F4D3D;        /* 站点主绿（与 theme-color 一致） */
  --zhj-green-deep:#163a2e;

  /* ===== 点缀色：默认松石青；换色只改这一行（见下方备选） ===== */
  --zhj-accent:#2E8B8B;
  --zhj-accent-soft:rgba(46,139,139,.55);

  /* ——— 备选点缀色（取消注释其一、并注释掉上面两行即可）———
     暖琥珀（书卷气）      --zhj-accent:#C8884B; --zhj-accent-soft:rgba(200,136,75,.55);
     黛蓝（沉静学者）      --zhj-accent:#3B6EA5; --zhj-accent-soft:rgba(59,110,165,.55);
     珊瑚橘（温暖活力）    --zhj-accent:#E0795B; --zhj-accent-soft:rgba(224,121,91,.55);
     原亮金（经典品牌）    --zhj-accent:#D4A84F; --zhj-accent-soft:rgba(212,168,79,.65);
  */
  --zhj-ease:cubic-bezier(.22,.61,.36,1);
}

html{ scroll-behavior:smooth; }

/* ---------- 1. 滚动揭示（默认隐藏，JS 触发展现） ---------- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s var(--zhj-ease), transform .7s var(--zhj-ease);
  will-change:opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}
/* 同组错落延迟，最多 5 级 */
.reveal[data-delay="1"]{ transition-delay:.09s; }
.reveal[data-delay="2"]{ transition-delay:.18s; }
.reveal[data-delay="3"]{ transition-delay:.27s; }
.reveal[data-delay="4"]{ transition-delay:.36s; }
.reveal[data-delay="5"]{ transition-delay:.45s; }

/* ---------- 2. 卡片 / 读书笔记 悬停 ---------- */
.card,
.note-item{
  transition:transform .38s var(--zhj-ease), box-shadow .38s var(--zhj-ease);
  will-change:transform;
}
.card:hover,
.note-item:hover{
  transform:translateY(-7px);
  box-shadow:0 20px 44px -20px rgba(31,77,61,.5);
}
.card__media,
.note-item__cover{ overflow:hidden; }
.card__media img,
.note-item__cover img{
  transition:transform .65s var(--zhj-ease);
  will-change:transform;
}
.card:hover .card__media img,
.note-item:hover .note-item__cover img{
  transform:scale(1.06);
}

/* ---------- 3. 按钮浮雕 + 微交互（与统计数字同款质感） ---------- */
.btn{
  transition:transform .26s var(--zhj-ease), box-shadow .26s var(--zhj-ease), background-color .26s ease;
  will-change:transform;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.5),     /* 顶部高光：凸起 */
    inset 0 -2px 4px rgba(0,0,0,.18),         /* 底部内阴影：厚度 */
    0 6px 14px -4px rgba(0,0,0,.35);          /* 外投影：浮起 */
}
.btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.5),
    inset 0 -2px 4px rgba(0,0,0,.18),
    0 12px 24px -8px rgba(0,0,0,.42);
}
.btn--ghost{
  background:rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.5),
    inset 0 -2px 4px rgba(0,0,0,.22),
    0 6px 14px -4px rgba(0,0,0,.35);
}
.btn--ghost:hover{ transform:translateY(-2px); }

/* ---------- 3b. 其它类按钮 / CTA 统一浮雕（与主按钮同款质感） ---------- */
/* 「查看全部」等更多链接 → 浮雕胶囊 */
.sec-head__more{
  display:inline-flex; align-items:center;
  padding:8px 16px; border-radius:999px;
  background:linear-gradient(145deg,#ffffff 0%,#eaf1ec 100%);
  color:var(--zhj-green);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.9),
    inset 0 -2px 4px rgba(31,77,61,.14),
    0 6px 14px -6px rgba(31,77,61,.28);
  transition:transform .26s var(--zhj-ease), box-shadow .26s var(--zhj-ease);
}
.sec-head__more:hover{ transform:translateY(-2px); }

/* 卡片「阅读全文 →」→ 浮雕胶囊 */
.card__foot a{
  display:inline-flex; align-items:center;
  padding:7px 14px; border-radius:999px;
  background:linear-gradient(145deg,#ffffff 0%,#eaf1ec 100%);
  color:var(--zhj-green);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.9),
    inset 0 -2px 4px rgba(31,77,61,.14),
    0 5px 12px -6px rgba(31,77,61,.28);
  transition:transform .26s var(--zhj-ease), box-shadow .26s var(--zhj-ease);
}
.card__foot a:hover{ transform:translateY(-2px); }

/* 标签胶囊 → 轻浮雕 */
.tag{
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.85),
    inset 0 -1px 2px rgba(31,77,61,.12),
    0 2px 5px -2px rgba(31,77,61,.22);
}

/* 回到顶部按钮 → 浮雕 */
.to-top{
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.5),
    inset 0 -2px 4px rgba(0,0,0,.18),
    0 6px 14px -4px rgba(0,0,0,.35);
}

/* ---------- 4. 导航链接点缀色下划线 ---------- */
.nav a{ position:relative; }
.nav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-5px;
  height:2px; background:var(--zhj-accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--zhj-ease);
}
.nav a:hover::after,
.nav a[aria-current="page"]::after{ transform:scaleX(1); }

/* ---------- 5. 统计数字做成浮雕按钮（字体不变）+ 滚动到位弹一下 ---------- */
.stats__item{
  display:flex; flex-direction:column; align-items:center;
  padding:20px 34px; border-radius:20px;
  background:linear-gradient(145deg,#ffffff 0%,#eaf1ec 100%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.9),     /* 顶部高光：凸起感 */
    inset 0 -3px 7px rgba(31,77,61,.16),       /* 底部内阴影：厚度 */
    0 10px 20px -6px rgba(31,77,61,.30);       /* 外投影：浮起 */
}
.stats__num{
  color:var(--zhj-green);   /* 字号/字重保持原样，只去掉难看的挤出阴影 */
}
.stats__item.is-counted .stats__num{
  animation:zhj-stat-pop .5s var(--zhj-ease);
}
@keyframes zhj-stat-pop{
  0%{ transform:scale(1); }
  45%{ transform:scale(1.1); }
  100%{ transform:scale(1); }
}

/* ---------- 6. 回到顶部按钮悬停 ---------- */
.to-top{ transition:opacity .3s ease, transform .3s var(--zhj-ease), background-color .25s ease; }
.to-top:hover{ transform:translateY(-3px); }

/* ---------- 7. Hero 光晕轻微呼吸（与 JS 视差叠加） ---------- */
@keyframes zhj-glow-breathe{
  0%,100%{ opacity:.55; }
  50%{ opacity:.85; }
}
.hero__glow{ animation:zhj-glow-breathe 6s ease-in-out infinite; }

/* ---------- 8. 页面转场幕布（由 page-transition.js 注入/控制） ---------- */
.page-veil{
  position:fixed; inset:0; z-index:9999;
  background:var(--zhj-green-deep);
  transform:translateY(100%);
  transition:transform .5s var(--zhj-ease);
  pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.page-veil.cover{ transform:translateY(0); }   /* 覆盖屏幕 */
.page-veil::after{                              /* 中心转圈，点缀色 */
  content:""; width:46px; height:46px; border-radius:50%;
  border:3px solid rgba(255,255,255,.22);
  border-top-color:var(--zhj-accent);
  animation:zhj-veil-spin .8s linear infinite;
}
@keyframes zhj-veil-spin{ to{ transform:rotate(360deg); } }

/* ---------- 9. 栏目大字立体阴影（letterpress 高光 + 品牌绿投影） ---------- */
.sec-head__title{
  text-shadow:
    0 1px 0 rgba(255,255,255,.7),
    0 2px 1px rgba(22,58,46,.22),
    0 8px 20px rgba(31,77,61,.18);
}
.hero h1{
  text-shadow:0 2px 16px rgba(0,0,0,.30);
}

/* ---------- 10. 无障碍：减少动态 ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .card, .note-item, .btn,
  .card__media img, .note-item__cover img,
  .nav a::after, .to-top, .stats__num, .page-veil{ transition:none !important; }
  .card:hover, .note-item:hover, .btn:hover, .to-top:hover,
  .sec-head__more:hover, .card__foot a:hover{ transform:none !important; }
  .hero__glow, .page-veil::after, .stats__num{ animation:none !important; }
  .page-veil{ display:none !important; }
}