/* ============================
   Falling Leaves Effect
   ============================ */

/* 落叶容器 — 固定在视口，置于内容底层，不拦截鼠标事件 */
.leaves-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* 单片叶子 */
.leaf {
  position: absolute;
  top: -60px;
  opacity: 0;
  will-change: transform, opacity;
  animation: leafFall linear infinite;
  filter: drop-shadow(0 2px 4px rgba(28, 73, 37, 0.1));
}

/* 叶子 SVG 本体 */
.leaf svg {
  display: block;
  animation: leafSpin linear infinite;
}

/* ============================
   下落 + 水平漂移
   ============================ */
@keyframes leafFall {
  0% {
    transform: translateY(-60px) translateX(0);
    opacity: 0;
  }
  5% {
    opacity: var(--leaf-opacity, 0.35);
  }
  85% {
    opacity: var(--leaf-opacity, 0.35);
  }
  100% {
    transform: translateY(calc(100vh + 60px)) translateX(var(--leaf-drift, 80px));
    opacity: 0;
  }
}

/* ============================
   旋转 + 轻微缩放呼吸
   ============================ */
@keyframes leafSpin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(90deg) scale(0.95);
  }
  50% {
    transform: rotate(180deg) scale(1);
  }
  75% {
    transform: rotate(270deg) scale(0.95);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* ============================
   不同大小的叶子变体
   ============================ */
.leaf--sm svg  { width: 18px; height: 18px; }
.leaf--md svg  { width: 26px; height: 26px; }
.leaf--lg svg  { width: 36px; height: 36px; }

/* ============================
   页面主内容提升层级，确保在落叶之上
   ============================ */
.site-hero,
main,
.site-footer,
.article-page,
.page-shell,
article.article-detail {
  position: relative;
  z-index: 1;
}