/* 功能：宣传页墨画动画层——英雄区墨团晕染 / 远山墨意 / 墨滴涟漪 / 题字笔锋 */
/* 作者：Thorleying */
/* 时间：2026-06-12 02:08 */

/* ── 画布：铺满英雄区背景，不挡交互 ── */
.ink-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
/* 英雄区内容抬到墨画之上 */
.hero > *:not(.ink-art) { position: relative; z-index: 1; }

/* ── 墨团：入场自笔尖晕开，随后极慢呼吸 ── */
.ink-blob {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  will-change: transform, opacity;
  animation:
    ink-bloom 2.6s var(--ease-out) forwards,
    ink-breathe 14s ease-in-out 2.6s infinite alternate;
}
.blob-1 { animation-delay: 0.2s, 2.8s; --ink-opacity: 0.1; }
.blob-2 { animation-delay: 0.7s, 3.3s; --ink-opacity: 0.08; }
.blob-3 { animation-delay: 1.1s, 3.7s; --ink-opacity: 0.06; }

@keyframes ink-bloom {
  0% { opacity: 0; transform: scale(0.45); }
  60% { opacity: var(--ink-opacity, 0.1); }
  100% { opacity: var(--ink-opacity, 0.1); transform: scale(1); }
}
@keyframes ink-breathe {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.12) translate(10px, 6px); }
}

/* ── 远山：极淡两叠，缓慢相向漂移 ── */
.ink-hills { opacity: 0; animation: hills-in 3s ease 0.8s forwards; }
.hill { fill: #1f2329; }
.hill-far { opacity: 0.045; animation: hill-drift 46s ease-in-out infinite alternate; }
.hill-near { opacity: 0.06; animation: hill-drift 34s ease-in-out infinite alternate-reverse; }
@keyframes hills-in { to { opacity: 1; } }
@keyframes hill-drift { to { transform: translateX(-46px); } }

/* ── 墨滴涟漪：淡圈错峰扩散（整组轻模糊，避免线圈生硬） ── */
.ink-ripples { filter: blur(1.4px); }
.ripple {
  fill: none;
  stroke: #1f2329;
  stroke-width: 1.5;
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
}
.ripple-1 { animation: ripple-out 7s ease-out 3.2s infinite; }
.ripple-2 { animation: ripple-out 7s ease-out 6.4s infinite; }
@keyframes ripple-out {
  0% { opacity: 0; transform: scale(0.3); stroke-width: 2; }
  12% { opacity: 0.1; }
  46% { opacity: 0; transform: scale(3.4); stroke-width: 0.5; }
  100% { opacity: 0; transform: scale(3.4); }
}

/* ── 朱砂一点：印章意象，迟到的点睛 ── */
.cinnabar-dot {
  fill: var(--accent);
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation: dot-stamp 0.6s var(--ease-out) 2.4s forwards;
}
@keyframes dot-stamp {
  0% { opacity: 0; transform: scale(2.4); }
  100% { opacity: 0.65; transform: scale(1); }
}

/* ── 题字笔锋：标题下方一道毛笔横扫，自左向右写出 ── */
.brush-stroke {
  position: absolute;
  left: 50%;
  bottom: -0.18em;
  width: min(560px, 86%);
  height: 0.34em;
  transform: translateX(-50%);
  z-index: -1;
}
.brush-stroke path { fill: var(--accent); opacity: 0.34; }
/* clipPath 揭示：矩形横向展开模拟运笔 */
.brush-wipe-rect {
  transform: scaleX(0);
  transform-origin: 0 0;
  animation: brush-write 1.1s cubic-bezier(0.6, 0.04, 0.3, 1) 1s forwards;
}
@keyframes brush-write { to { transform: scaleX(1); } }

/* ── 动效降级 ── */
@media (prefers-reduced-motion: reduce) {
  .ink-blob { animation: none; opacity: var(--ink-opacity, 0.1); }
  .ink-hills { animation: none; opacity: 1; }
  .hill-far, .hill-near, .ripple-1, .ripple-2 { animation: none; }
  .cinnabar-dot { animation: none; opacity: 0.65; }
  .brush-wipe-rect { animation: none; transform: scaleX(1); }
}