/* ================= 手机端（设计稿 375 宽，1rem = 屏宽/375） ================= */
@media (max-width:1023px){
  html{font-size:calc(100vw / 375)}
}

.h5-root{
  position:fixed;left:0;top:0;right:0;bottom:0;
  overflow:hidden;
}
.h5-bg{
  position:absolute;left:0;top:0;right:0;bottom:0;
  background:url(../assets/h5/h5-bg.webp) center center / cover no-repeat;
}

/* ---------- 顶部 ---------- */
.h5-top{
  position:absolute;left:0;right:0;top:0;z-index:10;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding-left:16rem;padding-right:17rem;padding-top:15rem;
  pointer-events:none;
}
.h5-logo{
  width:144rem;height:43rem;
  background:url(../assets/h5/h5-logo.webp) left center / contain no-repeat;
}
.h5-toplinks{display:flex;align-items:center;gap:21rem;margin-top:4rem}
.h5-link{
  display:inline-flex;align-items:center;gap:9rem;height:20rem;
  font-size:11rem;line-height:20rem;color:#fff;white-space:nowrap;
  pointer-events:auto;
}
.h5-icon{
  display:block;width:20rem;height:20rem;
  background-repeat:no-repeat;background-size:contain;background-position:center center;
}

/* ---------- 竖向翻页 ---------- */
.h5-swiper{position:absolute;left:0;top:0;right:0;bottom:0;z-index:2;overflow:hidden}
.h5-wrapper{
  display:flex;flex-direction:column;
  width:100%;height:100%;
  transition:transform .35s cubic-bezier(.25,.1,.25,1);
  will-change:transform;
}
.h5-slide{position:relative;flex-shrink:0;width:100%;height:100%;overflow:hidden}
.h5-page{
  position:relative;display:flex;flex-direction:column;
  height:100%;overflow:hidden;box-sizing:border-box;
  padding-top:40rem;
  padding-bottom:calc(108rem + env(safe-area-inset-bottom,0px));
}
.h5-body{position:relative;width:100%;flex-shrink:0;margin:auto 0}

/* ---------- 页面元素 ---------- */
.h5-title,.h5-figure,.h5-card,.h5-tabs,.h5-main{
  position:absolute;
  background-repeat:no-repeat;background-position:center center;
}
.h5-title{background-size:contain;z-index:1}

.h5-figure{z-index:2;pointer-events:none}
.h5-figure-in{
  position:absolute;left:0;top:0;right:0;bottom:0;
  background-repeat:no-repeat;background-size:100% 100%;background-position:center center;
  transform-origin:bottom center;
  will-change:transform;
  animation:h5FigurePop 3.2s ease-in-out infinite;
  -webkit-mask-image:linear-gradient(to bottom,#000 76%,rgba(0,0,0,.45) 90%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 76%,rgba(0,0,0,.45) 90%,transparent 100%);
}

.h5-card{
  background-size:100% 100%;z-index:3;pointer-events:none;
  animation:h5CardFloat 2.8s ease-in-out infinite;
  animation-delay:var(--d,0s);
}

@keyframes h5CardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5rem)}}
@keyframes h5FigurePop{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}

/* ---------- 第 4 页：分类 + 主图 ---------- */
.h5-tabs{display:flex;z-index:2}
.h5-tab{
  position:relative;flex:1 1 0;height:100%;padding:0;cursor:pointer;
  pointer-events:auto;
}
.h5-tab i{
  position:absolute;left:0;top:0;right:0;bottom:0;
  background-repeat:no-repeat;background-size:contain;background-position:center center;
  transition:opacity .3s;
}
.h5-tab i.on{opacity:0}
.h5-tab.active i{opacity:0}
.h5-tab.active i.on{opacity:1}

.h5-main{z-index:2;pointer-events:none}
.h5-main-img{
  position:absolute;left:0;top:0;right:0;bottom:0;
  background-repeat:no-repeat;background-size:100% 100%;background-position:center center;
  opacity:0;transition:opacity .5s ease-in-out;
}
.h5-main-img.active{opacity:1}

/* ---------- 底部下载区 ---------- */
.h5-download{
  position:absolute;left:0;right:0;bottom:0;z-index:10;
  display:flex;flex-direction:column;pointer-events:none;
  padding-bottom:calc(20rem + env(safe-area-inset-bottom,0px));
}
.h5-install{
  display:block;align-self:flex-end;
  margin-right:10rem;margin-bottom:14rem;
  width:44rem;height:47rem;
  pointer-events:auto;
}
.h5-install i{
  display:block;width:100%;height:100%;
  background:url(../assets/h5/h5-install-icon.webp) center center / contain no-repeat;
}
.h5-btns{
  position:relative;display:flex;align-items:flex-end;justify-content:center;gap:1rem;
}
.h5-btn{
  position:relative;width:167rem;height:60rem;
  pointer-events:auto;user-select:none;cursor:pointer;
}
.h5-btn .bg{
  position:absolute;left:0;top:0;right:0;bottom:0;
  background-repeat:no-repeat;background-size:100% 100%;background-position:center center;
}
.h5-btn .txt{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:82rem;height:20rem;
  background-repeat:no-repeat;background-size:contain;background-position:center center;
}
.h5-btn:active{opacity:.85}
.h5-tips{
  margin-top:4rem;text-align:center;
  font-size:10rem;line-height:12rem;
  color:rgba(245,162,122,.6);
}
.h5-tips p{font-size:10rem;line-height:12rem}

/* iOS 单按钮模式：隐藏备用按钮 */
.h5-root.ios-mode #h5BtnBackup{display:none}