/**
 * 首页右下角活动浮标(Figma 39917:140336 大转盘 / 39935:140358 活动中心)。
 *
 * 分层实现:图标是带 alpha 的独立 webp(转盘为 10 帧动图),底部文案 pill 用 CSS 重建,
 * 不把文字烤进图里 —— 这样文案可改、可被读屏念出、可单独做状态。
 *
 * 层级:z-index 99,低于返回顶部(to-top.css 用 100)与所有弹窗(900+),
 * 纵向排在返回顶部按钮之上(它固定在 right24/bottom40,占 60px 高),两者不重叠。
 */
.home-float {
  position: fixed;
  right: 24px;
  bottom: 112px; /* to-top 占据 40~100,再留 12px 间距 */
  z-index: 99;
  display: flex;
  flex-direction: column;
  /* 不用 flex gap,老 WebView 不支持;改用子项 margin */
  pointer-events: none; /* 容器本身不拦点击,只有子项可点 */
}

.home-float__item {
  position: relative;
  display: block;
  width: 80px;
  height: 80px;
  pointer-events: auto;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease;
}

.home-float__item + .home-float__item {
  margin-top: 12px;
}

.home-float__item:hover {
  transform: translateY(-2px);
}

.home-float__item:active {
  transform: scale(0.94);
}

.home-float__item:focus-visible {
  outline: 2px solid #ff4768;
  outline-offset: 2px;
  border-radius: 12px;
}

.home-float__icon {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: contain;
}

/* 文案 pill:Figma 渐变 #ff718a → #ff355a(53%) → #ff4768,圆角 11.75,内边距 2/6 */
.home-float__label {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  padding: 2px 6px;
  border-radius: 11.75px;
  background: linear-gradient(180deg, #ff718a 0%, #ff355a 53%, #ff4768 100%);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .home-float {
    right: 8px;
    /* ⚠️ H5 下 to-top 只把里面的 <img> 缩到 40px,按钮盒子仍是 60×60,
       依旧占据底部 40~100 —— 所以这里的 112 不能跟着缩,否则会压住它 */
    bottom: 112px;
  }

  .home-float__item,
  .home-float__icon {
    width: 60px;
    height: 60px;
  }

  .home-float__item + .home-float__item {
    margin-top: 8px;
  }

  .home-float__label {
    padding: 1px 5px;
    border-radius: 9px;
    font-size: 11px;
    line-height: 16px;
  }
}

/* 尊重系统「减弱动态效果」:停掉悬浮位移(动图本身由浏览器解码,CSS 无法暂停) */
@media (prefers-reduced-motion: reduce) {
  .home-float__item {
    transition: none;
  }

  .home-float__item:hover {
    transform: none;
  }
}