@charset "utf-8";

/* 基础重置 */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    background-color: white;
}

img {
    display: inline-block;
    border: none;
    vertical-align: top;
    -webkit-user-select: none;
    user-select: none;
}

/* 外层容器：强制 19.2rem 配合 JS 实现 85% 整体居中缩放 */
.wrapper {
    width: 19.2rem;
    margin: 0 auto;
    position: relative;
    overflow-x: hidden;
    background: url("https://static.web.sdo.com/mxdc/pic/project/202610mogu/bg.jpg") no-repeat center 100%;
}

.logo {
    position: absolute;
    left: 2.8rem;
    top: 0.34rem;
    z-index: 12
}

/* 1. 底层背景 */
.pageBg {
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* 云层通用样式 */
.cloud-layer {
    position: absolute;
    pointer-events: none;
}

.cloud-layer img {
    width: 100%;
    height: 100%;
    display: block;
}

/* 2. 远景云层 */
.cloud-layer-1 {
    left: 0;
    top: 0;
    width: 19.2rem;
    height: 4.62rem;
    z-index: 6;
    animation: float-horizontal 40s linear infinite alternate;
}

/* 3. 中景云层 */
.cloud-layer-2 {
    left: 0;
    top: 0;
    width: 19.2;
    height: 5.26rem;
    z-index: 7;
    animation: float-horizontal 30s linear infinite alternate;
}

/* 4. 近景云层 */
.cloud-layer-3 {
    left: 0;
    top: 6.5rem;
    width: 19.2rem;
    height: 4.59rem;
    z-index: 8;
    animation: float-horizontal 20s linear infinite alternate;
}

/* 5. 正文内容容器 */
.warpMain {
    width: 100%;
    position: relative;
    z-index: 12;
    font-size: 0;
    line-height: 0;
    text-align: center;
    padding-bottom: 1rem;
}

.contentSlice {
    border: none;
    width: 100%;
}

/* 6. 热气球 */
.hot-balloon {
    position: absolute;
    left: 4.09rem;
    top: 0rem;
    width: 11.20rem;
    height: 15.62rem;
    z-index: 12;
    animation: float-vertical 4s ease-in-out infinite;
}

.hot-balloon img {
    width: 100%;
    height: 100%;
    display: block;
}

.mt36 {
    margin-top: .36rem;
}

/* 7. 静态标题 */
.static-title {
    position: absolute;
    left: 5.72rem;
    top: 13.24rem;
    width: 8.04rem;
    height: 2.31rem;
    z-index: 7;
}

.static-title img {
    width: 100%;
    height: 100%;
    display: block;
}

/* 8. 首屏雪落效果 */
.snow-layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 30.88rem;
    /* 兜底：按 1920x1080 设计稿高度 */
    z-index: 11;
    pointer-events: none;
    overflow: hidden;
    opacity: .8;
}

/* 每层雪 = 一张 snow.png 纵向无缝循环下落 */
.snow-fall {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    animation: snow-sway 9s ease-in-out infinite alternate;
}

.snow-fall::before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    background-image: url("https://static.web.sdo.com/mxdc/pic/project/202610mogu/snow.png");
    background-repeat: repeat;
    background-size: 100% auto;
    /* 一格高度 = 19.2rem * 1690/1920 = 16.9rem */
    will-change: transform;
}

/* 近景：大而快 */
.snow-fall-near::before {
    top: -16.9rem;
    height: calc(100% + 16.9rem);
    opacity: 0.9;
    animation: snow-drop-near 32s linear infinite;
}

/* 远景：小而慢、更淡（与近景摆动错开相位） */
.snow-fall-far {
    animation-delay: -4.5s;
}

.snow-fall-far::before {
    top: -8.45rem;
    height: calc(100% + 8.45rem);
    background-size: 50% auto;
    /* 一格高度 = 9.6rem * 1690/1920 = 8.45rem */
    opacity: 0.5;
    animation: snow-drop-far 30s linear infinite;
}

/* 下落一格（正好一个贴图周期，循环无缝） */
@keyframes snow-drop-near {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(0, 16.9rem, 0);
    }
}

@keyframes snow-drop-far {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(0, 8.45rem, 0);
    }
}

/* 轻微横向摆动，模拟风吹 */
@keyframes snow-sway {
    from {
        transform: translate3d(-0.15rem, 0, 0);
    }

    to {
        transform: translate3d(0.15rem, 0, 0);
    }
}

/* 动画定义 */
@keyframes float-horizontal {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(2.50rem, 0, 0);
    }
}

@keyframes float-vertical {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -0.30rem, 0);
    }
}