/* ===== 通用基础 ===== */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* 电脑版首页一屏展示 */
}

/* 电脑版默认：main 一屏高度 */
main {
    width: 100vw;
    height: 85vh;
}

/* ===== ① 电脑版：只显示 hero-desktop ===== */

.hero-desktop {
    position: relative;
    width: 100%;
    height: 100%;
}

.desktop-hero-img {
    width: 100%;
    height: 100%;
    display: block;
}

/* 电脑版的署名：回到你最初的右下角样式 */
.desktop-photo-credit {
    position: absolute;
    right: 10px;
    bottom: 8px;
    color: #999;
    font-style: italic;
    font-size: 11px;
}

/* 手机版这一块在电脑上隐藏 */
.hero-mobile {
    display: none;
}

/* footer 保持原来的样式 */
footer.smalltext,
.footer-copy {
    color: #b3b3b3;
    font-style: italic;
    font-size: 10px;
    margin-top: 30px;
    padding-bottom: 24px;
}


/* ===== ② 手机版：只显示 hero-mobile，两张图不拉伸 ===== */
@media (max-width: 768px) {

    /* 手机要能滚动 */
    html, body {
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* 如果你有全站 body flex，可以删掉这里；否则用这个让 footer 底对齐也行 */
    body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    main {
        width: 100%;
        height: auto;
        flex: 1;   /* main 撑中间空间，footer 在最底 */
    }

    /* 电脑版那块在手机隐藏 */
    .hero-desktop {
        display: none;
    }

    /* 手机版两张图上下排列 */
    .hero-mobile {
        display: block;
        width: 100%;
        line-height: 0;       /* ⭐ 去掉行距缝隙 */
        font-size: 0;         /* ⭐ 避免 inline-block 产生空隙 */
        padding: 0;           /* 保险 */
        margin: 0;
    }

    .hero-mobile img {
        display: block;
        width: 100%;
        height: auto;      /* 🚩 关键：按原比例缩放，不拉伸 */
        object-fit: contain;
        transform: scaleX(1.3);       /* ⭐ 横向放大 4%，可以自己调成 1.03 / 1.05 */
        transform-origin: center; 
    }

     .hero-blur {
        filter: blur(12px);  /* 略微偏暗一点点就够了 */
    }

    .hero-blur.flipped {
        margin-top: -2px;                    /* 盖住接缝 */
        transform: scaleX(1.3) scaleY(-1);   /* 横向稍微拉宽 + 上下翻转 */
        padding: 0;
        /* 不再在这里设置 opacity，交给 .fade-in 动画控制 */
    }

    /* 手机版署名：跟图片近一点，颜色淡一点 */
    .mobile-photo-credit {
        margin-top: 12px;
        margin-right: 14px;
        text-align: right;
        font-size: 11px;
        color: rgba(0, 0, 0, 0.45);
        font-style: italic;
    }

    /* 手机版 footer 更轻一点 */
    footer.smalltext,
    .footer-copy {
        margin-top: 24px;
        padding-bottom: 24px;
        color: rgba(200, 202, 203, 0.35);
    }
}