/* Hero 单角色动态立绘：单一主体负责呼吸与视差，局部透明闭眼层只负责自然眨眼。 */
.hero-character {
    --body-look-x: 0px;
    --body-look-y: 0px;
    position: relative;
    isolation: isolate;
    width: clamp(360px, 36vw, 620px);
    height: clamp(560px, 80vh, 800px);
    min-width: 0;
}

.hero-character__viewport {
    position: relative;
    width: 100%;
    height: 100%;
    transform: translateY(-35px) scale(1.06);
    transform-origin: 50% 56%;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
}

.hero-character__viewport::before,
.hero-character__viewport::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.hero-character__viewport::before {
    inset: 12% 12% 8%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(129, 112, 238, 0.18), rgba(86, 139, 238, 0.08) 46%, transparent 72%);
    filter: blur(20px);
}

.hero-character__viewport::after {
    left: 25%;
    right: 25%;
    bottom: 1.5%;
    height: 4%;
    border-radius: 50%;
    background: rgba(34, 29, 84, 0.28);
    filter: blur(12px);
}

.hero-character__viewport:focus-visible {
    box-shadow:
        0 0 0 3px rgba(184, 164, 255, 0.7),
        0 0 38px rgba(123, 107, 229, 0.2);
}

/* 既有 .anime-mascot 负责点击进入制作台；此处把它收回角色镜头内部。 */
.hero-character__art.anime-mascot {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    pointer-events: auto;
    filter: drop-shadow(0 18px 38px rgba(15, 18, 52, 0.34));
    -webkit-mask-image: none;
    mask-image: none;
    transform-origin: 50% 54%;
}

/* 主角色已有独立呼吸层，关闭助手旧的整图 idle 动画，避免双重缩放产生漂浮感。 */
.hero-character__art.mascot-act-idle {
    animation: none;
}

.hero-character__art[data-character-id="youngWoman"] {
    translate: -12px 0;
}

.hero-character__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    scale: 0.955;
    user-select: none;
    will-change: translate, scale, opacity;
}

.hero-character__image--base {
    z-index: 0;
    translate: var(--body-look-x) var(--body-look-y);
    animation: hero-character-breathe 8.6s ease-in-out infinite;
}

/* 闭眼图只包含双眼柔边区域，与基础立绘共用呼吸和位移，始终贴合原画五官。 */
.hero-character__image--blink {
    z-index: 1;
    opacity: 0;
    translate: var(--body-look-x) var(--body-look-y);
    animation: hero-character-breathe 8.6s ease-in-out infinite;
    transition: opacity 55ms linear;
}

.hero-character__image--blink.is-blinking {
    opacity: 1;
}

/* 助手动作会临时替换主体素材；此时禁止旧角色的闭眼局部覆盖动作图。 */
.hero-character__art.mascot-act-wave .hero-character__image--blink,
.hero-character__art.mascot-act-cheer .hero-character__image--blink,
.hero-character__art.mascot-act-happy .hero-character__image--blink,
.hero-character__art.mascot-act-think .hero-character__image--blink,
.hero-character__art.mascot-act-interact .hero-character__image--blink {
    opacity: 0;
    transition: none;
}

.hero-character__caption {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 10px;
    width: clamp(130px, 12vw, 175px);
    padding: 0;
    border: 0;
    color: #fff;
    background: transparent;
    box-shadow: none;
    transform: translateX(-50%);
    pointer-events: none;
    white-space: nowrap;
}

.hero-character__caption::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 22% 8%;
    background: radial-gradient(ellipse, rgba(154, 176, 255, 0.58), rgba(167, 120, 255, 0.24) 44%, transparent 72%);
    filter: blur(9px);
    pointer-events: none;
}

.hero-character__title-image {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(1.2) contrast(1.12) saturate(1.08);
    user-select: none;
}

.hero-character__arrow {
    position: absolute;
    z-index: 6;
    top: 50%;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(229, 229, 255, 0.38);
    border-radius: 50%;
    color: #f7f6ff;
    background: rgba(18, 23, 56, 0.52);
    box-shadow: 0 10px 26px rgba(6, 8, 28, 0.3);
    backdrop-filter: blur(14px);
    transform: translateY(-50%);
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.hero-character__arrow:hover,
.hero-character__arrow:focus-visible {
    border-color: rgba(228, 214, 255, 0.88);
    background: rgba(126, 111, 225, 0.72);
    transform: translateY(-50%) scale(1.07);
    outline: none;
}

.hero-character__arrow svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-character__arrow--previous { left: 16px; }
.hero-character__arrow--next { right: 16px; }

.hero-character__art.is-revealing {
    animation: hero-character-switch 520ms cubic-bezier(0.2, 0.72, 0.25, 1) both;
}

@keyframes hero-character-breathe {
    0%, 100% { scale: 0.955; translate: var(--body-look-x) var(--body-look-y); }
    48% { scale: 0.958; translate: var(--body-look-x) calc(var(--body-look-y) - 0.8px); }
}

@keyframes hero-character-switch {
    from { opacity: 0.28; transform: translateX(var(--switch-offset, 14px)) scale(0.985); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@media (max-width: 1280px) and (min-width: 961px) {
    .hero-character {
        width: clamp(340px, 35vw, 440px);
    }

    .hero-character__arrow {
        width: 40px;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-character__image,
    .hero-character__art.is-revealing {
        animation: none;
        transition: none;
    }
}