/* ==========================================================================
   FinLearn 视觉增强层 v5 —— 多层纵深 + 玻璃质感 + 渐变网格
   --------------------------------------------------------------------------
   依据（GitHub 实扒）：
     · nateherkai/scroll-craft  → references/hero-depth.md：premium hero 的"分层"
       是基线而非可选打磨；要求"不同图层以可见不同的速率移动 + 遮挡 + 近远关系"，
       并明确"若干元素作为一整张图一起移动不算 depth"。
     · nextlevelbuilder/ui-ux-pro-max-skill → quick-reference.md：
       - transform-performance：只动 transform/opacity，不动 width/height/top/left
       - stagger-sequence：列表入场每项错开 30—50ms
       - excessive-motion：一屏最多动 1—2 个关键元素
       - parallax-subtle：视差要克制，必须尊重 reduced-motion
       - elevation-consistent：阴影用统一档位，禁止随机值
       - primary-action：每屏只有一个主 CTA
   实现手法：纯 CSS transform + 一个共享滚动进度变量，rAF 更新，不重排布局。
   ========================================================================== */

/* ============================ 1. 首屏分层 ============================ */
/* 首屏高度：目标 660—720px。
   曾用 min-height: 92vh —— 在 1440×900 下算出 828px，内容垂直居中后
   上下各留 ~150px 纯蓝空带，看着内容浮在半空。改为按内容定高。 */
.home-hero {
  display: grid;
  align-items: center;
  min-height: 640px;
  padding-block: var(--space-16);
}

@media (min-height: 900px) {
  .home-hero { min-height: min(84vh, 760px); }
}

@media (max-width: 1024px) {
  .home-hero { min-height: 0; padding-block: var(--space-12); }
}

.home-hero__bg { z-index: 0; }

/* 层 1：渐变网格底（最远，移动最慢） */
.home-hero__grid {
  transform: translate3d(0, calc(var(--hero-scroll, 0) * 6px), 0);
  will-change: transform;
}

/* 层 2：两枚光斑（中层，移动中等） */
.home-hero__glow--a {
  transform: translate3d(calc(var(--hero-scroll, 0) * -14px), calc(var(--hero-scroll, 0) * 10px), 0);
  will-change: transform;
}

.home-hero__glow--b {
  transform: translate3d(calc(var(--hero-scroll, 0) * 18px), calc(var(--hero-scroll, 0) * -8px), 0);
  will-change: transform;
}

/* 层 3：文案（近层，移动最快，随滚动轻微上移淡出） */
.home-hero__copy {
  position: relative;
  z-index: 2;
  /* 只做位移视差，不做透明度衰减 ——
     曾用 opacity: calc(1 - scroll*0.55)，用户下滚时标题会淡到 45%，
     属于为了动效牺牲可读性，已移除。 */
  transform: translate3d(0, calc(var(--hero-scroll, 0) * -18px), 0);
  will-change: transform;
}

/* 层 4：产品界面（最前层，几乎不随滚动移动 → 与文案形成视差） */
.home-hero__visual {
  position: relative;
  z-index: 1;
  transform: translate3d(0, calc(var(--hero-scroll, 0) * -6px), 0);
  will-change: transform;
}

/* 网格纹理更细腻，淡出更自然 */
.home-hero__grid {
  background-size: 56px 56px;
  mask-image: radial-gradient(130% 90% at 16% 6%, #000 22%, transparent 76%);
}

/* 首屏底部渐隐，与下方能力条自然衔接 */
.home-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(180deg, transparent, rgba(11, 42, 91, 0.55));
  pointer-events: none;
  z-index: 1;
}

/* ============================ 2. 玻璃质感 ============================ */
/* 依据 blur-purpose：模糊用于表达层次与浮起，不是装饰堆料。 */

/* 顶栏：滚动后加一层玻璃底 */
.site-header {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
}

/* 产品界面外框：玻璃边 + 强阴影，制造"浮在 hero 上"的观感 */
.mock {
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 40px 80px -32px rgba(2, 10, 24, 0.78),
    0 18px 40px -20px rgba(2, 10, 24, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* 绩效浮层：玻璃卡 */
.mock-float {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* ============================ 3. 渐变网格背景（premium 通用手法）============================ */
/* 用多层 radial-gradient 叠出 mesh gradient，比单色/线性渐变有质感得多。 */
.section--mesh {
  position: relative;
  background:
    radial-gradient(900px 480px at 88% 0%, rgba(83, 58, 253, 0.09), transparent 62%),
    radial-gradient(760px 420px at 6% 96%, rgba(11, 42, 91, 0.07), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.cap-strip {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

/* ============================ 4. 能力条放大 ============================ */
.cap-strip__inner { padding-block: var(--space-10); }

.cap__icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, #eef1ff 0%, #e4ebff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.cap__icon svg { width: 24px; height: 24px; }

.cap:hover .cap__icon {
  background: linear-gradient(150deg, var(--brand) 0%, #6b55ff 100%);
  box-shadow: 0 8px 20px -8px rgba(83, 58, 253, 0.6);
}

.cap__label { font-weight: var(--fw-semibold); }

/* ============================ 5. 三栏卡升级 ============================ */
.tri__col {
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 2px rgba(6, 27, 49, 0.04);
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.tri__col:hover {
  border-color: var(--brand-soft);
  box-shadow: 0 18px 40px -24px rgba(6, 27, 49, 0.28);
}

/* 学习闭环序号：渐变底，与核心标记呼应 */
.loop__idx {
  background: linear-gradient(150deg, #eef1ff 0%, #dfe6ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ============================ 6. 数据带加强 ============================ */
.stat-band {
  background:
    radial-gradient(900px 460px at 88% -20%, rgba(110, 168, 254, 0.34), transparent 62%),
    radial-gradient(700px 400px at 4% 110%, rgba(83, 58, 253, 0.22), transparent 64%),
    linear-gradient(140deg, #0a2450 0%, #0f3266 50%, #14407c 100%);
}

.stat-band__item {
  border-left: 2px solid transparent;
  border-image: linear-gradient(180deg, #9cc4ff, rgba(156, 196, 255, 0.06)) 1;
  transition: transform var(--dur-base) var(--ease-out);
}

.stat-band__item:hover { transform: translateY(-3px); }

/* ============================ 7. 工具卡升级 ============================ */
.tool {
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
  overflow: hidden;
  position: relative;
}

/* 顶部渐变描边：hover 时从左展开 */
.tool::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), #6b55ff 60%, #9cc4ff);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--ease-out);
}

.tool:hover::before { transform: scaleX(1); }

.tool:hover {
  border-color: var(--brand-soft);
  box-shadow: 0 26px 54px -30px rgba(6, 27, 49, 0.4);
  transform: translateY(-4px);
}

.tool__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, #eef1ff 0%, #e2e9ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.tool:hover .tool__icon {
  background: linear-gradient(150deg, var(--brand) 0%, #6b55ff 100%);
  box-shadow: 0 10px 24px -10px rgba(83, 58, 253, 0.65);
}

/* ============================ 8. 章节标题装饰 ============================ */
.section__head h2 {
  position: relative;
  padding-left: var(--space-5);
}

.section__head h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand), #9cc4ff);
}

/* ============================ 9. 入场编排加强 ============================ */
/* 依据 stagger-sequence：每项 30—50ms；excessive-motion：一屏最多动 1—2 个关键元素。
   这里只对首屏与数据带做编排，其余区块保持单次揭示。 */
.home-hero__copy[data-stagger="90"] > * { --anim-delay: 0ms; }

/* 数字滚动时加下划线扫光，强化"读数"感 */
.stat-band__item dd {
  position: relative;
}

.stat-band__item dd::after {
  content: "";
  position: absolute;
  left: 0;
  right: 18%;
  bottom: -6px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(156, 196, 255, 0.9), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms var(--ease-out) 200ms;
}

.stat-band.is-visible .stat-band__item dd::after,
.reveal.is-visible .stat-band__item dd::after { transform: scaleX(1); }

/* ============================ 10. 玻璃浮层：滚动进度指示 ============================ */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: var(--space-6);
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  transform: translateX(-50%);
  color: rgba(234, 241, 251, 0.6);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}

.scroll-hint__mouse {
  width: 20px;
  height: 32px;
  border: 1.5px solid rgba(234, 241, 251, 0.42);
  border-radius: var(--radius-pill);
  position: relative;
}

.scroll-hint__mouse::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: rgba(234, 241, 251, 0.8);
  transform: translateX(-50%);
  animation: hint-wheel 1.8s var(--ease-in-out) infinite;
}

@keyframes hint-wheel {
  0%, 100% { transform: translate(-50%, 0); opacity: 1; }
  55% { transform: translate(-50%, 9px); opacity: 0.25; }
}

@media (max-width: 1024px) {
  .scroll-hint { display: none; }
}

/* ============================ 11. 降级 ============================ */
@media (prefers-reduced-motion: reduce) {
  .home-hero__grid,
  .home-hero__glow--a,
  .home-hero__glow--b,
  .home-hero__copy,
  .home-hero__visual {
    transform: none !important;
    opacity: 1 !important;
  }

  .scroll-hint { display: none; }
  .scroll-hint__mouse::after { animation: none; }
  .stat-band__item dd::after { transform: scaleX(1); }
}

@media print {
  .scroll-hint { display: none; }
}