/* ============================================================================
   捐款框（宽屏专用）
   只有宽屏（min-aspect-ratio: 1/1）才显示——窄屏时侧边栏没空间，硬塞会把按钮挤成两行。
   视觉语言跟着站点走：半透明白底 + 蓝色主色 #4285F4 + 红色主按钮（#ee5353 取自
   Blender 捐款组件的实测色，见 798x562 截图采样）。
   ============================================================================ */

.donate-box {
    display: none;                     /* 默认隐藏，宽屏媒体查询里再打开 */
    width: 100%;
    flex-direction: column;
    gap: 10px;
    padding: 14px 14px 12px;
    border-radius: 12px;
    /* 老大要「纯透明」：底、边框、阴影、模糊全不要，直接浮在侧边栏上 */
    background-color: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    text-align: left;
}

/* 宽屏（横向）才出现，并且整块落在侧边栏最下面 */
@media (min-aspect-ratio: 1/1) {
    .donate-box {
        display: flex;
    }

    /* 老大 2026-10-17：金额改成带玩笑话的竖排列表后，捐款块从约 205px 长到约 345px，
       原来的 absolute 钉底会压到上面的按钮。改成弹性布局：
       上半部分（头像/名字/按钮）flex:1 居中吃掉剩余空间，捐款框自然落在最下面，
       屏幕再矮也只是上半部分变紧，不会重叠。 */
    .card1 {
        align-items: stretch;
    }

    .card1-top {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 25px;
    }
}

.donate-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
}

.donate-sub {
    font-size: 12px;
    color: #5f6368;
    line-height: 1.4;
    margin-top: -4px;
}

/* ── 货币切换：¥ CNY / $ USD（蓝色滑块会滑过去，老大 2026-10-17 要的"流畅动画"）── */
.donate-cur {
    position: relative;
    display: flex;
    gap: 4px;
    padding: 3px;
    background-color: rgba(0, 0, 0, 0.06);
    border-radius: 9px;
}

/* 滑块：宽 = 单个按钮宽（容器内宽一半减一点），两者之间靠 gap 4px 分开 */
.donate-cur .cur-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 5px);
    height: calc(100% - 6px);
    border-radius: 7px;
    background-color: #4285F4;
    pointer-events: none;
    transform: translateX(0);
    transition: transform 0.34s cubic-bezier(0.34, 1.16, 0.64, 1);
}

.donate-cur[data-cur="usd"] .cur-thumb {
    transform: translateX(calc(100% + 4px));
}

.donate-cur button {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    height: 30px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #444;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.24s ease;
}

.donate-cur button:hover {
    color: #1a1a1a;
}

/* 底色交给滑块，按下的那颗只改字色（这样滑过去才有"移动"感） */
.donate-cur button[aria-pressed="true"] {
    background-color: transparent;
    color: #fff;
}

/* ── 金额按钮：5 / 10 / 20 / 50 / 100（文案挂在「确认捐助」按钮上，见下）── */
.donate-amounts {
    display: flex;
    gap: 5px;
}

.donate-amounts button {
    flex: 1 1 0;
    min-width: 0;
    height: 36px;
    padding: 0 2px;
    border: 1.5px solid #d7dbe0;
    border-radius: 8px;
    background-color: #fff;
    color: #333;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s, transform 0.16s ease, opacity 0.16s ease;
}

/* 切货币：金额先淡出淡上去，再逐个错开淡入（配合滑块的位移） */
.donate-amounts.is-out button {
    opacity: 0;
    transform: translateY(-5px);
}

@keyframes amtIn {
    from {
        opacity: 0;
        transform: translateY(7px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.donate-amounts.is-in button {
    animation: amtIn 0.3s cubic-bezier(0.34, 1.1, 0.64, 1) both;
}

.donate-amounts.is-in button:nth-child(2) { animation-delay: 0.035s; }
.donate-amounts.is-in button:nth-child(3) { animation-delay: 0.07s; }
.donate-amounts.is-in button:nth-child(4) { animation-delay: 0.105s; }
.donate-amounts.is-in button:nth-child(5) { animation-delay: 0.14s; }

.donate-amounts button:hover {
    border-color: #b9c0c8;
}

.donate-amounts button[aria-pressed="true"] {
    background-color: #4285F4;
    border-color: #4285F4;
    color: #fff;
}

/* ── 确认捐助按钮：爱心在按钮里自下而上飘，悬停时过渡 ─────────────────
   两个状态都按截图采样过（老大给的几张图）：
     常态：背景 #ee5353，爱心是半透明白（约 28%），小颗散在按钮各处，
           各按自己的速度**自下而上**飘（升到顶淡出，再从下方重新出现）
     悬停：背景压暗到 #4c2e2e（实测 rgb(76,46,46)），背景的心变成**红色**
           （≈ 实测 rgb(205,75,75)）；只有「确认捐助」右边那颗是**白色带光晕**，
           文字浮起一层白色辉光 —— 走 0.35s 过渡
   ==================================================================== */
.donate-go {
    position: relative;
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 8px;
    background-color: #ee5353;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    overflow: hidden;                   /* 爱心只在按钮里，不飞出去 */
    transition: background-color 0.35s ease, transform 0.12s ease;
}

.donate-go:hover,
.donate-go.is-hover {
    background-color: #4c2e2e;
}

.donate-go:active {
    transform: scale(0.985);
}

.go-hearts {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* 不再是"字符 ♥"，改成**剪影形状**（老大 2026-10-17：薯片/奶茶/干脆面/炸鸡）：
   用 mask 把 SVG 剪影当字形，颜色仍走 color —— 所以常态半透明白、悬停变红这套照旧生效。 */
.go-hearts .gh {
    position: absolute;
    color: #fff;
    background-color: currentColor;
    width: var(--sz, 12px);
    height: var(--sz, 12px);
    -webkit-mask-image: var(--shape);
    mask-image: var(--shape);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    /* --o = 这颗此刻多亮：常态淡、悬停亮。亮度写进关键帧引用它，
       否则动画的 opacity 会盖掉悬停时的提亮。 */
    --o: 0.28;
    transform: translate(-50%, -50%) scale(1);
    opacity: var(--o);
    transition: transform 0.45s ease, color 0.35s ease, filter 0.35s ease;
    translate: 0 12px;
    animation: heartUp var(--fdur, 2.8s) ease-in-out var(--fdel, 0s) infinite;
}

/* 剪影素材：四种吃的 + 一颗心。选哪一档，按钮里飘的就换成哪一个（老大 2026-10-17）——
   第五档（¥100）就是心心 */
.go-hearts {
    --icon-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' stroke='black' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round' d='M12 20.6C12 20.6 3.8 15.4 3.8 9.9 3.8 7 6.1 4.7 8.9 4.7c1.7 0 3 .9 3.1 2 .1-1.1 1.4-2 3.1-2 2.8 0 5.1 2.3 5.1 5.2 0 5.5-8.2 10.7-8.2 10.7z'/%3E%3C/svg%3E");
    --icon-chip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' stroke='black' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round' d='M12 2.8c1.9.2 2.6 1.6 4.1 2.1 1.5.5 2.9-.1 3.8 1.3.9 1.4-.1 2.6.3 4.1.4 1.5 1.7 2.1 1.3 3.7-.4 1.6-1.8 1.9-3 3.1-1.2 1.2-1.4 2.6-3 2.6-1.6 0-2-1.4-3.4-1.8-1.4-.4-2.8.6-4-.6-1.2-1.2-.3-2.6-.9-4-.6-1.4-2-1.8-2-3.4 0-1.6 1.4-2 2.2-3.2.8-1.2.6-2.6 2-3.2 1.3-.6 1.7.5 2.6.7z'/%3E%3C/svg%3E");
    --icon-tea: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' stroke='black' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round' d='M5.6 9.4h12.8l-1.6 10.6c-.1 1-1 1.7-2 1.7H9.2c-1 0-1.9-.7-2-1.7Z M4.4 7.2h15.2c.6 0 1 .4 1 1v.7c0 .6-.4 1-1 1H4.4c-.6 0-1-.4-1-1v-.7c0-.6.4-1 1-1z M13.1 1.9L16.8 7.5 14.5 9 10.8 3.4Z'/%3E%3C/svg%3E");
    --icon-noodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' stroke='black' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round' d='M5.8 9.6h12.4l-1.7 10.6c-.1.9-.9 1.6-1.8 1.6H9.3c-.9 0-1.7-.7-1.8-1.6Z M5.6 9.9c1.5-2.7 3.9-2.7 5.3-.7 1.4 2 3 2 4.4 0 1.4-2 3.8-2 5.3.7z'/%3E%3C/svg%3E");
    --icon-chicken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' stroke='black' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round' d='M15.6 3.1c3.4-1 6.4 1.4 6.2 4.9-.2 3.3-2.9 5.8-6.3 5.5-1.2-.1-2.3-.6-3.1-1.3-2.6-.4-4.4-2.4-4.1-4.8.3-2.2 2.2-3.7 4.4-3.6 1 0 2 .2 2.9.5z M8.9 13.9 6.3 16.5'/%3E%3C/svg%3E");
    --shape: var(--icon-heart);
}

.go-hearts[data-food="chip"]    { --shape: var(--icon-chip); }
.go-hearts[data-food="tea"]     { --shape: var(--icon-tea); }
.go-hearts[data-food="noodle"]  { --shape: var(--icon-noodle); }
.go-hearts[data-food="chicken"] { --shape: var(--icon-chicken); }
.go-hearts[data-food="heart"]   { --shape: var(--icon-heart); }
/* 自下而上：从按钮下部升到上部，快到位时淡出，再从下面重新出现
   速度 = 上一版 ×1.5（周期 4.2→2.8｜5.1→3.4｜3.4→2.27｜4.7→3.13｜3.9→2.6 秒） */
@keyframes heartUp {
    0% {
        translate: 0 12px;
        opacity: 0;
    }
    12% {
        opacity: var(--o);
    }
    75% {
        translate: 0 -6px;
        opacity: var(--o);
    }
    100% {
        translate: 0 -10px;
        opacity: 0;
    }
}

/* 四颗飘浮：位置/大小/速度各不相同，相位错开（形状由容器上的 data-food 决定） */
.go-hearts .gh-1 { left: 11%; top: 63%; --sz: 16px; --fdur: 2.8s;  --fdel: -0.4s; }
.go-hearts .gh-2 { left: 85%; top: 38%; --sz: 23px; --fdur: 3.4s;  --fdel: -1.4s; }
.go-hearts .gh-3 { left: 78%; top: 72%; --sz: 14px; --fdur: 2.27s; --fdel: -0.8s; }
.go-hearts .gh-4 { left: 22%; top: 17%; --sz: 16px; --fdur: 3.13s; --fdel: -0.2s; }

/* 第五档是心心：心比吃的细，退回原来那档尺寸才不显笨 */
.go-hearts[data-food="heart"] .gh-1 { --sz: 13px; }
.go-hearts[data-food="heart"] .gh-2 { --sz: 19px; }
.go-hearts[data-food="heart"] .gh-3 { --sz: 11px; }
.go-hearts[data-food="heart"] .gh-4 { --sz: 13px; }/* 悬停：背景的心变红（#ee5353 以 0.82 叠在 #4c2e2e 上 ≈ 实测 rgb(205,75,75)），
   只有「确认捐助」右边那颗（.go-pop）是白的 */
.donate-go:hover .gh,
.donate-go.is-hover .gh {
    --o: 0.82;
    color: #ee5353;
    transform: translate(-50%, -50%) scale(1.12);
}

/* 中间那颗更红一点，对应图里按钮上沿那颗 */
.donate-go:hover .gh-4,
.donate-go.is-hover .gh-4 {
    --o: 1;
    color: #ff5a5a;
    transform: translate(-50%, -50%) scale(1.3);
}
.go-label {
    position: relative;
    z-index: 1;
    transition: text-shadow 0.35s ease;
}

.donate-go:hover .go-label,
.donate-go.is-hover .go-label {
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.5);
}

/* 系统开了「减少动态效果」→ 心不飘，只保留悬停的提亮；切货币也不做动画 */
@media (prefers-reduced-motion: reduce) {
    .donate-cur .cur-thumb,
    .donate-amounts button,
    .donate-note {
        transition: none !important;
    }

    .donate-amounts.is-in button,
    .donate-note.is-in {
        animation: none !important;
    }

    .go-hearts .gh {
        animation: none;
        translate: 0 0;
    }

    .donate-go:hover .go-pop,
    .donate-go.is-hover .go-pop {
        transition: none;
    }
}

/* 悬停时「确认捐助」右边冒出来的那颗心：从无到有弹出来（回弹曲线） */
.go-pop {
    position: absolute;
    left: calc(50% + var(--pop-left, 44px));   /* 由 JS 按「文字宽度/2 + 12」写入，文字变长心也跟着靠右 */
    top: 50%;
    z-index: 2;
    font-size: 15px;
    line-height: 1;
    color: #fff;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.95));
    transition: opacity 0.22s ease, transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.donate-go:hover .go-pop,
.donate-go.is-hover .go-pop {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ── 底部说明 ─────────────────────────────────────────────────────── */
/* 切货币时底部说明淡入（换平台名时不硬跳） */
@keyframes noteIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.donate-note.is-in {
    animation: noteIn 0.3s ease both;
}

.donate-note {
    display: block;
    font-size: 11px;
    color: #6b7280;
    text-decoration: underline;
    text-align: center;
    line-height: 1.4;
}

.donate-note:hover {
    color: #4285F4;
}