/* 一家人開場動畫（family-intro v2 蒙太奇版）：搭配 intro.js，蓋在入口頁 #app 上方 */
#app{position:relative}
#app.fi-playing{overflow:hidden}   /* 只在播放時裁切：桌機版 #app 固定高度，常駐 hidden 會裁掉矮視窗下方的人設卡 */
#app.fi-playing:not(.fi-land) > :not(#fi){opacity:0}
#app.fi-land > :not(#fi){animation:fiIn .6s cubic-bezier(.2,.8,.2,1) both}
#app.fi-land > .title{animation-name:fiFade;animation-duration:.5s}
@keyframes fiIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fiFade{from{opacity:0}to{opacity:1}}

#fi{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;text-align:left;
  background:#8eabd8;color:#111;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang TC','Noto Sans TC','Microsoft JhengHei',sans-serif;
  line-height:1.5;transition:background .5s}
#fi.still, #fi.still *{transition:none!important;animation:none!important}

/* 頂列：仿群組頂列，但不放任何品牌元素 */
.fi-bar{position:relative;z-index:2;background:#8eabd8;flex:none;display:flex;align-items:center;gap:6px;height:54px;padding:0 12px 0 6px;transition:opacity .5s}
.fi-bar svg{width:26px;height:26px;stroke:#111;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fi-name{font-weight:700;font-size:18px}
.fi-count{font-size:15px;color:#2e3b52}

.fi-view{flex:1;min-height:0;overflow:hidden;padding:0 10px}
.fi-log{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
#fi.rush .fi-log{transition-duration:.18s}

/* 訊息：出現前縮小透明，加上 .on 彈出 */
.fi-sys,.fi-ch,.fi-msg{opacity:0;transform:translateY(8px) scale(.96);transform-origin:left bottom;
  transition:opacity .22s,transform .28s cubic-bezier(.3,1.5,.5,1)}
.fi-sys.on,.fi-ch.on,.fi-msg.on{opacity:1;transform:none}
.fi-sys{text-align:center;margin:10px 0 6px}
.fi-sys span{display:inline-block;background:rgba(64,88,130,.42);color:#fff;font-size:12px;border-radius:999px;padding:3px 14px}
.fi-ch{text-align:center;color:#1f3a68;margin:22px 0 12px;transform-origin:center}
.fi-ch small{display:block;font-size:12px;letter-spacing:.1em;opacity:.72}
.fi-ch b{font-family:'Noto Serif TC',serif;font-size:21px;letter-spacing:.14em}
/* 蒙太奇段的季節標題：放大重擊後落定 */
#fi[data-season=summer] .fi-ch.on,#fi[data-season=autumn] .fi-ch.on,#fi[data-season=winter] .fi-ch.on{animation:fiChHit .35s cubic-bezier(.2,.9,.3,1) both}
@keyframes fiChHit{from{transform:scale(1.8);opacity:0}to{transform:none;opacity:1}}
.fi-msg{display:flex;gap:8px;margin:8px 0;align-items:flex-start}
.fi-av{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#2b2b2b}
.fi-who{font-size:12px;color:#2e3b52;margin:0 0 3px 4px}
.fi-bub{background:#fff;border-radius:18px;border-top-left-radius:4px;padding:8px 13px;font-size:15.5px;max-width:15.5em}
.fi-msg.hook .fi-bub{font-size:17px;font-weight:700;box-shadow:0 0 0 3px rgba(240,180,80,.9)}
/* 長輩圖：沿用遊戲素材，尺寸與遊戲內圖片訊息相近 */
.fi-img{display:block;width:132px;height:132px;object-fit:cover;border-radius:14px;background:#dfe6f3}

/* 蒙太奇：季節越後面，鏡頭越推近、動態模糊越重；底色隨季節染色 */
.fi-view{transition:transform .5s cubic-bezier(.3,0,.2,1),filter .3s;transform-origin:50% 70%}
#fi[data-season=autumn] .fi-view{transform:scale(1.025);filter:blur(.5px)}
#fi[data-season=winter] .fi-view{transform:scale(1.05);filter:blur(1.1px)}
#fi[data-season=winter] .fi-bub,#fi[data-season=autumn] .fi-bub{transition-duration:.12s}
.fi-tint{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s,background-color .4s;mix-blend-mode:multiply}
#fi[data-season=spring] .fi-tint{opacity:.18;background:#ffd9e0}
#fi[data-season=summer] .fi-tint{opacity:.22;background:#fff0b8}
#fi[data-season=autumn] .fi-tint{opacity:.28;background:#f4c08a}
#fi[data-season=winter] .fi-tint{opacity:.32;background:#b8c8e8}
/* 冬天：畫面四角壓暗，視線集中到中間 */
#fi[data-season=winter]::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 55%,transparent 45%,rgba(10,16,32,.45))}

/* 硬切：閃白一下，聊天畫面瞬間消失，深夜藍上標題落下 */
.fi-night{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,#0d1322,#131a2c 55%,#1a2036)}
.fi-flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:#fff;z-index:4}
#fi.cut .fi-bar,#fi.cut .fi-view,#fi.cut .fi-tint{visibility:hidden}
#fi.cut::after{display:none}
#fi.cut .fi-night{opacity:1}
#fi.cut .fi-flash{animation:fiFlash .28s ease-out both}
@keyframes fiFlash{0%{opacity:.95}100%{opacity:0}}
#app.fi-land #fi{background:transparent}
#app.fi-land #fi .fi-night{opacity:0;transition:opacity .5s .3s}

/* 標題分身：擺在入口頁標題的位置，切入時從大到小重重落下 */
.fi-ghost{position:absolute;display:none;align-items:center;justify-content:center;z-index:3;color:#f3ede2;
  font-family:'Noto Serif TC',serif;font-weight:900;font-size:44px;line-height:1.2;letter-spacing:.06em;white-space:nowrap;text-align:center}
#fi.cut .fi-ghost{display:flex;animation:fiDrop .6s cubic-bezier(.2,1.4,.4,1) .06s both}
@keyframes fiDrop{from{transform:scale(1.9);opacity:0;letter-spacing:.3em}to{transform:none;opacity:1;letter-spacing:.06em}}

.fi-skip{position:absolute;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom));text-align:center;
  font-size:11px;letter-spacing:.2em;color:rgba(20,30,50,.55);animation:fiFade .6s .8s both;z-index:3}
#fi.cut .fi-skip{color:#9aa3ba}