/* =====================================================================
   森林系皮肤 · 叠加层（森林手绘 v3）
   叠在 base.css（纸面与组件）之上，只加三层：
   ① 外围植物（藤蔓 / 草丛 / 花）  ② 顶栏藤枝  ③ 梵鹜文楷标题与微弱动效
   全部规则带 .fy-on 或 #fy-deco 前缀，关闭风格时一个字节不生效。
   ===================================================================== */

/* ---------- 0. 变量 ---------- */
html {
  --fy-vine: #6E9160;
  --fy-vine-2: #4E7350;
  --fy-vine-leaf: #7FA86F;
  --fy-vine-leaf-2: #9CBF88;
  --fy-petal: #C25B4E;
  --fy-petal-2: #D98B7F;
}

/* ---------- 1. 植物层（固定、不接鼠标、压在内容之下） ---------- */
#fy-deco {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
#fy-deco svg {
  position: absolute;
  display: block;
  overflow: visible;
}

/* 左上：主藤蔓 */
.fy-vine-tl { top: -6px; left: -10px; width: 240px; height: 340px; }
/* 右下：草丛 + 花 */
.fy-vine-br { right: -8px; bottom: -6px; width: 300px; height: 150px; }
/* 右上：与左上对称的次藤，绕右侧边缘垂下（顶栏下只剩 20px 背景带，
   挂藤会被首屏卡片遮成断茬，所以只留四角的藤，不在中间垂） */
.fy-vine-tr { top: -6px; right: -10px; width: 240px; height: 340px; transform: scaleX(-1); opacity: .92; }

.fy-stem {
  fill: none;
  stroke: var(--fy-vine);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 620;
  stroke-dashoffset: 0;
}
html .fy-stem { animation: fy-grow 2.4s cubic-bezier(.22,.7,.3,1) both; }
@keyframes fy-grow { from { stroke-dashoffset: 620; } to { stroke-dashoffset: 0; } }

.fy-leaf { fill: var(--fy-vine-leaf); }
.fy-leaf.b { fill: var(--fy-vine-leaf-2); }
html .fy-foliage { animation: fy-sway 6.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes fy-sway { 0%,100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }

.fy-bloom { fill: var(--fy-petal); transform-box: fill-box; transform-origin: 50% 50%; }
html .fy-bloom { animation: fy-pulse 5.2s ease-in-out infinite; }
@keyframes fy-pulse { 0%,100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.07); opacity: 1; } }

.fy-grass { fill: none; stroke: var(--fy-vine-leaf); stroke-width: 2; stroke-linecap: round; }

/* 窄屏只留左上与右下，垂藤与侧枝收掉 */
@media (max-width: 1180px) {
  .fy-vine-tr { display: none; }
}
@media (max-width: 900px) {
  #fy-deco { display: none; }
}

/* ---------- 2. 顶栏：横枝 + 纸纹 ---------- */
/* 注意：顶栏在 bundle 里是 position:fixed（body 用 padding-top:50px 让位），
   这里千万不能改成 relative，否则顶栏会掉进文档流、上方露出 50px 空隙。
   ::after 锚定 fixed 元素即可，无需另加定位。 */

/* 顶栏下沿的一横枝：手绘波浪，从左侧起笔 */
body.lightsns .ls-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 7px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='7' viewBox='0 0 160 7'%3E%3Cpath d='M0 4.2 C 14 1.4, 26 1.4, 40 4.2 S 66 6.8, 80 4.2 S 106 1.4, 120 4.2 S 146 6.8, 160 4.2' fill='none' stroke='%23A8C296' stroke-width='1.4' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 160px 7px;
  opacity: .85;
}

/* 导航项：悬停时从底部弹出一小片叶影 */
body.lightsns .ls-nav-item::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 4px;
  width: 16px; height: 5px;
  margin-left: -8px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: var(--fy-leaf);
  opacity: 0;
  transform: translateY(3px) scaleX(.4);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}
body.lightsns .ls-nav-item { position: relative; }
body.lightsns .ls-nav-item:hover::after { opacity: .18; transform: translateY(0) scaleX(1); }
body.lightsns .ls-nav-item.ls-active::after { opacity: .3; transform: translateY(0) scaleX(1); }

/* logo 旁的一小簇叶（纯装饰，用伪元素，不动结构） */
body.lightsns .ls-logo { position: relative; }
body.lightsns .ls-logo::before {
  content: "";
  position: absolute;
  right: -14px; top: -2px;
  width: 10px; height: 7px;
  border-radius: 0 100% 0 100%;
  background: var(--fy-vine-leaf);
  opacity: .5;
  transform: rotate(-18deg);
  pointer-events: none;
}

/* ---------- 3. 标题字体 ---------- */
body.lightsns h1,
body.lightsns h2,
body.lightsns h3,
body.lightsns .ls-card-title,
body.lightsns .ls-widget-header h3,
body.lightsns .ls-recommend-header h3,
body.lightsns .ls-section-title,
body.lightsns .ls-post-title,
body.lightsns .ls-article-title,
body.lightsns .bbs-hero-title,
body.lightsns .category-title-wrap h2,
body.lightsns .board-content h3,
body.lightsns .ls-widget-body h3 {
  font-family: var(--fy-hand) !important;
  letter-spacing: .012em;
  font-weight: 400;
}

/* 正文保持系统黑体，行高松一档 */
body.lightsns .ls-post-excerpt,
body.lightsns .ls-article-content,
body.lightsns .ls-text {
  line-height: 1.85;
}

/* ---------- 4. 纸片卡片：手绘触 ---------- */
body.lightsns .ls-post-item,
body.lightsns .ls-widget-card,
body.lightsns .ls-recommend-card,
body.lightsns .ls-card {
  box-shadow: 3px 3px 0 rgba(198, 214, 180, .38);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.lightsns .ls-post-item:hover,
body.lightsns .ls-recommend-card:hover {
  transform: translateY(-2px);
  box-shadow: 4px 5px 0 rgba(198, 214, 180, .5);
}

/* ---------- 5. 夜间模式让路 ---------- */
html[data-nm="dark"] #fy-deco { opacity: .3; filter: brightness(.55) saturate(.8); }
html[data-nm="dark"] body.lightsns .ls-header::after { opacity: .3; }

/* ---------- 6. 降低动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  html .fy-stem,
  html .fy-foliage,
  html .fy-bloom { animation: none !important; }
  .fy-stem { stroke-dashoffset: 0 !important; }
  body.lightsns .ls-post-item,
  body.lightsns .ls-recommend-card { transition: none; }
}

/* ---------- 7. 飘叶（仅 motion=full） ---------- */
.fy-leaf-fall {
  position: fixed;
  top: -30px;
  width: 13px; height: 13px;
  border-radius: 0 100% 0 100%;
  background: var(--fy-vine-leaf-2);
  opacity: .55;
  pointer-events: none;
  z-index: -1;
  will-change: transform;
  animation: fy-fall linear infinite;
}
@keyframes fy-fall {
  0%   { transform: translate3d(0,-40px,0) rotate(0deg); }
  50%  { transform: translate3d(26px,45vh,0) rotate(180deg); }
  100% { transform: translate3d(-8px,104vh,0) rotate(360deg); }
}