/* ============================================================
 * 爱豪司 iHealth 全站 H5 交互动效（纯原生 CSS，配合 static/js/h5.js）
 * 渐进增强原则：
 *  - 所有"初始隐藏"状态只挂在 .h5-on 下，而 .h5-on 由 JS 添加
 *    → 无 JS 时内容完整可见
 *  - 滚动入场标记 .h5-reveal 只由 JS 打在具体元素上
 *    → 老浏览器（无 IntersectionObserver）元素拿不到标记，始终可见
 *  - prefers-reduced-motion 时媒体查询兜底禁用一切动画/过渡
 * ============================================================ */

/* ---------- 滚动入场：fade-up（初始态 + 触发态） ---------- */
.h5-on .h5-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}
.h5-on .h5-reveal.h5-in {
  opacity: 1;
  transform: none;
}

/* ---------- Hero 入场：首屏文字依次淡入上移（stagger ~120ms） ----------
 * 初始隐藏挂在 .h5-on 下（JS 添加），播放由 .h5-loaded 触发（h5.js 添加） */
@keyframes h5-fadeup {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.h5-on .hero .container > *,
.h5-on .detail-hero .container > *,
.h5-on .page-banner .container > * {
  opacity: 0;
}
.h5-on.h5-loaded .hero .container > *,
.h5-on.h5-loaded .detail-hero .container > *,
.h5-on.h5-loaded .page-banner .container > * {
  animation: h5-fadeup .8s cubic-bezier(.22, .61, .36, 1) both;
}
.h5-on.h5-loaded .hero .container > *:nth-child(1),
.h5-on.h5-loaded .detail-hero .container > *:nth-child(1),
.h5-on.h5-loaded .page-banner .container > *:nth-child(1) { animation-delay: .05s; }
.h5-on.h5-loaded .hero .container > *:nth-child(2),
.h5-on.h5-loaded .detail-hero .container > *:nth-child(2),
.h5-on.h5-loaded .page-banner .container > *:nth-child(2) { animation-delay: .17s; }
.h5-on.h5-loaded .hero .container > *:nth-child(3),
.h5-on.h5-loaded .detail-hero .container > *:nth-child(3),
.h5-on.h5-loaded .page-banner .container > *:nth-child(3) { animation-delay: .29s; }
.h5-on.h5-loaded .hero .container > *:nth-child(4),
.h5-on.h5-loaded .detail-hero .container > *:nth-child(4),
.h5-on.h5-loaded .page-banner .container > *:nth-child(4) { animation-delay: .41s; }
.h5-on.h5-loaded .hero .container > *:nth-child(5),
.h5-on.h5-loaded .detail-hero .container > *:nth-child(5),
.h5-on.h5-loaded .page-banner .container > *:nth-child(5) { animation-delay: .53s; }
.h5-on.h5-loaded .hero .container > *:nth-child(n+6),
.h5-on.h5-loaded .detail-hero .container > *:nth-child(n+6),
.h5-on.h5-loaded .page-banner .container > *:nth-child(n+6) { animation-delay: .65s; }

/* ---------- Hero 背景：缓慢 Ken Burns 缩放 ---------- */
@keyframes h5-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
.h5-on .hero-bg,
.h5-on .detail-hero-bg,
.h5-on .page-banner-bg {
  animation: h5-kenburns 26s ease-out both;
  will-change: transform;
}

/* ---------- 卡片悬停：上移 + 阴影加深（移动页由 JS 跳过打标） ---------- */
.h5-on .h5-card {
  transition: transform .25s ease, box-shadow .25s ease;
}
.h5-on .h5-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 48px rgba(42, 28, 10, .14);
}

/* ---------- 链接箭头:hover 右移 4px ---------- */
.h5-on a .h5-arr {
  display: inline-block;
  transition: transform .25s ease;
}
.h5-on a:hover .h5-arr {
  transform: translateX(4px);
}

/* ---------- 导航：滚动收缩 + hover 金色过渡 ---------- */
.h5-on .site-header {
  transition: background .3s ease, box-shadow .3s ease;
}
.h5-on .site-header.h5-scrolled {
  background: rgba(16, 13, 10, 1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
}
.h5-on .main-nav a {
  transition: color .25s ease;
}

/* ---------- 留资按钮：按下缩放反馈 ---------- */
.h5-on .form-submit:active,
.h5-on button.lead-submit:active {
  transform: scale(.97);
}

/* ---------- 返回顶部浮动按钮（z-index 低于吸顶导航 100） ---------- */
.h5-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  border: none; cursor: pointer;
  background: #B89247; color: #1F160D;
  font-size: 20px; line-height: 1; font-family: inherit;
  box-shadow: 0 10px 24px rgba(184, 146, 71, .35);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease, background .2s ease;
}
.h5-top:hover { background: #C9A45C; }
.h5-top.h5-show {
  opacity: 1; visibility: visible; transform: none;
}
/* 移动页：错开右下角「电脑版」浮动链接（bottom:12px，高约 30px） */
.h5-mobile .h5-top { right: 12px; bottom: 56px; }

/* ---------- 减动效兜底：用户偏好减少动态时全部禁用、内容直接可见 ---------- */
@media (prefers-reduced-motion: reduce) {
  .h5-on *,
  .h5-on *::before,
  .h5-on *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .h5-on .h5-reveal,
  .h5-on .hero .container > *,
  .h5-on .detail-hero .container > *,
  .h5-on .page-banner .container > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .h5-on .hero-bg,
  .h5-on .detail-hero-bg,
  .h5-on .page-banner-bg {
    animation: none !important;
  }
  .h5-top {
    transition: none !important;
  }
}