/* ============================================================
   polish.css —— 方案 F「原版细节精修」
   只做细节叠加，不改原版 styles.css 的任何规则。
   所有规则通过更高优先级或新增元素生效，可随时整文件移除。
   ============================================================ */

/* ---------- 0. 品牌色 ---------- */
:root {
  --brand-cyan: #2fd4e8;
  --brand-coral: #ff5f4f;
}

/* ---------- 1. 选中色：跟随品牌 ---------- */
::selection { background: rgba(47, 212, 232, 0.35); color: #fff; }
body.light-mode ::selection { background: rgba(47, 212, 232, 0.3); color: #000; }

/* ---------- 2. Hero 光晕：蓝 × 靛 × 珊瑚（去绿调） ---------- */
.hero-bg-glow {
  background:
    radial-gradient(ellipse at 26% 44%, rgba(64, 150, 255, 0.30) 0%, transparent 55%),
    radial-gradient(ellipse at 74% 40%, rgba(255, 95, 79, 0.18) 0%, transparent 52%),
    radial-gradient(ellipse at 46% 76%, rgba(99, 102, 241, 0.16) 0%, transparent 50%),
    radial-gradient(ellipse at 16% 82%, rgba(255, 95, 79, 0.07) 0%, transparent 45%);
}
/* 浅色模式：饱和度拉高，蓝 / 粉 / 紫 / 珊瑚都要看得见（去掉原版的绿块） */
body.light-mode .hero-bg-glow {
  background:
    radial-gradient(ellipse at 26% 44%, rgba(61, 90, 241, 0.46) 0%, transparent 55%),
    radial-gradient(ellipse at 72% 38%, rgba(232, 67, 147, 0.34) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 74%, rgba(124, 92, 246, 0.30) 0%, transparent 48%),
    radial-gradient(ellipse at 84% 66%, rgba(255, 95, 79, 0.26) 0%, transparent 42%);
}

/* ---------- 3. Hero 微尘粒子 + 光束（新增层，极克制） ---------- */
.hero-dust {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}
.hero-beam {
  position: absolute; inset: -25% -10%; z-index: 0;
  pointer-events: none;
  background: linear-gradient(108deg,
    transparent 40%, rgba(47, 212, 232, 0.055) 48%,
    rgba(255, 255, 255, 0.04) 52%, transparent 60%);
  filter: blur(24px);
  animation: heroBeamSway 16s ease-in-out infinite alternate;
}
.hero-beam.hero-beam--b {
  background: linear-gradient(72deg,
    transparent 56%, rgba(255, 95, 79, 0.045) 64%, transparent 74%);
  animation-duration: 22s;
  animation-direction: alternate-reverse;
}
@keyframes heroBeamSway {
  from { transform: rotate(-2deg) translateX(-3%); }
  to   { transform: rotate(2deg)  translateX(3%); }
}
/* 浅色模式光束：换成可见的蓝 / 粉色流光 */
body.light-mode .hero-beam {
  background: linear-gradient(108deg,
    transparent 40%, rgba(61, 90, 241, 0.10) 48%,
    rgba(124, 92, 246, 0.08) 52%, transparent 60%);
}
body.light-mode .hero-beam.hero-beam--b {
  background: linear-gradient(72deg,
    transparent 56%, rgba(232, 67, 147, 0.09) 64%, transparent 74%);
}

/* ---------- 4. 品牌字与标题渐变：统一为青 → 珊瑚 ---------- */
.brand-word {
  background: linear-gradient(120deg, #ffffff 10%, var(--brand-cyan) 55%, var(--brand-coral) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand-dot { color: var(--brand-cyan); }
.brand-dot-red { color: var(--brand-coral); }
.hero-title-gradient {
  background: linear-gradient(120deg, #ffffff 5%, var(--brand-cyan) 55%, var(--brand-coral) 105%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
}

/* ---------- 5. 中文标题呼吸感 ---------- */
.hero-title { line-height: 1.48; letter-spacing: 0.01em; }
.hero-title-line:nth-child(2) { letter-spacing: 0.06em; }

/* ---------- 6. 卡片细节：光泽扫过 + 品牌色收边 ---------- */
.app-card {
  transition: box-shadow 200ms ease, border-color 200ms ease, transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
}
.app-card::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.09) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.app-card:hover::after { transform: translateX(130%); }
/* 浅色模式：白色光泽在白卡上看不见，换成蓝紫光泽 */
body.light-mode .app-card::after {
  background: linear-gradient(115deg, transparent 38%, rgba(61, 90, 241, 0.13) 50%, transparent 62%);
}
.app-card:hover {
  border-color: rgba(47, 212, 232, 0.32);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4), 0 0 40px rgba(47, 212, 232, 0.06) inset;
  transform: translateY(-3px);
}
.app-card-bg { opacity: 0.46; }
.app-card:hover .app-card-bg { opacity: 0.62; }
.app-card-arrow { color: var(--brand-cyan); }
.app-card-icon { box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.08); }
.app-card:hover .app-card-icon {
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 24px rgba(47, 212, 232, 0.18);
}
body.light-mode .app-card:hover {
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14);
}

/* ---------- 7. 浮现动画：更从容 ---------- */
.reveal { transition-duration: 0.9s; }

/* ---------- 8. Header 滚动后毛玻璃（polish.js 加 .scrolled） ---------- */
#header { transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1), background 0.4s, backdrop-filter 0.4s; }
#header.scrolled {
  background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body.light-mode #header.scrolled {
  background: linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0));
}

/* ---------- 9. 页脚链接下划线过渡 ---------- */
.footer-products a, .footer-bottom-left a, .footer-bottom-right a {
  background: linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat;
  transition: color 0.3s, background-size 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  padding-bottom: 2px;
}
.footer-products a:hover, .footer-bottom-left a:hover, .footer-bottom-right a:hover {
  background-size: 100% 1px;
}

/* ---------- 10. 减少动态偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-beam { animation: none; }
  .app-card::after { display: none; }
  .hero-dust { display: none; }
}

/* ============================================================
   polish.css v2 —— 大胆细节（灵感：苔藓近斥 / 亚马逊旅程 / 蓝鸟巨字）
   依然是纯叠加层，不碰原版文件。
   ============================================================ */

.section-sports .section-header,
.section-health .section-header,
.section-sports .apps-row,
.section-health .apps-row { position: relative; z-index: 1; }

/* ---------- 15. 品牌字磁性字母（苔藓近斥的文字版） ---------- */
.brand-combined .bl {
  display: inline-block;
}

/* ============================================================
   polish.css v4 —— 顶级滚动驱动层配套样式
   ============================================================ */

/* ---------- 17. 穿越式 Hero：pin 容器 ---------- */
.pin-wrap { position: relative; height: 230vh; }
.pin-wrap .hero-section {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden;
}

/* ---------- 18. 章节标题逐字显现 ---------- */
.st-char {
  display: inline-block;
}

/* ---------- 20. 开场演绎结束后，scrub 元素必须瞬时响应 ---------- */
body.v4-live .hero-title-line, body.v4-live .hero-desc, body.v4-live .hero-subtitle,
.hero-scroll, .pin-wrap .brand-anim, .hero-bg-glow, .hero-dust, .st-char {
  transition: none !important;
}

/* ---------- 21. 触屏与减少动态：保留信息，不保留位移动效 ---------- */
@media (hover: none), (pointer: coarse) {
  .app-card:hover,
  .download-btn:hover,
  .feature-card:hover,
  .hw-watch:hover,
  .video-card:hover,
  #footer-top-btn:hover { transform: none; }
  .app-card:hover::after { transform: translateX(-130%); }
  .app-card:hover .app-card-bg,
  .video-card:hover .video-card-cover img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .st-char, .scrub-card,
  .hero-title-line, .hero-desc, .hero-subtitle,
  .brand-anim, .hero-bg-glow {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .hero-beam, .hero-dust, .app-card::after { display: none !important; }
}