/* ============================================================
   数字西湖 · 首页右侧悬浮气泡
   ------------------------------------------------------------
   注入点：zb_users/theme/yd0819/template/footer.php（仅首页 index）
   目标页：/xihu/  （数字西湖 · 3D 交互全景）

   为什么样式单独成文件：
   Z-Blog 的模板引擎会把模板里的 { } 当作模板标签解析，
   直接内联 <style> 会让 `#id{...}` 这类规则被误判。独立静态文件即可规避。
   ============================================================ */

#szxh-bubble{
    position:fixed;
    right:0;
    top:50%;
    z-index:9990;
    display:block;
    width:56px;
    background:none;
    border:0;
    color:#f3fbf9;
    text-align:center;
    text-decoration:none;
    transform:translateY(-50%);
    transition:transform .34s cubic-bezier(.2,.8,.24,1), filter .34s;
    -webkit-tap-highlight-color:transparent;
    outline:none;
}

/* 气泡外晕：缓慢呼吸，像水面浮着的一个泡 */
#szxh-bubble::before{
    content:"";
    position:absolute;
    right:-16px;
    top:-16px;
    bottom:-16px;
    left:-16px;
    border-radius:44px;
    background:radial-gradient(58% 46% at 76% 50%, rgba(23,169,155,.44), rgba(23,169,155,0) 72%);
    z-index:-1;
    animation:szxh-breath 3.8s ease-in-out infinite;
}

/* 气泡本体 */
#szxh-bubble .szxh-core{
    position:relative;
    z-index:1;
    display:block;
    padding:17px 0 15px;
    border-radius:28px 0 0 28px;
    background:linear-gradient(158deg,#17a99b 0%,#0e7f87 44%,#0a5567 100%);
    box-shadow:
        0 8px 26px rgba(10,85,103,.30),
        inset 0 0 0 1px rgba(255,255,255,.20);
}

/* 顶部一枚水滴（内联 SVG，见模板） */
#szxh-bubble .szxh-ico{
    display:block;
    width:15px;
    height:15px;
    margin:0 auto 10px;
    fill:rgba(255,255,255,.94);
    filter:drop-shadow(0 0 5px rgba(224,255,250,.62));
}

/* 竖排站名（inline-block 才能被父级 text-align 居中） */
#szxh-bubble .szxh-txt{
    display:inline-block;
    writing-mode:vertical-rl;
    text-orientation:upright;
    font-size:15px;
    font-weight:600;
    letter-spacing:5px;
    line-height:1;
    text-shadow:0 1px 2px rgba(0,0,0,.20);
}

#szxh-bubble:hover,
#szxh-bubble:focus{
    transform:translateY(-50%) translateX(-5px);
    filter:brightness(1.08);
    color:#ffffff;
}

#szxh-bubble:hover .szxh-core,
#szxh-bubble:focus .szxh-core{
    box-shadow:
        0 10px 32px rgba(10,85,103,.42),
        inset 0 0 0 1px rgba(255,255,255,.34);
}

#szxh-bubble:active{
    transform:translateY(-50%) translateX(-2px);
}

@keyframes szxh-breath{
    0%,100%{ opacity:.45; transform:scale(.94); }
    50%    { opacity:.95; transform:scale(1.08); }
}

/* 窄屏收敛，别挡正文 */
@media (max-width:768px){
    #szxh-bubble{ width:44px; }
    #szxh-bubble .szxh-core{ padding:13px 0 12px; border-radius:22px 0 0 22px; }
    #szxh-bubble .szxh-ico{ width:11px; height:11px; margin-bottom:8px; }
    #szxh-bubble .szxh-txt{ font-size:13px; letter-spacing:3px; }
    #szxh-bubble::before{ right:-10px; top:-10px; bottom:-10px; left:-10px; border-radius:34px; }
}

@media (prefers-reduced-motion:reduce){
    #szxh-bubble::before{ animation:none; opacity:.7; }
    #szxh-bubble{ transition:none; }
}