/*
 * 装饰小人（template-parts/crew-figure.php 输出的 img.crew）：尺寸档、克制的动效，以及文章页里的摆放位置。
 * 产品页与文章类页面加载；产品页的摆放位置在 css/product-backdrop.css 与 css/product-download.css。
 * 动效一次只动一处：sway 只在悬停所在容器（.crew-host）时轻摆，walk / bob 速度很慢；减少动态效果时全部关闭。
 */

.crew {
    display: block;
    flex: none;
    width: auto;
    max-width: none;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.crew--sm { height: var(--crew-sm); }
.crew--md { height: var(--crew-md); }
.crew--lg { height: var(--crew-lg); }
.crew--xl { height: var(--crew-xl); }

/* sway：脚底为轴轻摆一次 */
.crew--sway {
    transform-origin: 50% 100%;
}

.crew-host:hover .crew--sway,
.crew-host:focus-within .crew--sway {
    animation: crew-sway var(--crew-sway-dur) var(--ease-in-out);
}

@keyframes crew-sway {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(calc(var(--crew-sway-angle) * -1)); }
    75% { transform: rotate(var(--crew-sway-angle)); }
}

/* bob：缓慢上下浮动 */
.crew--bob {
    animation: crew-bob var(--crew-bob-dur) var(--ease-in-out) infinite alternate;
}

@keyframes crew-bob {
    from { transform: translateY(0); }
    to { transform: translateY(var(--crew-bob-y)); }
}

/*
 * walk：在定位父级的上沿来回走，掉头时水平翻转（素材面朝右）。
 * 起止位置可由摆放处用 --crew-walk-start / --crew-walk-end 覆盖（默认走满父级宽度）。
 */
.crew--walk {
    position: absolute;
    bottom: 100%;
    left: var(--crew-walk-start, var(--space-6));
    animation: crew-walk var(--crew-walk-dur) linear infinite;
}

@keyframes crew-walk {
    0% { left: var(--crew-walk-start, var(--space-6)); transform: scaleX(1); }
    49.9% { left: var(--crew-walk-end, calc(100% - var(--crew-md))); transform: scaleX(1); }
    50% { left: var(--crew-walk-end, calc(100% - var(--crew-md))); transform: scaleX(-1); }
    99.9% { left: var(--crew-walk-start, var(--space-6)); transform: scaleX(-1); }
    100% { left: var(--crew-walk-start, var(--space-6)); transform: scaleX(1); }
}

/* =========================================================
 * 文章页：列表页头右上角一组（与眉标同高，避开下方的分类筛选）、空态、404
 * ========================================================= */
.a-head--crew .a-wrap {
    position: relative;
}

.a-head__crew {
    position: absolute;
    top: 0;
    right: var(--page-px);
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
}

.a-empty__crew {
    margin-bottom: var(--space-2);
}

.a-head--404 .a-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-12);
}

.a-head__body {
    min-width: 0;
}

@media (max-width: 1023px) {
    .a-head__crew {
        position: static;
        margin-bottom: var(--space-6);
    }
}

@media (max-width: 768px) {
    .a-head--404 .a-wrap {
        grid-template-columns: 1fr;
    }

    .a-head--404 .crew--xl {
        height: var(--crew-lg);
        justify-self: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .crew--bob,
    .crew--walk,
    .crew-host:hover .crew--sway,
    .crew-host:focus-within .crew--sway {
        animation: none;
    }
}