/* =========================================================
   古木长青 · 树上的彩蛋（访客层 / 连点摇树）
   口径：docs/产品文档/04-养成层-反馈与访客.md 第 11 章
   访客形象是实心色块内联 SVG（与树上虫子同口径：不描边、不引图标库）
   ========================================================= */

/* ---------- 访客层：整层不吃点击，只有 sprite 本体可点，不挡铭牌入口与虫子气泡 ---------- */
.tg-egg-layer{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:4;overflow:visible}

/* 三种访客的站位钉在树身上（回落 PNG 阶段图时用；3D 在跑时由宿主投影定位）。
   离底 16% 起排是给左下角的铭牌入口（.tg-plaque-btn.base 占 bottom 6%~15%）让开，
   390 宽下铭牌往中线收（margin-left:-112px），站位再往下压就会被树牌盖住。 */
.tg-egg-slot{position:absolute;animation:tge-in .5s ease-out both}
.tg-egg-slot-base-left{bottom:16%;left:5%}
.tg-egg-slot-canopy-right{top:22%;right:12%}
.tg-egg-slot-air-top{top:7%;left:52%}

/* sprite 本体：可点、有按压反馈，动作循环挂在它身上（槽位不动，出场动画才不会被循环动画顶掉） */
.tg-egg{position:relative;display:block;width:46px;height:42px;padding:0;border:none;background:none;
  cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.tg-egg svg{width:100%;height:100%;display:block;overflow:visible;
  /* 极淡的深色描边：八向 1px 硬投影叠出一圈轮廓（与树上虫子同一手法）。
     走 drop-shadow 而不是 stroke：身子由多个圆叠成，描边会在重叠处露出内部弧线 */
  filter:drop-shadow(0 1px 0 var(--egg-line)) drop-shadow(0 -1px 0 var(--egg-line)) drop-shadow(1px 0 0 var(--egg-line)) drop-shadow(-1px 0 0 var(--egg-line)) drop-shadow(.7px .7px 0 var(--egg-line)) drop-shadow(-.7px .7px 0 var(--egg-line)) drop-shadow(.7px -.7px 0 var(--egg-line)) drop-shadow(-.7px -.7px 0 var(--egg-line))}
.tg-egg{--egg-line:rgba(38,48,33,.5)}
.tg-egg:active{transform:scale(.9)}
.tg-egg-s-sparrow{width:42px;height:38px}
.tg-egg-s-butterfly{width:44px;height:38px}

/* 一只只的动法：兔子蹦、麻雀点头、蝴蝶扇翅 */
.tg-egg-k-hop{animation:tge-hop 1.5s ease-in-out infinite}
.tg-egg-k-perch{animation:tge-perch 2s ease-in-out infinite}
.tg-egg-k-float{animation:tge-float 3.4s ease-in-out infinite}
.tg-egg-wing{transform-origin:50% 78%;animation:tge-flap .34s ease-in-out infinite}

/* 离场：点过了、或停留到点自己走，都缩一下消失，不出现「点完还钉在原地」 */
.tg-egg-slot.tge-leaving{animation:tge-out .4s ease-in forwards}

@keyframes tge-in{0%{opacity:0;transform:translateY(8px) scale(.7)}100%{opacity:1;transform:none}}
@keyframes tge-out{0%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px) scale(.6)}}
@keyframes tge-hop{
  0%,100%{transform:translate(0,0)}
  18%{transform:translate(2px,-9px)}
  34%{transform:translate(5px,0)}
  52%{transform:translate(6px,-6px)}
  70%{transform:translate(9px,0)}
}
@keyframes tge-perch{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  22%{transform:translate(0,-3px) rotate(-4deg)}
  44%{transform:translate(0,0) rotate(3deg)}
}
@keyframes tge-float{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(10px,-8px)}
  50%{transform:translate(-6px,-14px)}
  75%{transform:translate(-12px,-4px)}
}
@keyframes tge-flap{
  0%,100%{transform:scaleX(1)}
  50%{transform:scaleX(.42)}
}

/* 蝴蝶扇翅只动两片翅膀分组 */

/* ---------- 连点摇树：每点一次挤一下，满 5 下摇落叶子 ---------- */
.tg-tree-wrap.tge-squeeze img{animation:tge-squeeze .34s ease-out}
@keyframes tge-squeeze{
  0%{transform:scale(1,1)}
  35%{transform:scale(1.05,.94)}
  70%{transform:scale(.97,1.03)}
  100%{transform:scale(1,1)}
}
.tge-leaf{position:absolute;top:-6%;width:9px;height:9px;border-radius:0 60% 0 60%;
  background:#c8a25a;pointer-events:none;animation:tge-leaf-fall 1.5s linear forwards}
.tge-leaf.b{background:#8aa074;border-radius:60% 0 60% 0}
@keyframes tge-leaf-fall{
  0%{opacity:0;transform:translate(0,0) rotate(0deg)}
  12%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx,18px),320px) rotate(300deg)}
}

/* ---------- 访客弹窗卡片：图 + 一句话，答题时接选项 ---------- */
.tge-card-top{display:flex;flex-direction:column;align-items:center;gap:6px;margin:2px 0 10px}
.tge-card-art{width:74px;height:68px}
/* 弹窗里的同一枚 SVG：白底上浅色（兔子）会发虚，套一圈轮廓（比树上的淡一档） */
.tge-card-art svg{width:100%;height:100%;display:block;overflow:visible;
  filter:drop-shadow(0 1px 0 rgba(38,48,33,.3)) drop-shadow(0 -1px 0 rgba(38,48,33,.3)) drop-shadow(1px 0 0 rgba(38,48,33,.3)) drop-shadow(-1px 0 0 rgba(38,48,33,.3))}
.tge-card-text{font-size:14px;color:var(--ink-2);line-height:1.5;text-align:center}
.tge-q-tag{display:inline-block;margin-top:8px;font-size:12px;color:var(--ink-3)}
.tge-opts{display:flex;flex-direction:column;gap:8px;margin:12px 0 2px;text-align:left}
.tge-opt{display:flex;align-items:center;gap:9px;width:100%;padding:10px 12px;border-radius:12px;
  border:1px solid rgba(44,62,45,.14);background:var(--paper,#fafaf7);font:inherit;font-size:14px;
  color:var(--ink);cursor:pointer;transition:.14s}
.tge-opt:hover{border-color:var(--accent);background:rgba(90,122,92,.06)}
.tge-opt:active{transform:scale(.98)}
.tge-opt .tge-opt-dot{flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(44,62,45,.28)}
.tge-opt.sel{border-color:var(--accent);background:var(--accent-bg,rgba(90,122,92,.1))}
.tge-opt.sel .tge-opt-dot{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px #fff}
.tge-answer{margin:10px 0 2px;padding:10px 12px;border-radius:12px;background:rgba(44,62,45,.06);
  font-size:13px;line-height:1.55;color:var(--ink-2);text-align:left}
.tge-answer b{color:var(--ink)}

/* ---------- 降低动效偏好：留形状不留循环 ---------- */
@media (prefers-reduced-motion:reduce){
  .tg-egg-slot,.tg-egg,.tg-egg-wing,.tg-egg-slot.tge-leaving,.tg-tree-wrap.tge-squeeze img,.tge-leaf{animation:none}
}