/*
 * 产品页背景层与小人摆位（只在产品页加载，token 见 css/tokens-product.css）：
 * 页头用首页流体背景的静态图（img/product/hero-fluid.webp）+ 深色遮罩，底部渐隐到页面底色，呼应首页；
 * 之后的区块交替使用品牌蓝极淡光晕（--glow / --glow-end）、1px 网格（--grid）、区块分隔细线（--divider）；
 * 功能插图框改成带光晕的玻璃卡，与首页新闻卡同质感。仍只用 --brand-blue 一个强调色。
 */

/* =========================================================
 * 页头：流体静态图 + 遮罩（伪元素铺满，文字在上层）
 * ========================================================= */
.p-page .p-head {
    position: relative;
    isolation: isolate;
}

.p-head::before,
.p-head::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.p-head::before {
    background: url("../img/product/hero-fluid.webp") center top / cover no-repeat;
    opacity: var(--p-head-img-opacity);
}

.p-head::after {
    background: linear-gradient(
        180deg,
        var(--p-head-veil-top) 0%,
        var(--p-head-veil-mid) var(--p-head-veil-mid-at),
        var(--p-head-veil-end) var(--p-head-veil-end-at)
    );
}

/* 截图框外再包一层定位容器，小人站 / 坐在截图框上沿（截图本身有渐隐 mask，小人不能放进去） */
.p-shot-wrap {
    position: relative;
}

.p-shot {
    background: var(--bg);
}

.p-shot__walker {
    /* 只在左侧三分之二来回走，不撞上右边坐着的那位 */
    --crew-walk-end: calc(66% - var(--crew-md));
}

.p-shot__sitter {
    position: absolute;
    right: var(--space-10);
    bottom: 100%;
}

/* =========================================================
 * 区块背景：光晕 / 网格 / 分隔线
 * ========================================================= */
.p-sec--glow,
.p-sec--glow-end,
.p-sec--grid {
    position: relative;
    isolation: isolate;
}

.p-sec--glow::before,
.p-sec--glow-end::before,
.p-sec--grid::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* 顶部居中的一团蓝色光晕 */
.p-sec--glow::before {
    background: radial-gradient(
        var(--p-glow-w) var(--p-glow-h) at 50% 0%,
        var(--p-glow) 0%,
        var(--p-glow-none) var(--p-glow-reach)
    );
}

/* 右侧偏下的一团更淡的光晕，和上一个区块错开位置 */
.p-sec--glow-end::before {
    background: radial-gradient(
        var(--p-glow-w) var(--p-glow-h) at 100% 40%,
        var(--p-glow-faint) 0%,
        var(--p-glow-none) var(--p-glow-reach)
    );
}

/* 1px 网格，上下渐隐，不出现硬边 */
.p-sec--grid::before {
    background-image:
        linear-gradient(var(--p-grid-line) var(--line-width), transparent var(--line-width)),
        linear-gradient(90deg, var(--p-grid-line) var(--line-width), transparent var(--line-width));
    background-size: var(--p-grid-cell) var(--p-grid-cell);
    background-position: center top;
    -webkit-mask-image: linear-gradient(180deg, transparent, var(--p-mask-opaque) var(--p-grid-fade), var(--p-mask-opaque) calc(100% - var(--p-grid-fade)), transparent);
    mask-image: linear-gradient(180deg, transparent, var(--p-mask-opaque) var(--p-grid-fade), var(--p-mask-opaque) calc(100% - var(--p-grid-fade)), transparent);
}

/* 区块分隔：一条与内容同宽的 1px 细线 */
.p-sec--divider > .p-wrap {
    position: relative;
}

.p-sec--divider > .p-wrap::before {
    content: "";
    position: absolute;
    top: calc(var(--p-section-y) * -0.5);
    left: var(--page-px);
    right: var(--page-px);
    height: var(--line-width);
    background: var(--line);
}

/* =========================================================
 * 功能插图：带光晕的玻璃卡（替代纯灰底），卡角站一位「负责人」
 * ========================================================= */
.p-page .feat__fig {
    position: relative;
    overflow: visible;
    border-color: var(--p-glass-line);
    background:
        radial-gradient(circle at 80% 0%, var(--p-glass-glow) 0%, var(--p-glow-none) var(--p-glass-glow-reach)),
        var(--p-glass-bg);
    -webkit-backdrop-filter: blur(var(--p-glass-blur));
    backdrop-filter: blur(var(--p-glass-blur));
}

/* 顶部高光线（与首页新闻卡一致） */
.p-page .feat__fig::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--space-6);
    right: var(--space-6);
    height: var(--line-width);
    background: linear-gradient(90deg, transparent, var(--p-glass-highlight), transparent);
}

.feat__fig > img:not(.crew) {
    border-radius: var(--radius-lg);
    opacity: var(--p-glass-img-opacity);
    mix-blend-mode: lighten;
}

.feat__owner {
    position: absolute;
    right: var(--space-6);
    bottom: 100%;
}

/* =========================================================
 * 更新日志标题旁、常见问题左栏的小人
 * ========================================================= */
.p-title-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-4);
}

.faq__head {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: var(--space-8);
}

@media (max-width: 768px) {
    .p-shot__sitter {
        right: var(--space-4);
    }

    .faq__crew {
        display: none;
    }
}