* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
    background: #fceaf1;
    color: #111;
    font-family: Arial, "Microsoft YaHei", sans-serif;
}

a {
    text-decoration: none;
}

button {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

img {
    display: block;
    max-width: 100%;
}

.site4-page,
.hero-shell {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    background: #0a0610;
}

/* PC：固定 1920×1080 前景画布，由 main.js 等比缩放并居中。 */
.pc-stage {
    --pc-scale: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 1920px;
    height: 1080px;
    margin-left: -960px;
    margin-top: -540px;
    transform: scale(var(--pc-scale));
    transform-origin: center center;
}

.h5-stage {
    display: none;
}

.spinner-container {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
}

.spinner {
    width: 44px;
    height: 44px;
    border: 4px solid rgba(255, 255, 255, 0.28);
    border-top-color: #ff4dcc;
    border-radius: 50%;
    animation: spin 900ms linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 安卓安装说明弹窗。 */
.android-modal {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    color: #000;
}

.android-modal.two {
    z-index: 120;
}

.android-modal .header {
    position: relative;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100vw;
    padding: 2vw 1vw;
    box-shadow: 0 3px 5px rgba(57, 63, 72, 0.1);
}

.android-modal .header .android-modal-arrow {
    cursor: pointer;
}

.android-modal .header .android-modal-arrow img {
    height: 6vw;
}

.android-modal .header .title {
    display: flex;
    flex: 1;
    justify-content: center;
}

.android-modal .header .title img {
    max-width: 68vw;
    max-height: 12vw;
    object-fit: contain;
}

.android-modal .content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    padding: 0.5rem 0.4rem 3rem;
}

.android-modal .content .platform-item {
    width: 90%;
    cursor: pointer;
}

.android-modal .content .platform-item img,
.android-modal .content .modal-common-img,
.android-modal .content .modal-common-img-2 {
    width: 100%;
}

#platform-list,
#platform-detail,
#ios-detail {
    display: none;
}

/* site4 PC：Figma 1920×1080，坐标来自节点 9124:480。 */
.pc4-stage {
    overflow: visible;
    isolation: isolate;
}

.pc4-layer,
.pc4-action {
    position: absolute;
    display: block;
    margin: 0;
}

.pc4-layer {
    z-index: 1;
    max-width: none;
    pointer-events: none;
    user-select: none;
}

.pc4-action {
    z-index: 3;
    transition: transform 160ms ease, filter 160ms ease;
}

.pc4-action:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
}

.pc4-action:focus-visible {
    outline: 3px solid rgba(255, 69, 137, 0.75);
    outline-offset: 3px;
    border-radius: 999px;
}

.pc4-action img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
}

.pc4-hero-composite {
    left: 640px;
    top: 75px;
    width: 1279px;
    height: 775px;
}

.pc4-hero-character {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
}

/* 呼吸动画约束：左右半各渲染一份合成图，沿 x=50% 切开。
   依赖素材中线附近为透明区（PC 版约 37%~67%、H5 版约 41%~59% 为空白），
   更换 hero-composite 素材时必须保持角色不越过中线，否则会出现竖切/撕裂。 */
.pc4-hero-character-left {
    clip-path: inset(0 50% 0 0);
    transform-origin: 23% 79%;
    animation: character-breathe-left 4.8s ease-in-out infinite;
}

.pc4-hero-character-right {
    clip-path: inset(0 0 0 50%);
    transform-origin: 83% 78%;
    animation: character-breathe-right 4.35s ease-in-out -1.4s infinite;
}

/* 位移用百分比（相对元素自身高度），PC 与 H5 共用同一套关键帧。 */
@keyframes character-breathe-left {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    }

    48%,
    58% {
        transform: translate3d(0, -0.39%, 0) scale3d(1.004, 1.009, 1);
    }
}

@keyframes character-breathe-right {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    }

    46%,
    57% {
        transform: translate3d(0, -0.39%, 0) scale3d(1.003, 1.008, 1);
    }
}

.pc4-comic-label {
    left: 1265px;
    top: 293px;
    width: 288px;
    height: 171px;
}

.pc4-trust-points {
    left: 107px;
    top: 481px;
    width: 496px;
    height: 147px;
}

.pc4-bottom-ribbon {
    left: 0;
    top: 1031px;
    width: 1919px;
    height: 49px;
}

.pc4-headline {
    left: 124px;
    top: 149px;
    width: 548px;
    height: 318px;
}

.pc4-download-panel {
    left: 99px;
    top: 645px;
    width: 1724px;
    height: 214px;
}

.pc4-brand {
    left: 58px;
    top: 8px;
    width: 378px;
    height: 100px;
}

.pc4-top-group {
    left: 1675px;
    top: 24px;
    width: 215px;
    height: 63px;
}

.pc4-resource-cards {
    left: 96px;
    top: 896px;
    width: 1709px;
    height: 119px;
}

.pc4-category-grid {
    left: 969px;
    top: 124px;
    width: 607px;
    height: 519px;
}

.pc4-top-business {
    left: 1440px;
    top: 24px;
    width: 215px;
    height: 63px;
}

.pc4-speech-bubble {
    left: 1521px;
    top: 299px;
    width: 204px;
    height: 151px;
    animation: speech-bubble-float 3.4s ease-in-out infinite;
    transform-origin: 20% 55%;
}

.pc4-speech-bubble-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
}

/* 爱心为独立小图（从 speech-bubble.webp 掩膜提取），叠在底图同位置上：
   scale(1) 时与底图像素完全重合，放大时从中心长出盖住底图副本。
   阴影为静态值，随 transform 一起缩放，不逐帧重绘。 */
.pc4-speech-heart {
    position: absolute;
    display: block;
    max-width: none;
    filter: drop-shadow(0 2px 3px rgba(255, 58, 132, 0.3));
}

.pc4-speech-heart-one {
    left: 84.8039%;
    top: 46.3576%;
    width: 14.2157%;
    height: 18.5430%;
    animation: speech-heart-beat 2.35s ease-in-out -0.15s infinite;
}

.pc4-speech-heart-two {
    left: 83.3333%;
    top: 70.8609%;
    width: 10.2941%;
    height: 13.2450%;
    animation: speech-heart-beat 2.35s ease-in-out -0.02s infinite;
}

.pc4-speech-heart-three {
    left: 72.0588%;
    top: 82.1192%;
    width: 13.2353%;
    height: 16.5563%;
    animation: speech-heart-beat 2.35s ease-in-out 0.11s infinite;
}

@keyframes speech-bubble-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-0.35deg);
    }

    50% {
        transform: translate3d(0, -4px, 0) rotate(0.35deg);
    }
}

/* 只动 transform，保证动画全程走合成器。 */
@keyframes speech-heart-beat {
    0%,
    46%,
    100% {
        transform: scale(1);
    }

    9% {
        transform: scale(1.16);
    }

    18% {
        transform: scale(1.01);
    }

    28% {
        transform: scale(1.11);
    }

    38% {
        transform: scale(1);
    }
}

.pc4-ios-button {
    left: 576px;
    top: 658px;
    width: 260px;
    height: 119px;
}

.pc4-android-button {
    left: 860px;
    top: 658px;
    width: 255px;
    height: 120px;
}

.pc4-android-backup-button {
    left: 1139px;
    top: 658px;
    width: 245px;
    height: 119px;
}

.pc4-resource-title {
    left: 99px;
    top: 865px;
    width: 197px;
    height: 24px;
}

.pc4-stage #qr {
    position: absolute;
    left: 136px;
    top: 679px;
    z-index: 4;
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: 3px;
    background: #fff;
}

.pc4-stage #qr img,
.pc4-stage #qr canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* 桌面背景装饰默认隐藏，只在 PC 媒体查询中启用。 */
.pc4-background-accent {
    display: none;
}

@media (min-width: 769px) {
    /* 背景只在视口层渲染一次，不跟随前景画布缩小。 */
    .hero-shell::before {
        position: absolute;
        inset: 0;
        z-index: 0;
        content: "";
        background: #fceaf1 url('/assets_site4/image/pc-figma/background.webp') center / cover no-repeat;
    }

    /* 背景装饰与 cover 背景使用同一坐标系，避免宽高比变化后错位。
       z-index 0：画在 ::before 背景之上（同层按 DOM 顺序）、pc-stage(z1) 前景之下，
       两套坐标系在极端窗口比例下漂移时也不会压到前景内容。 */
    .pc4-background-accent {
        position: absolute;
        z-index: 0;
        display: block;
        pointer-events: none;
        user-select: none;
    }

    .pc4-background-stars {
        --accent-x: calc(50% - 2.8704vh);
        --accent-y: 16.3889vh;
        --accent-width: 12.9630vh;
        --accent-height: 9.2593vh;
        left: var(--accent-x);
        top: var(--accent-y);
        width: var(--accent-width);
        height: var(--accent-height);
        transform: translate3d(-50%, -50%, 0);
    }

    /* filter 为静态值（层内容不变、只栅格化一次），闪烁只靠 opacity + transform。 */
    .pc4-background-star {
        position: absolute;
        display: block;
        aspect-ratio: 1;
        background: rgba(255, 255, 255, 0.96);
        clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.9));
        opacity: 0.24;
    }

    .pc4-background-star-left {
        left: 10%;
        top: 34%;
        width: 29%;
        animation: background-star-twinkle 2.45s ease-in-out -0.2s infinite;
    }

    .pc4-background-star-center {
        left: 43%;
        top: 39%;
        width: 20%;
        background: rgba(255, 82, 145, 0.88);
        filter: drop-shadow(0 0 4px rgba(255, 90, 151, 0.55));
        animation: background-star-twinkle 2.45s ease-in-out -1s infinite;
    }

    .pc4-background-star-right {
        left: 68%;
        top: 6%;
        width: 34%;
        animation: background-star-twinkle 2.45s ease-in-out -1.7s infinite;
    }

    @media (min-aspect-ratio: 16 / 9) {
        .pc4-background-stars {
            --accent-x: 48.3854vw;
            --accent-y: calc(50% - 18.9063vw);
            --accent-width: 7.2917vw;
            --accent-height: 5.2083vw;
        }
    }
}

@keyframes background-star-twinkle {
    0%,
    100% {
        opacity: 0.1;
        transform: translate3d(0, 3px, 0) scale3d(0.55, 0.55, 1) rotate(0deg);
    }

    18% {
        opacity: 1;
        transform: translate3d(0, -4px, 0) scale3d(1.35, 1.35, 1) rotate(45deg);
    }

    34% {
        opacity: 0.28;
        transform: translate3d(0, 0, 0) scale3d(0.82, 0.82, 1) rotate(72deg);
    }

    66% {
        opacity: 0.92;
        transform: translate3d(0, -2px, 0) scale3d(1.16, 1.16, 1) rotate(90deg);
    }
}

/* site4 H5：Figma 750×1665，百分比坐标来自节点 9127:498。 */
@media (max-width: 768px) {
    html,
    body {
        min-height: 100%;
        background: #f7c2d9;
    }

    .site4-page,
    .hero-shell {
        width: 100%;
        height: auto;
        min-height: 100svh;
        overflow: visible;
        background: #f7c2d9;
    }

    .pc-stage {
        display: none;
    }

    .h54-stage {
        position: relative;
        display: block;
        width: 100%;
        max-width: 750px;
        aspect-ratio: 750 / 1665;
        margin: 0 auto;
        overflow: hidden;
        isolation: isolate;
        background: #fce3ee;
    }

    .h54-layer,
    .h54-action {
        position: absolute;
        display: block;
        margin: 0;
    }

    .h54-layer {
        z-index: 1;
        max-width: none;
        pointer-events: none;
        user-select: none;
    }

    .h54-action {
        z-index: 20;
        max-width: none;
        transition: none;
        -webkit-tap-highlight-color: transparent;
    }

    .h54-action:hover,
    .h54-action:active,
    .h54-action:focus {
        transform: none;
        filter: none;
    }

    .h54-action:focus-visible {
        outline: 3px solid rgba(255, 69, 137, 0.7);
        outline-offset: 2px;
        border-radius: 999px;
    }

    .h54-action img {
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: contain;
    }

    .h54-background {
        left: 0;
        top: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
    }

    .h54-notice-panel {
        left: 6.8%;
        top: 52.1321%;
        width: 86.2667%;
        height: 35.3754%;
    }

    .h54-hero-composite {
        left: 0;
        top: 7.5075%;
        width: 100%;
        height: 39.8198%;
    }

    /* 同 PC：切半呼吸，依赖素材中线附近透明（见 .pc4-hero-character-left 注释）。 */
    .h54-hero-character {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
    }

    .h54-hero-character-left {
        clip-path: inset(0 50% 0 0);
        transform-origin: 23% 79%;
        animation: character-breathe-left 4.8s ease-in-out infinite;
    }

    .h54-hero-character-right {
        clip-path: inset(0 0 0 50%);
        transform-origin: 83% 78%;
        animation: character-breathe-right 4.35s ease-in-out -1.4s infinite;
    }

    .h54-headline {
        left: 17.8667%;
        top: 12.3123%;
        width: 64.2667%;
        height: 16.3964%;
    }

    .h54-feature-strip {
        left: 0.1333%;
        top: 48.0480%;
        width: 100%;
        height: 6.1261%;
    }

    .h54-resource-cards {
        left: 6.8%;
        top: 88.2282%;
        width: 87.2%;
        height: 7.5075%;
    }

    .h54-ios-button {
        left: 12.4%;
        top: 56.2162%;
        width: 75.2%;
        height: 5.7658%;
    }

    .h54-android-button {
        left: 12.4%;
        top: 62.0420%;
        width: 75.4667%;
        height: 5.7658%;
    }

    .h54-android-backup-button {
        left: 12.4%;
        top: 67.8679%;
        width: 75.0667%;
        height: 5.6456%;
    }

    .h54-bottom-ribbon {
        left: 0;
        top: 97.5976%;
        width: 100%;
        height: 2.4024%;
    }

    .h54-download-panel {
        left: 1.4667%;
        top: 29.5495%;
        width: 97.0667%;
        height: 17.5375%;
    }

    .h54-top-group {
        left: 76.6667%;
        top: 1.9219%;
        width: 21.8667%;
        height: 2.8829%;
    }

    .h54-top-business {
        left: 52.6667%;
        top: 1.9219%;
        width: 21.8667%;
        height: 2.8829%;
    }

    .h54-brand {
        left: 1.0667%;
        top: 0.9009%;
        width: 42%;
        height: 4.9850%;
    }

    .h5-notice {
        position: absolute;
        left: 12.8%;
        top: 77.2372%;
        z-index: 21;
        display: block;
        width: 74.4%;
        height: 7.2072%;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 4vw;
        background: transparent;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .h5-notice:focus-visible {
        outline: 3px solid rgba(255, 69, 137, 0.7);
        outline-offset: 2px;
    }
}

/* !important：覆盖不依赖书写顺序，后续在文件末尾追加规则也不会让动画复活。 */
@media (prefers-reduced-motion: reduce) {
    .pc4-hero-character,
    .pc4-speech-bubble,
    .pc4-speech-heart,
    .pc4-background-star,
    .h54-hero-character {
        animation: none !important;
    }
}