/* ============================================================
   人间观察所 · 手绘小动效（doodles）
   全部是内联 SVG 线描 + CSS 动画，零外部请求、零图片
   配色跟随 editorial：墨线（--ep-ink-3）+ 陶土红点缀（--ep-accent）
   系统开启「减少动态效果」时全部静止
   ============================================================ */

.rn-svg {
  display: inline-block; vertical-align: -.16em;
  width: 1em; height: 1em;
  fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}

/* ============================================================
   1) 羽毛笔 —— 「写下此刻」的笔
   ============================================================ */
.rn-quill {
  width: 18px; height: 18px;
  color: var(--ep-ink-3);
  transform-origin: 20% 90%;           /* 以笔尖为轴摆动 */
  transition: color .3s;
  margin-right: 6px;
  vertical-align: -3px;
}
.qc-fold:hover .rn-quill { color: var(--ep-accent); animation: quillWrite 1.5s ease-in-out infinite; }
.qc-fold[aria-expanded="true"] .rn-quill {
  color: var(--ep-accent);
  animation: quillWrite 1.05s ease-in-out infinite;
}
@keyframes quillWrite {
  0%   { transform: rotate(0deg)   translateY(0); }
  22%  { transform: rotate(-13deg) translateY(-1.5px); }
  48%  { transform: rotate(8deg)   translateY(1px); }
  72%  { transform: rotate(-6deg)  translateY(-.5px); }
  100% { transform: rotate(0deg)   translateY(0); }
}
/* 笔尖墨滴：展开时一滴一滴落下 */
.rn-quill .q-ink { opacity: 0; }
.qc-fold[aria-expanded="true"] .rn-quill .q-ink { animation: inkDrop 2.6s ease-in infinite; }
@keyframes inkDrop {
  0%   { opacity: 0; transform: translateY(0) scale(.6); }
  25%  { opacity: .85; transform: translateY(1px) scale(1); }
  70%  { opacity: .5;  transform: translateY(4.5px) scale(.7); }
  100% { opacity: 0; transform: translateY(6px) scale(.4); }
}

/* ============================================================
   2) 纸飞机 —— 记录文末那一行
   ============================================================ */
.rn-plane {
  width: 15px; height: 15px;
  color: var(--ep-ink-3); opacity: .45;
  margin-left: 2px;
  transform-origin: 50% 60%;
  transition: color .3s, opacity .3s, transform .45s cubic-bezier(.22,.8,.3,1);
}
.nb-foot:hover .rn-plane,
.nb-item:hover .rn-plane {
  opacity: 1; color: var(--ep-accent);
  transform: translateX(4px) rotate(-10deg);
}
/* 飞行中的那一架 */
.rn-fly {
  position: fixed; z-index: 300; pointer-events: none;
  width: 21px; height: 21px; color: var(--ep-accent);
  will-change: transform, opacity;
}
.rn-fly .rn-svg { width: 100%; height: 100%; }
.rn-fly.go { animation: planeFly 1.5s cubic-bezier(.28,.1,.42,1) forwards; }
/* 弧线飞行：先抬头爬升，再顺着弧顶滑出去 */
@keyframes planeFly {
  0%   { opacity: 0; transform: translate(0,6px) rotate(0deg) scale(.5); }
  12%  { opacity: 1; transform: translate(10px,-10px) rotate(-12deg) scale(1); }
  38%  { transform: translate(76px,-78px) rotate(-26deg) scale(.97); }
  68%  { opacity: .9; transform: translate(152px,-132px) rotate(-19deg) scale(.84); }
  100% { opacity: 0; transform: translate(226px,-174px) rotate(-30deg) scale(.65); }
}
/* 尾迹：一条虚线，跟着拉长后淡出 */
.rn-trail {
  position: fixed; z-index: 299; pointer-events: none;
  height: 1px; transform-origin: 0 50%;
  border-top: 1px dashed rgba(124, 144, 112, .5);
}
.rn-trail.go { animation: trailGrow 1.45s cubic-bezier(.28,.1,.42,1) forwards; }
@keyframes trailGrow {
  0%   { opacity: 0; transform: scaleX(0) rotate(-38deg); }
  20%  { opacity: .75; }
  100% { opacity: 0; transform: scaleX(1) rotate(-38deg); }
}

/* 点赞飘起的小心心 */
.rn-pop {
  position: fixed; z-index: 300; pointer-events: none;
  font-size: 16px; line-height: 1; color: var(--ep-accent);
  will-change: transform, opacity;
}
.rn-pop.go { animation: popUp 1.2s cubic-bezier(.2,.72,.3,1) forwards; }
/* 点赞的红心：暖一点的莫兰迪玫瑰色，带一圈柔光 */
.rn-pop.is-heart {
  color: #C0563E;
  text-shadow: 0 0 12px rgba(192, 86, 62, .35);
}
@keyframes popUp {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(.4) rotate(0deg); }
  18%  { opacity: 1; transform: translate(-50%, -12px) scale(1.2) rotate(-7deg); }
  45%  { opacity: .95; transform: translate(-45%, -28px) scale(1) rotate(4deg); }
  100% { opacity: 0; transform: translate(-55%, -56px) scale(.82) rotate(-4deg); }
}

/* ============================================================
   3) 窗台植物角 —— 仙人掌 + 小草（向日葵已搬走）
   ============================================================ */
.rn-garden {
  display: flex; align-items: flex-end; gap: 14px;
  margin: 0 0 16px;
  color: var(--ep-ink-3);
  user-select: none;
}
.rn-garden svg { overflow: visible; display: block; }
.rn-garden .rn-cactus { width: 24px; height: 42px; }
.rn-garden .rn-grass  { width: 22px; height: 24px; }

/* 摆动：都以根部为轴，周期错开，看起来像各自在风里 */
.rn-cactus, .rn-grass { transform-origin: 50% 100%; }
.rn-cactus { animation: swayA 5.6s ease-in-out infinite; }
.rn-grass  { animation: swayA 4.3s ease-in-out infinite; animation-delay: -2.1s; }
@keyframes swayA { 0%,100% { transform: rotate(-1.8deg); } 50% { transform: rotate(1.8deg); } }
@keyframes swayB { 0%,100% { transform: rotate(-2.6deg); } 50% { transform: rotate(2.6deg); } }

/* 仙人掌：点一下会开花 */
.rn-cactus { cursor: pointer; }
.rn-cactus .bloom {
  opacity: 0; transform: scale(.2); transform-origin: 50% 100%;
  transition: opacity .6s ease, transform .6s cubic-bezier(.34,1.56,.64,1);
}
.rn-cactus.bloom-on .bloom { opacity: 1; transform: scale(1); }
.rn-cactus.bloom-on { color: var(--ep-accent); }
.rn-cactus:active { transform: scale(.94); }

/* 成长面板副标题末尾的向日葵：跟文字同排，整株陶土色，
   花盘还是慢转，让「成长」这件事有点呼吸感 */
.rn-plant-corner {
  display: inline-block;
  margin-left: 8px;
  vertical-align: -10px;
  color: var(--ep-accent);
  user-select: none;
}
.rn-plant-corner .rn-sunf { width: 28px; height: 50px; }
.rn-plant-corner .rn-sunf { transform-origin: 50% 100%; animation: swayB 6.8s ease-in-out infinite; animation-delay: -1.4s; }
.rn-plant-corner .rn-sunf .sun-head { transform-origin: 15px 15px; animation: headTurn 11s ease-in-out infinite; }

/* ============================================================
   4) 降低动态：全部静止
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .rn-quill, .qc-fold:hover .rn-quill, .qc-fold[aria-expanded="true"] .rn-quill,
  .rn-quill .q-ink,
  .rn-cactus, .rn-grass, .rn-sunf, .rn-sunf .sun-head,
  .rn-plant-corner .rn-sunf, .rn-plant-corner .rn-sunf .sun-head {
    animation: none !important;
  }
  .rn-fly.go, .rn-trail.go, .rn-pop.go { display: none !important; }
  .rn-cactus .bloom { transition: none; }
}

@media (max-width: 680px) {
  .rn-garden { gap: 13px; margin-bottom: 12px; }
  .rn-garden .rn-cactus { width: 21px; height: 37px; }
  .rn-garden .rn-grass  { width: 19px; height: 21px; }
  .rn-plant-corner .rn-sunf { width: 24px; height: 42px; vertical-align: -8px; }
  .rn-plane { width: 14px; height: 14px; }
}