/* ========================================
   全局基础样式 - 现代浏览器优化版
   ======================================== */

/* ---- 现代化全局重置 & 增强 ---- */
html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body,h1,h2,h3,h4,h5,h6,html,p{margin:0;padding:0}
*,:before,:after{box-sizing:border-box}

/* ---- 链接优化 ---- */
a{text-decoration:none;outline:none;color:#fff}
a:focus-visible{outline:2px solid rgba(255,77,79,.6);outline-offset:2px}
a,input,select{-webkit-tap-highlight-color:rgba(255,0,0,0);touch-action:manipulation}

/* ---- 排版 & 图片 ---- */
p{font-size:14px;line-height:1.5}
img{margin:0;padding:0;width:100%;height:100%;vertical-align:top;display:block}

/* ---- 表单元素 ---- */
input{background:transparent;outline:0;border:none;font-family:inherit;font-size:inherit}

/* ---- 工具类 ---- */
.up{height:10px;background:#ececec}

/* ---- 底部导航 ---- */
.footer{
    background:#fff;position:fixed;bottom:0;left:0;right:0;
    padding:.1rem 0;z-index:999;
    border-top:1px solid #d9d9d9;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}
.footer>.flex{width:100vw;height:.9rem;display:flex;justify-content:space-between;align-items:center}
.footer>.flex>.item{width:33%;padding:.03rem 0}
.footer>.flex>.item>.icon{width:.42rem;height:.4rem;margin:0 auto}
.footer>.flex>.item>.icon>p{font-size:.12rem}
.footer>.flex>.item>p{font-size:.25rem;color:#666;text-align:center}

/* ---- 布局定位 ---- */
.main{padding-bottom:1rem;height:100vh}
.conBg{height:100%;background-size:100% 100%}
.topLeft{position:fixed;width:1.81rem;height:1.33rem}
.topRight{margin:0 auto;margin-top:.69rem;margin-bottom:.3rem;width:3.35rem;height:1.56rem}
.bottomBg{position:fixed;bottom:1rem;width:100%}

/* ========================================
   动画关键帧（标准语法 + -webkit- 兼容老版微信WebView）
   ======================================== */
@keyframes hua{
    0%{transform:scale(1) rotate(0)}
    50%{transform:scale(1.05) rotate(2deg)}
    100%{transform:scale(1) rotate(0)}
}
@-webkit-keyframes hua{
    0%{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}
    50%{-webkit-transform:scale(1.05) rotate(2deg);transform:scale(1.05) rotate(2deg)}
    100%{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}
}

@keyframes denglong{
    0%{transform:rotate(0) translateY(0)}
    25%{transform:rotate(5deg) translateY(3.5px)}
    50%{transform:rotate(0) translateY(7px)}
    75%{transform:rotate(-5deg) translateY(3.5px)}
    100%{transform:rotate(0) translateY(0)}
}
@-webkit-keyframes denglong{
    0%{-webkit-transform:rotate(0) translateY(0);transform:rotate(0) translateY(0)}
    25%{-webkit-transform:rotate(5deg) translateY(3.5px);transform:rotate(5deg) translateY(3.5px)}
    50%{-webkit-transform:rotate(0) translateY(7px);transform:rotate(0) translateY(7px)}
    75%{-webkit-transform:rotate(-5deg) translateY(3.5px);transform:rotate(-5deg) translateY(3.5px)}
    100%{-webkit-transform:rotate(0) translateY(0);transform:rotate(0) translateY(0)}
}

@keyframes bianpao{
    0%{transform:rotate(0) translateY(0)}
    25%{transform:rotate(2deg) translateY(2px)}
    50%{transform:rotate(0) translateY(4px)}
    75%{transform:rotate(-2deg) translateY(2px)}
    100%{transform:rotate(0) translateY(0)}
}
@-webkit-keyframes bianpao{
    0%{-webkit-transform:rotate(0) translateY(0);transform:rotate(0) translateY(0)}
    25%{-webkit-transform:rotate(2deg) translateY(2px);transform:rotate(2deg) translateY(2px)}
    50%{-webkit-transform:rotate(0) translateY(4px);transform:rotate(0) translateY(4px)}
    75%{-webkit-transform:rotate(-2deg) translateY(2px);transform:rotate(-2deg) translateY(2px)}
    100%{-webkit-transform:rotate(0) translateY(0);transform:rotate(0) translateY(0)}
}

@keyframes yuntop{
    0%{transform:translateX(0)}10%{transform:translateX(-100px) translateY(10px)}
    20%{transform:translateX(-200px) translateY(0)}30%{transform:translateX(-300px) translateY(10px)}
    40%{transform:translateX(-400px) translateY(0)}49%{transform:translateX(-500px) translateY(10px);opacity:1}
    50%{transform:translateX(-500px) translateY(10px);opacity:0}
    51%{transform:translateX(500px) translateY(10px);opacity:0}
    52%{transform:translateX(500px) translateY(10px);opacity:1}
    60%{transform:translateX(400px) translateY(0)}70%{transform:translateX(300px) translateY(10px)}
    80%{transform:translateX(200px) translateY(0)}90%{transform:translateX(100px) translateY(10px)}
    100%{transform:translateX(0);opacity:1}
}
@keyframes yunbottom{
    0%{transform:translateX(0)}10%{transform:translateX(100px) translateY(10px)}
    20%{transform:translateX(200px) translateY(0)}30%{transform:translateX(300px) translateY(10px)}
    40%{transform:translateX(400px) translateY(0)}49%{transform:translateX(500px) translateY(10px);opacity:1}
    50%{transform:translateX(500px) translateY(10px);opacity:0}
    51%{transform:translateX(-500px) translateY(10px);opacity:0}
    52%{transform:translateX(-500px) translateY(10px);opacity:1}
    60%{transform:translateX(-400px) translateY(0)}70%{transform:translateX(-300px) translateY(10px)}
    80%{transform:translateX(-200px) translateY(0)}90%{transform:translateX(-100px) translateY(10px)}
    100%{transform:translateX(0);opacity:1}
}
@keyframes guang{
    0%{transform:rotate(0)}
    100%{transform:rotate(360deg)}
}

/* ---- 动画应用 ---- */
.yun3,.yun4{animation:yuntop 20s infinite linear}
.yun1,.yun2{animation:yunbottom 10s infinite linear}
.huaZuo{animation:hua 3s infinite linear;transform-origin:left top}
.huaYou{animation:hua 3s infinite linear;transform-origin:right top}
.denglong{animation:denglong 3s infinite linear;transform-origin:center top}
.bianpao{animation:bianpao 3s infinite linear;transform-origin:center top}
.hbBg{animation:guang 5s infinite linear}

/* ========================================
   无障碍：尊重用户减少动画偏好
   ======================================== */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
        scroll-behavior:auto!important;
    }
}