body.single-post.ffwl-top-active .article-title,
body.single-post.ffwl-top-active .breadcrumb {
    display: none !important;
}

body.single-post.ffwl-top-active {
    background: var(--body-bg-color, #f7f8fb);
}

.ffwl-post-hero {
    --ffwl-hero-accent: #8ee6c3;
    --ffwl-hero-accent-rgb: 142, 230, 195;
    --ffwl-hero-title: #202733;
    position: relative;
    width: 100%;
    min-height: 410px;
    padding: 110px 24px 104px;
    margin: 0 0 42px;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(90deg, #f0edf4 0%, #f2f3f8 42%, #eef5f9 100%);
}

.ffwl-post-hero * {
    box-sizing: border-box;
}

/* 特色图整块铺底，不要绿色填充感 */
.ffwl-post-cover-panel {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: 0;
    opacity: 1;
    transform: none;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
    -webkit-mask-image: none;
    mask-image: none;
}

/* 超大模糊背景：拉大特色图，只取颜色氛围，不显示具体内容 */
.ffwl-post-cover-panel::before {
    content: "";
    position: absolute;
    left: -36%;
    right: -36%;
    top: -78%;
    bottom: -78%;
    z-index: 0;
    background-image: var(--ffwl-hero-cover);
    background-repeat: no-repeat;
    background-size: 185% auto;
    background-position: 48% 42%;
    filter: blur(86px) saturate(1.58) contrast(.96) brightness(1.08);
    opacity: .68;
    transform: scale(1.42) rotate(-6deg);
    transform-origin: center center;
}

/* 右侧主图：提高可见度，降低白雾压制 */
.ffwl-post-cover-panel img {
    --ffwl-cover-rotate: -7deg;
    --ffwl-cover-float-y: -6px;
    --ffwl-cover-float-x: -2px;
    position: absolute;
    right: 4.8%;
    top: 36px;
    width: min(46vw, 760px);
    height: auto;
    aspect-ratio: 2.08 / 1;
    object-fit: cover;
    object-position: center center;
    border-radius: 26px;
    transform: translate3d(0, 0, 0) rotate(var(--ffwl-cover-rotate));
    transform-origin: center center;
    filter: blur(.45px) saturate(.86) contrast(.96) brightness(.92);
    opacity: .78;
    box-shadow:
        0 34px 78px rgba(60, 70, 88, .18),
        0 8px 24px rgba(60, 70, 88, .08);
    animation: ffwl-cover-float 7.8s ease-in-out infinite;
    will-change: transform;
}

@keyframes ffwl-wave-move {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        transform: translate3d(85px, 0, 0);
    }
}

@keyframes ffwl-cover-float {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(var(--ffwl-cover-rotate));
    }

    45% {
        transform: translate3d(var(--ffwl-cover-float-x), var(--ffwl-cover-float-y), 0) rotate(calc(var(--ffwl-cover-rotate) + .35deg));
    }

    70% {
        transform: translate3d(1px, -2px, 0) rotate(calc(var(--ffwl-cover-rotate) - .15deg));
    }
}

/* 关键遮罩：比之前薄很多，目标站就是这种低透明灰白膜 */
.ffwl-post-cover-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background:
        linear-gradient(90deg,
            rgba(255,255,255,.52) 0%,
            rgba(255,255,255,.36) 34%,
            rgba(255,255,255,.20) 58%,
            rgba(255,255,255,.08) 100%
        ),
        linear-gradient(180deg,
            rgba(245,247,252,.03) 0%,
            rgba(245,247,252,.08) 54%,
            rgba(255,255,255,.18) 100%
        ),
        rgba(80, 82, 92, .045);
}

/* 插件顶部内部不再加粉蓝大色块 */
.ffwl-post-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.ffwl-post-hero-bg::before {
    content: "";
    position: absolute;
    left: -28%;
    top: -58%;
    width: 96%;
    height: 190%;
    border-radius: 50%;
    background-image: var(--ffwl-hero-cover);
    background-repeat: no-repeat;
    background-size: 170% auto;
    background-position: 34% 48%;
    filter: blur(96px) saturate(1.75) contrast(.95) brightness(1.08);
    opacity: .46;
    transform: rotate(-8deg) scale(1.18);
}

.ffwl-post-hero-bg::after {
    content: "";
    position: absolute;
    left: -16%;
    top: -20%;
    width: 62%;
    height: 128%;
    border-radius: 50%;
    background:
        radial-gradient(circle,
            rgba(170, 145, 205, .34) 0%,
            rgba(198, 180, 224, .22) 34%,
            rgba(235, 232, 242, .10) 58%,
            rgba(255,255,255,0) 78%
        );
    filter: blur(46px);
    opacity: .92;
}

/* 顶部玻璃层也减弱，避免发闷 */
.ffwl-post-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,.06) 0%,
            rgba(255,255,255,0) 42%,
            rgba(255,255,255,.22) 100%
        );
    pointer-events: none;
}

/* 底部弧面缩小，避免你现在的大白波浪 */
.ffwl-post-hero::after {
    content: "";
    position: absolute;
    left: -8%;
    right: -8%;
    bottom: -56px;
    height: 104px;
    z-index: 5;
    background: rgba(255,255,255,.88);
    border-radius: 52% 48% 0 0 / 38% 42% 0 0;
    transform: rotate(-.8deg);
    box-shadow: 0 -10px 26px rgba(90, 110, 130, .035);
    pointer-events: none;
}

.ffwl-hero-content {
    position: relative;
    z-index: 4;
}

.ffwl-hero-content::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 52%;
    width: min(760px, 82vw);
    height: 210px;
    transform: translate(-50%, -50%);
    z-index: -1;
    background:
        radial-gradient(ellipse at center,
            rgba(255,255,255,.48) 0%,
            rgba(255,255,255,.26) 42%,
            rgba(255,255,255,0) 74%
        );
    filter: blur(18px);
    pointer-events: none;
}

.ffwl-hero-labels {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.ffwl-hero-badge,
.ffwl-hero-category,
.ffwl-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 8px 16px;
    border-radius: 999px;
    color: rgba(32, 39, 51, .76);
    background: rgba(255, 255, 255, .76);
    border: 1px solid rgba(255, 255, 255, .86);
    box-shadow: 0 10px 30px rgba(30, 42, 58, .08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.ffwl-hero-badge:hover,
.ffwl-hero-category:hover,
.ffwl-hero-tag:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 14px 38px rgba(30, 42, 58, .12);
    color: var(--focus-color, #2b65f6);
    text-decoration: none;
}

.ffwl-hero-title {
    max-width: 960px;
    margin: 0 auto 24px;
    color: var(--ffwl-hero-title);
    font-size: clamp(32px, 4.2vw, 54px);
    line-height: 1.22;
    font-weight: 800;
    letter-spacing: .01em;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255,255,255,.58);
}

.ffwl-hero-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    color: rgba(32, 39, 51, .58);
    font-size: 15px;
    line-height: 1.6;
}

.ffwl-hero-meta a,
.ffwl-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(32, 39, 51, .58);
    text-decoration: none;
}

.ffwl-hero-meta a:hover {
    color: var(--focus-color, #2b65f6);
}

.ffwl-hero-meta i {
    opacity: .78;
}

.ffwl-hero-waves {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 92px;
    z-index: 7;
    line-height: 0;
    pointer-events: none;
    opacity: 1;
    filter: drop-shadow(0 -8px 18px rgba(80, 100, 120, .06));
}

.ffwl-hero-waves svg {
    display: block;
    width: 100%;
    height: 100%;
}

.ffwl-hero-waves::before {
    content: "";
    position: absolute;
    left: -12%;
    right: -12%;
    top: 8px;
    height: 26px;
    z-index: 2;
    background:
        linear-gradient(90deg,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,.34) 34%,
            rgba(255,255,255,.48) 50%,
            rgba(255,255,255,.24) 66%,
            rgba(255,255,255,0) 100%
        );
    filter: blur(9px);
    opacity: .38;
    transform: translate3d(-2%, 0, 0);
    animation: ffwl-wave-shimmer 8.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ffwl-wave-shimmer {
    0%, 100% {
        opacity: .28;
        transform: translate3d(-3%, 0, 0);
    }

    50% {
        opacity: .52;
        transform: translate3d(3%, -2px, 0);
    }
}

.ffwl-parallax > use {
    animation: ffwl-wave-move 25s cubic-bezier(.55,.5,.45,.5) infinite;
}

.ffwl-parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}

.ffwl-parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}

.ffwl-parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}

.ffwl-parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}

@keyframes ffwl-wave-move {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        transform: translate3d(85px, 0, 0);
    }
}

.ffwl-fade-up {
    opacity: 0;
    animation: ffwl-fade-up .62s ease forwards;
}

.ffwl-fade-up:nth-child(1) {
    animation-delay: .08s;
}

.ffwl-fade-up:nth-child(2) {
    animation-delay: .18s;
}

.ffwl-fade-up:nth-child(3) {
    animation-delay: .28s;
}

@keyframes ffwl-fade-up {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (max-width: 1024px) {
    .ffwl-post-hero {
        min-height: 390px;
        padding: 96px 20px 96px;
    }

    .ffwl-post-cover-panel {
        inset: 0;
        opacity: 1;
        transform: none;
    }

    .ffwl-post-cover-panel::before {
        inset: -36px;
        filter: blur(22px) saturate(.78) contrast(.92) brightness(1.04);
        opacity: .20;
        transform: scale(1.08);
    }

    .ffwl-post-cover-panel img {
        right: -4%;
        top: 42px;
        width: min(62vw, 680px);
        height: auto;
        aspect-ratio: 2.08 / 1;
        opacity: .60;
        border-radius: 22px;
        --ffwl-cover-rotate: -6deg;
        --ffwl-cover-float-y: -5px;
        --ffwl-cover-float-x: -1px;
        transform: translate3d(0, 0, 0) rotate(var(--ffwl-cover-rotate));
    }

    .ffwl-hero-title {
        max-width: 860px;
    }
}

@media screen and (max-width: 767px) {
    .ffwl-post-hero {
        min-height: 360px;
        padding: 78px 16px 86px;
        margin-bottom: 26px;
    }

    .ffwl-post-cover-panel {
        inset: 0;
        opacity: 1;
        transform: none;
    }

    .ffwl-post-cover-panel::before {
        inset: -30px;
        filter: blur(20px) saturate(.78) contrast(.92) brightness(1.04);
        opacity: .18;
        transform: scale(1.1);
    }

    .ffwl-post-cover-panel img {
        right: -34%;
        top: 64px;
        width: 112vw;
        height: auto;
        aspect-ratio: 2.08 / 1;
        opacity: .42;
        border-radius: 18px;
        --ffwl-cover-rotate: -4deg;
        --ffwl-cover-float-y: -4px;
        --ffwl-cover-float-x: -1px;
        transform: translate3d(0, 0, 0) rotate(var(--ffwl-cover-rotate));
    }

    .ffwl-post-cover-panel::after {
        background:
            linear-gradient(90deg,
                rgba(255,255,255,.86) 0%,
                rgba(255,255,255,.72) 38%,
                rgba(255,255,255,.56) 68%,
                rgba(255,255,255,.42) 100%
            ),
            linear-gradient(180deg,
                rgba(255,255,255,.08) 0%,
                rgba(245,247,252,.22) 52%,
                rgba(255,255,255,.58) 100%
            ),
            rgba(130,130,145,.16);
    }

    .ffwl-post-hero-bg::before {
        left: -36%;
        top: -18%;
        width: 90%;
        height: 90%;
        opacity: .72;
    }

    .ffwl-post-hero-bg::after {
        right: -32%;
        top: -18%;
        width: 90%;
        height: 90%;
        opacity: .72;
    }

    .ffwl-hero-labels {
        gap: 8px;
        margin-bottom: 18px;
    }

    .ffwl-hero-badge,
    .ffwl-hero-category,
    .ffwl-hero-tag {
        min-height: 30px;
        padding: 7px 12px;
        font-size: 13px;
    }

    .ffwl-hero-title {
        font-size: clamp(28px, 8vw, 38px);
        margin-bottom: 18px;
    }

    .ffwl-hero-meta {
        gap: 6px 12px;
        font-size: 13px;
    }

    .ffwl-hero-meta .ffwl-meta-views,
    .ffwl-hero-meta .ffwl-meta-comments {
        display: none;
    }

    .ffwl-hero-waves {
        height: 58px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ffwl-post-cover-panel img,
    .ffwl-hero-waves::before,
    .ffwl-parallax > use {
        animation: none !important;
    }
}