/* =========================================================================
* SchoolLink 吉祥物 — mascot.css
*
* 權威來源:schoolbook_project 的角色基礎造型(精簡版,不含 V8 喙/噴氣孔/噴水)。
* 小澳 (xiao-ao) — 澳門白鷺:白臉 + 橘喙
* 小蓮 (xiao-lian) — 海豚:白臉 + 微笑 + 杏仁餅髮夾(杏) + 尾鰭
* 嗶嗶 (bibi) — 科技小精靈:深藍機身 + 青色螢幕臉 + 雙眼 + 天線
*
* 【尺寸機制】等比例 transform: scale —— 跟 SchoolBook 一致。
* 各部位座標只定義「一次」(基礎 80px),不同尺寸純粹整隔放大縮小,
* 位置/比例永遠不變(邊框、陰影也自動等比例)。
*
* markup:用 .sl-av(尺寸) 包住 .mascot-avatar(造型)
*
*
*
*
*
*
*
*
* 尺寸:sl-av--lg(120) / --md(80) / --sm(64) / --mini(40),或自訂 style="--ms:1.25"
* ========================================================================= */
/* 邊框算在尺寸內(對齊 schoolbook 全域 box-sizing:border-box)。
不設此項,有邊框的杏夾/微笑/avatar 會被撐大,看起來像另一隻。 */
.mascot-avatar, .mascot-avatar *, .mascot-avatar *::before, .mascot-avatar *::after { box-sizing: border-box; }
/* ===== 基礎造型(80px,座標只在這裡定義一次) ===== */
.mascot-avatar {
width: 80px; height: 80px; border-radius: 50%;
display: flex; justify-content: center; align-items: center;
position: relative; flex-shrink: 0;
box-shadow: var(--sl-shadow-sm);
}
/* 小澳 (白鷺) */
.xiao-ao-bg { background-color: #FFFFFF; border: 4px solid var(--sl-ao); }
.xiao-ao-face { width: 50px; height: 50px; background: #FFF; border-radius: 50%; position: relative; }
.xiao-ao-eye { position: absolute; width: 8px; height: 8px; background: #2C3E50; border-radius: 50%; top: 15px; left: 25px; animation: eye-blink 3.2s infinite ease-in-out; }
.xiao-ao-beak { position: absolute; width: 25px; height: 15px; background: #FFAD00; border-radius: 0 50% 50% 0; top: 18px; left: 35px; }
/* 小蓮 (海豚) */
.xiao-lian-bg { background-color: #FFFFFF; border: 4px solid var(--sl-lian); }
.xiao-lian-face { width: 50px; height: 50px; background: #FFFFFF; border-radius: 50%; position: relative; }
.xiao-lian-eye { position: absolute; width: 8px; height: 8px; background: #2C3E50; border-radius: 50%; top: 15px; left: 25px; animation: eye-blink 3.5s infinite ease-in-out 1.2s; }
.xiao-lian-smile-line { position: absolute; width: 14px; height: 8px; border: 2px solid var(--sl-lian); border-radius: 0 0 10px 10px; border-top: 0; top: 28px; left: 30px; display: block; }
.xiao-lian-clip { position: absolute; width: 12px; height: 12px; background: #e6cc80; border-radius: 50%; top: 3px; left: 12px; border: 1.5px dashed #b48a38; box-shadow: inset 0 0 2px rgba(0,0,0,0.1); }
.xiao-lian-clip::after { content: "杏"; position: absolute; font-size: 5.5px; font-weight: 900; color: #b48a38; top: 0.5px; left: 1.5px; line-height: 1; font-family: 'Noto Sans TC', sans-serif; }
.tail-fin-swim { position: absolute; width: 12px; height: 12px; background: var(--sl-lian); border-radius: 50% 50% 0 0; bottom: 6px; left: -8px; transform: rotate(-45deg); display: block; }
.tail-fin-swim::after { content: ""; position: absolute; width: 12px; height: 12px; background: var(--sl-lian); border-radius: 50% 50% 0 0; bottom: 0px; left: -6px; transform: rotate(90deg); }
/* 嗶嗶 (機器人) */
.bibi-bg { background-color: #2C3E50; border: 4px solid var(--sl-bibi); }
.bibi-face { width: 50px; height: 40px; background: #00E5FF; border-radius: 10px; position: relative; display: flex; justify-content: center; align-items: center; gap: 8px; }
.bibi-eye { width: 14px; height: 14px; background: #2C3E50; border-radius: 50%; animation: eye-blink 2.8s infinite ease-in-out; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 7.5px; font-weight: bold; font-family: 'Outfit', 'Inter', sans-serif; overflow: hidden; user-select: none; line-height: 1; }
.bibi-antenna { position: absolute; width: 4px; height: 12px; background: #FFD600; top: -12px; border-radius: 2px; }
.bibi-antenna::after { content: ""; position: absolute; width: 10px; height: 10px; background: #FFD600; border-radius: 50%; top: -6px; left: -3px; }
/* ===== 眨眼(去同步) ===== */
@keyframes eye-blink {
0%, 90%, 100% { transform: scaleY(1); }
95% { transform: scaleY(0.05); }
}
@media (prefers-reduced-motion: reduce) {
.xiao-ao-eye, .xiao-lian-eye, .bibi-eye { animation: none !important; }
}
/* =========================================================================
* 尺寸:等比例 transform scale(位置完全不變,只變大小)
* .sl-av 提供正確的版面佔位,內層 .mascot-avatar 等比例縮放;
* transform-origin: center 讓縮放後仍置中;尾鰭可自然溢出(超出圓圈)。
* ========================================================================= */
.sl-av { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.sl-av > .mascot-avatar { transform: scale(var(--ms, 1)); transform-origin: center; }
.sl-av--lg { width: 120px; height: 120px; --ms: 1.5; }
.sl-av--md { width: 80px; height: 80px; --ms: 1; }
.sl-av--sm { width: 64px; height: 64px; --ms: 0.8; }
.sl-av--mini { width: 40px; height: 40px; --ms: 0.5; }
/* =========================================================================
* 載入動畫:主角彈跳 + 影子(squash & stretch) —— 全站共用
* 用法:(mascot-theme.js 會展開)
* 或手動 markup:.sl-loader-stage > (.sl-loader-shadow + .sl-loader-hop > [data-hero])
* ========================================================================= */
/* 節奏 1.15s(較慢、不晃眼);三個動畫同步;波紋用主題色 var(--accent) */
.sl-loader-stage { position: relative; width: 130px; height: 124px; display: flex; align-items: flex-end; justify-content: center; }
.sl-loader-hop { transform-origin: 50% 100%; animation: sl-hop 1.15s cubic-bezier(.5,.05,.5,.95) infinite; }
.sl-loader-shadow { position: absolute; bottom: 4px; width: 62px; height: 12px; border-radius: 50%; background: rgba(0,0,0,0.16); filter: blur(2px); animation: sl-shadow 1.15s cubic-bezier(.5,.05,.5,.95) infinite; }
.sl-loader-ripple { position: absolute; bottom: 2px; width: 44px; height: 15px; border-radius: 50%; border: 2px solid var(--accent, #FF66A3); animation: sl-ripple 1.15s cubic-bezier(.5,.05,.5,.95) infinite; }
@keyframes sl-hop {
0% { transform: translateY(0) scale(1.08, 0.92); } /* 落地壓扁 */
18% { transform: translateY(0) scale(1, 1); }
50% { transform: translateY(-40px) scale(0.95, 1.06); } /* 升空拉長 */
82% { transform: translateY(0) scale(1, 1); }
100% { transform: translateY(0) scale(1.08, 0.92); }
}
@keyframes sl-shadow {
0%, 100% { transform: scale(1); opacity: 0.26; }
50% { transform: scale(0.55); opacity: 0.10; } /* 升空時影子縮小變淡 */
}
@keyframes sl-ripple {
0% { transform: scale(0.4); opacity: 0; }
8% { opacity: 0.5; } /* 落地泛起 */
50% { transform: scale(1.7); opacity: 0.34; } /* 主角升空、地面波紋顯露擴散 */
72%, 100% { transform: scale(2.7); opacity: 0; } /* 擴散到比腳掌寬後淡出 */
}
@media (prefers-reduced-motion: reduce) {
.sl-loader-hop, .sl-loader-shadow, .sl-loader-ripple { animation-duration: 2.2s; }
}
/* =========================================================================
* 使用者手動「減少動態」(html.sl-reduce-motion):停掉彈跳/波紋/眨眼,
* 載入改用柔和淡入淡出(仍可辨識在載入),減少視覺晃動。
* ========================================================================= */
html.sl-reduce-motion .sl-loader-shadow,
html.sl-reduce-motion .xiao-ao-eye,
html.sl-reduce-motion .xiao-lian-eye,
html.sl-reduce-motion .bibi-eye { animation: none !important; }
html.sl-reduce-motion .sl-loader-ripple { display: none; }
html.sl-reduce-motion .sl-loader-hop { animation: sl-soft-pulse 1.7s ease-in-out infinite !important; transform: none !important; }
@keyframes sl-soft-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }