/* ============================================================
   Ink Blog · animation.css
   动画库：入场动画、飘浮、淡入、装饰元素运动
   ============================================================ */

/* ---------- 淡入入场 ---------- */
.fade-in { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease-settle), transform 1s var(--ease-settle); }
.fade-in.visible { opacity: 1; transform: translateY(0); }

.fade-in-left  { opacity: 0; transform: translateX(-40px); transition: opacity 1s var(--ease-settle), transform 1s var(--ease-settle); }
.fade-in-right { opacity: 0; transform: translateX(40px);  transition: opacity 1s var(--ease-settle), transform 1s var(--ease-settle); }
.fade-in-left.visible, .fade-in-right.visible { opacity: 1; transform: translateX(0); }

/* 延迟级别 */
.delay-1 { transition-delay: .15s; }
.delay-2 { transition-delay: .3s; }
.delay-3 { transition-delay: .45s; }
.delay-4 { transition-delay: .6s; }
.delay-5 { transition-delay: .75s; }

/* ---------- 缩放入场 ---------- */
.zoom-in { opacity: 0; transform: scale(0.92); transition: opacity 1s var(--ease-settle), transform 1s var(--ease-settle); }
.zoom-in.visible { opacity: 1; transform: scale(1); }

/* ---------- 笔墨书写展开（标题逐字） ---------- */
.brush-reveal {
  display: inline-block;
  overflow: hidden;
}
.brush-reveal span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
}
.brush-reveal.visible span {
  animation: char-up .8s var(--ease-settle) forwards;
}
@keyframes char-up {
  to { transform: translateY(0); opacity: 1; }
}

/* ---------- 缓慢漂浮（云、雾、山） ---------- */
.float-slow { animation: float-slow 8s ease-in-out infinite; }
.float-slower { animation: float-slow 14s ease-in-out infinite; }
@keyframes float-slow {
  0%, 100% { transform: translateY(0) translateX(0); }
  50%      { transform: translateY(-12px) translateX(8px); }
}

/* ---------- 飘落（竹叶） ---------- */
.leaf-fall {
  position: absolute;
  top: -50px;
  animation: leaf-fall linear infinite;
  pointer-events: none;
}
@keyframes leaf-fall {
  0%   { transform: translateY(0) rotate(0deg) translateX(0); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(110vh) rotate(720deg) translateX(100px); opacity: 0; }
}

/* ---------- 脉动呼吸（印章、强调点） ---------- */
.breathe { animation: breathe 4s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.04); opacity: 1; }
}

/* ---------- 朱砂闪烁 ---------- */
.seal-pulse {
  animation: seal-pulse 3s ease-in-out infinite;
}
@keyframes seal-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--seal-glow); }
  50%      { box-shadow: 0 0 0 12px transparent; }
}

/* ---------- 水墨笔触下划线（标题强调） ---------- */
.brush-underline {
  position: relative;
}
.brush-underline::after {
  content: '';
  position: absolute;
  left: 0; bottom: -8px;
  width: 0; height: 6px;
  background: var(--seal);
  border-radius: 50%;
  opacity: 0.7;
  filter: blur(0.5px);
  transition: width .8s var(--ease-brush);
}
.brush-underline.visible::after { width: 100%; }

/* ---------- 旋转（远山缓慢转动，模拟视角） ---------- */
.spin-very-slow { animation: spin 120s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 文字渐显（逐句） ---------- */
.word-by-word .word {
  opacity: 0;
  display: inline-block;
  animation: word-in .6s var(--ease-settle) forwards;
}

/* ---------- 竹简展开 ---------- */
.bamboo-slide {
  transform: translateX(-100%);
  opacity: 0;
  transition: transform .8s var(--ease-settle), opacity .8s var(--ease-settle);
}
.bamboo-slide.visible {
  transform: translateX(0);
  opacity: 1;
}

/* ---------- 翻页（古籍翻页） ---------- */
.page-turn {
  transform-style: preserve-3d;
  transition: transform 1s var(--ease-settle);
}
.page-turn.flipped {
  transform: rotateY(-180deg);
}

/* ---------- 悬停墨痕扫过 ---------- */
.ink-sweep {
  position: relative;
  overflow: hidden;
}
.ink-sweep::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(20,20,20,0.08) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .8s var(--ease-brush);
}
.ink-sweep:hover::after { transform: translateX(100%); }

/* ---------- 数字滚动（统计数字） ---------- */
.count-roll { font-variant-numeric: tabular-nums; }

/* ---------- 涟漪（点击墨点扩散） ---------- */
.ink-ripple-click {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20,20,20,0.4) 0%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  animation: click-ripple .7s var(--ease-settle) forwards;
}
@keyframes click-ripple {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(3);   opacity: 0; }
}