/* family-motion.css — 「一家人」動態層樣式（搭配 family-motion.js）
   減少動態效果時 JS 整支不作用，這裡的 class 都不會出現。 */

/* ── H 送出回饋：自己的訊息從輸入列方向輕輕彈出（不飛、不延遲） ── */
.msg.out.fm-pop .bub{animation:fmPop .2s cubic-bezier(.3,1.4,.5,1) both;transform-origin:right bottom}
@keyframes fmPop{from{opacity:.4;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}

/* ── I 數據卡出場：像被轉傳進來，落定；數字不跳 ── */
.rev.fm-rev{animation:fmRevIn .55s cubic-bezier(.2,.8,.2,1) both;transform-origin:left bottom}
.rev.fm-rev .big{animation:fmBigSettle .5s cubic-bezier(.2,.9,.25,1) .22s both;transform-origin:left center;display:inline-block}
@keyframes fmRevIn{from{opacity:0;transform:translateY(18px) rotate(-1.5deg)}to{opacity:1;transform:none}}
@keyframes fmBigSettle{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}

/* ── K 氣氛換級瞬間（變好變差同一種；不常駐變色） ── */
#notice.fm-shift{animation:fmMood 1.2s ease both}
#notice.fm-shift #mood-lab{animation:fmMoodLab .6s cubic-bezier(.2,.8,.2,1) .15s both}
@keyframes fmMood{0%{box-shadow:0 1px 2px rgba(0,0,0,.08)}30%{box-shadow:0 0 0 3px rgba(240,180,80,.55),0 4px 14px rgba(0,0,0,.12)}100%{box-shadow:0 1px 2px rgba(0,0,0,.08)}}
@keyframes fmMoodLab{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── A 揭曉轉場：群組畫面退後，另一個群組滑進來 ── */
#app{transform-origin:50% 50%}
html.fm-pull #app{transform:translateX(-17%) scale(.8);border-radius:22px;filter:brightness(.72);
  transition:transform .75s cubic-bezier(.3,.1,.2,1),filter .75s,border-radius .75s,opacity .5s}
html.fm-pull-2 #app{transform:translateX(-62%) scale(.8);opacity:0}
html.fm-noanim #app{transition:none!important}
.fm-other{position:fixed;z-index:200;overflow:hidden;border-radius:22px;pointer-events:none;
  background:linear-gradient(180deg,#0d1322,#131a2c 55%,#1a2036);box-shadow:0 24px 70px rgba(0,0,0,.55);
  transform:translateX(125%) scale(.8);transition:transform .75s cubic-bezier(.3,.1,.2,1),border-radius .6s,opacity .38s}
.fm-other.peek{transform:translateX(34%) scale(.8)}
.fm-other.full{transform:none;border-radius:0}
.fm-other.bye{opacity:0}
.fm-other-bar{height:54px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;
  color:var(--milk);border-bottom:1px solid var(--line);transition:opacity .4s}
.fm-other-log{padding:18px 16px;display:flex;flex-direction:column;gap:12px;transition:opacity .4s}
.fm-other-log i{display:block;height:34px;border-radius:16px;background:rgba(243,237,226,.12)}
.fm-other-log i.r{align-self:flex-end;background:rgba(240,180,80,.22)}
.fm-other.full .fm-other-bar,.fm-other.full .fm-other-log{opacity:0}

/* ── B 結局名由玩家送出 ── */
#cover-end.fm-es .end-card,#cover-end.fm-es .end-card > *,#cover-end.fm-es .end-btns,#cover-end.fm-es #e-img,
#cover-end.fm-es .attrib,#cover-end.fm-es .reads,#cover-end.fm-es .srcs,#cover-end.fm-es .note{opacity:0}
#cover-end.fm-es.fm-es-card .end-card{opacity:1;transition:opacity .4s}
#cover-end.fm-es-in .end-card > *{animation:fmUp .55s cubic-bezier(.2,.8,.2,1) both}
#cover-end.fm-es-in .end-card > .end-title{animation:fmFade .25s ease both}
#cover-end.fm-es-in .end-card > .end-cap{animation-delay:.1s}
#cover-end.fm-es-in .end-card > .end-meta{animation-delay:.2s}
#cover-end.fm-es-in .end-btns{animation:fmUp .6s cubic-bezier(.2,.8,.2,1) .35s both}
#cover-end.fm-es-in #e-img,#cover-end.fm-es-in .attrib,#cover-end.fm-es-in .reads,#cover-end.fm-es-in .srcs,
#cover-end.fm-es-in .note{animation:fmFade .6s ease .55s both}
@keyframes fmUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fmFade{from{opacity:0}to{opacity:1}}
.fm-compose{position:absolute;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:10px;
  padding:10px 14px calc(12px + env(safe-area-inset-bottom));background:rgba(19,26,44,.92);border-top:1px solid var(--line);
  transform:translateY(100%);transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s}
.fm-compose.in{transform:none}
.fm-compose.out{opacity:0}
.fm-input{flex:1;min-height:40px;border-radius:20px;background:rgba(243,237,226,.08);border:1px solid var(--line);
  display:flex;align-items:center;padding:8px 14px;color:var(--milk);font-size:15px}
.fm-caret{display:inline-block;width:1.5px;height:1.1em;background:var(--lamp);margin-left:2px;animation:fmCaret 1s steps(1) infinite}
@keyframes fmCaret{50%{opacity:0}}
.fm-send{width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:rgba(240,180,80,.25);transition:background .2s,transform .2s}
.fm-send svg{width:20px;height:20px;fill:var(--lamp)}
.fm-compose.sent .fm-send{background:var(--lamp);transform:scale(.9)}
.fm-compose.sent .fm-send svg{fill:#131a2c}
.fm-compose.sent .fm-typed,.fm-compose.sent .fm-caret{opacity:0}
.fm-title-fly{position:fixed;z-index:70;pointer-events:none;max-width:78vw;background:var(--bub-out);color:#111;
  font-size:15.5px;line-height:1.5;border-radius:18px 4px 18px 18px;padding:8px 13px;
  opacity:0;transform:translateY(10px) scale(.9);transform-origin:right bottom}
.fm-title-fly.pop{opacity:1;transform:none;transition:opacity .25s,transform .35s cubic-bezier(.3,1.5,.5,1)}
.fm-title-fly.fly{background:transparent;color:var(--milk);padding:0;border-radius:0;max-width:none;
  font-family:var(--serif);font-weight:900;font-size:25px;line-height:1.35;
  transition:left .6s cubic-bezier(.3,.1,.2,1),top .6s cubic-bezier(.3,.1,.2,1),width .6s,font-size .6s,
  background .35s,color .35s,padding .6s,border-radius .6s,line-height .6s}

/* ── C 真實玩家比例點陣 ── */
.fm-dots{display:none;grid-template-columns:repeat(20,1fr);gap:4px;margin-top:10px;max-width:260px}
.fm-dots.on{display:grid}
.fm-dots i{display:block;aspect-ratio:1;border-radius:50%;background:rgba(243,237,226,.14);transition:background .35s,transform .35s}
.fm-dots i.lit{background:var(--lamp);transform:scale(1.15)}

/* ── D 分享圖顯影 ── */
#e-img.fm-dev{filter:sepia(.5) saturate(.4) brightness(1.45) contrast(.8) blur(1.5px);opacity:.5;transform:translateY(16px)}
#e-img.fm-dev.fm-dev-on{filter:none;opacity:1;transform:none;transition:filter 2.4s cubic-bezier(.3,.1,.2,1),opacity 1.2s,transform 1.2s cubic-bezier(.2,.8,.2,1)}
#e-share.fm-glow{animation:fmGlow 1.6s ease}
@keyframes fmGlow{35%{box-shadow:0 0 0 6px rgba(240,180,80,.25),0 0 22px rgba(240,180,80,.55)}100%{box-shadow:none}}

/* ── E 換人設邀請：頭像＋稱呼 ── */
.btn.fm-as{display:flex;align-items:center;justify-content:center;gap:12px}
.fm-as-who{display:flex;flex-direction:column;align-items:center;gap:1px;flex:none;animation:fmPeek .6s cubic-bezier(.3,1.5,.5,1) .9s both}
.fm-as-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:#2b2b2b;letter-spacing:0}
.fm-as-n{font-size:10px;font-weight:400;letter-spacing:.05em;color:var(--dim)}
@keyframes fmPeek{from{opacity:0;transform:translateX(-10px) rotate(-14deg)}to{opacity:1;transform:none}}