/* tian hearts — 点击头像点亮爱心（毛玻璃小药丸 + 漂浮爱心动画）
   计数走 Waline 的 article 接口（type=reaction0），与文章点赞同一套后端。 */

.moments-header {
    position: relative;
}

/* 头像：禁止长按弹出系统菜单 / 图片接管（小米等自带浏览器），点按只走爱心逻辑 */
.header-avatar {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}
.header-avatar img {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-select: none;
}

/* 爱心计数小药丸：挂在名字下方，与全站毛玻璃同一套语言 */
.heart-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 4px 12px 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.45);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 8px rgba(0, 0, 0, 0.12);
    color: #1d1d1f;
    font-size: 13px;
    line-height: 1.5;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.heart-pill:active {
    transform: scale(0.94);
}

.heart-pill .heart-pill-icon {
    font-size: 13px;
    filter: grayscale(1);
    opacity: 0.5;
    transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.heart-pill.voted {
    background: rgba(255, 45, 85, 0.16);
    border-color: rgba(255, 45, 85, 0.38);
}

.heart-pill.voted .heart-pill-icon {
    filter: none;
    opacity: 1;
}

.heart-pill-count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    display: inline-block;
}

.heart-pill-count.pulse {
    animation: heart-count-pulse 0.45s ease;
}

@keyframes heart-count-pulse {
    35% { transform: scale(1.45); }
}

/* 漂浮爱心层：覆盖整个封面区，不拦截点击 */
.heart-layer {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 30;
}

.heart-big,
.heart-mini {
    position: absolute;
    pointer-events: none;
    user-select: none;
    line-height: 1;
    will-change: transform, opacity;
}

.heart-big {
    font-size: 54px;
    filter: drop-shadow(0 6px 16px rgba(255, 45, 85, 0.45));
    animation: heart-pop 0.95s cubic-bezier(0.22, 1.4, 0.36, 1) forwards;
}

@keyframes heart-pop {
    0%   { transform: translate(-50%, -50%) scale(0.3) rotate(-8deg); opacity: 0; }
    22%  { opacity: 1; }
    45%  { transform: translate(-50%, -58%) scale(1.18) rotate(3deg); opacity: 1; }
    65%  { transform: translate(-50%, -62%) scale(0.96) rotate(0deg); }
    100% { transform: translate(-50%, -95%) scale(1.02); opacity: 0; }
}

.heart-big.bye {
    filter: grayscale(1) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
    animation: heart-bye 0.7s ease-in forwards;
}

@keyframes heart-bye {
    0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
    100% { transform: translate(-50%, -28%) scale(0.7); opacity: 0; }
}

.heart-mini {
    animation: heart-float 1.15s ease-out forwards;
}

@keyframes heart-float {
    0%   { transform: translate(-50%, -50%) scale(0.5) rotate(0deg); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translate(calc(-50% + var(--dx, 0px)), -125px) scale(1.05) rotate(var(--rot, 0deg)); opacity: 0; }
}

/* 深色模式下的药丸 */
[data-theme="dark"] .heart-pill {
    background: rgba(40, 40, 48, 0.5);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 8px rgba(0, 0, 0, 0.35);
    color: #f5f5f7;
}

[data-theme="dark"] .heart-pill.voted {
    background: rgba(255, 45, 85, 0.28);
    border-color: rgba(255, 45, 85, 0.45);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .heart-pill { background: rgba(255, 255, 255, 0.92); }
    [data-theme="dark"] .heart-pill { background: rgba(40, 40, 48, 0.92); }
}

@media (prefers-reduced-motion: reduce) {
    .heart-big, .heart-mini { animation-duration: 0.01s; }
    .heart-pill-count.pulse { animation: none; }
}