/* ══════════════════════════════════════════════════════
   首屏  #top .hero(懂你的身体 懂你的情绪)
   子组件:__kicker 标签 → __title 双行 120px 渐变大标题(交错:
          上行左偏 89px、下行右偏 111px、行盒重叠 39px,offset 用
          vw+clamp 随视口缩放)→ __sub 副文 → __actions 双按钮
   按钮纯 CSS(用户指定):主按钮粉→奶油→浅蓝渐变 + 光晕(光晕 =
   渐变自身模糊拷贝 ::before,颜色自动跟随左粉右蓝);次按钮半透明
   紫底 + 描边。色值均采样自蓝湖切片
   背景 home-bj.png(1918×1080),实底盖住 site-bg
   设计稿 1920×1080:内容块 y309..903,略低于几何中心 ~66px
   ══════════════════════════════════════════════════════ */

.hero {
  position: relative;
  z-index: 2; /* 抽屉揭幕:实底首屏盖在 .science-drawer(z1)上,滚动时上移露出第二屏 */
  overflow: hidden; /* 出血球体裁切 */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 110px 24px 60px;
  text-align: center;
  background: var(--night) url('../../images/home-bj.png') center / cover no-repeat;
}
.hero__inner {
  position: relative;
  z-index: 1; /* 文案压住装饰球 */
  margin-top: 12vh; /* flex 居中下移半值 ≈ 设计稿的低于中心 66px */
}

/* ── 装饰球体:三层结构,三种动画互不抢 transform ──
   外层 __orb 定位 + 入场浮现;中层 __orb-float 常驻漂移;
   img 层光晕呼吸(仅 orange/yellow:图自带烘焙光晕,球核只占画布
   宽 26%/20%,渲染尺寸按"球核 = 设计稿球径"反推,故远大于可见球) */
.hero__orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__orb {
  position: absolute;
  transform: translate(-50%, -50%); /* 中心点定位;也是 reduced-motion 的静止态 */
  animation: orb-enter 1.2s ease-out both;
}
.hero__orb img {
  width: 100%;
  display: block;
}
.hero__orb-float {
  animation: orb-drift var(--dur, 14s) ease-in-out var(--delay, 0s) infinite;
}

/* 定位与动画参数(位置按设计图 1920 基准换算) */
.hero__orb--orange {
  left: 4.8%; top: 27%;
  width: clamp(320px, 42vw, 800px);
  --dx: 22px; --dy: 28px; --dur: 16s; --delay: -3s;
}
.hero__orb--purple {
  left: 24.5%; top: 48%;
  width: clamp(48px, 5.2vw, 100px);
  --dx: -12px; --dy: 14px; --dur: 11s; --delay: -6s;
  animation-delay: 0.15s;
}
.hero__orb--yellow {
  left: 88.4%; top: 45.5%;
  width: clamp(320px, 42vw, 800px);
  --dx: -24px; --dy: -20px; --dur: 18s; --delay: -9s;
  animation-delay: 0.3s;
}
.hero__orb--magenta {
  left: 68%; top: 9.3%;
  width: clamp(40px, 4.3vw, 82px);
  --dx: 10px; --dy: -12px; --dur: 10s; --delay: -2s;
  animation-delay: 0.45s;
}
.hero__orb--bluepink {
  left: 98%; top: 4%;
  width: clamp(110px, 12.5vw, 240px);
  --dx: -18px; --dy: 20px; --dur: 13s; --delay: -7s;
  animation-delay: 0.6s;
}
/* 发光球整体 60% 透明度(放中层:外层 opacity 被入场动画占用,img 被呼吸动画占用) */
.hero__orb--orange .hero__orb-float,
.hero__orb--yellow .hero__orb-float { opacity: 0.6; }
/* 光晕呼吸:直接脉动自带光晕的图,不另加 CSS 光晕 */
.hero__orb--orange img { animation: orb-pulse 6s ease-in-out infinite; }
.hero__orb--yellow img { animation: orb-pulse 7.5s ease-in-out -3s infinite; }

@keyframes orb-enter {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 30px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes orb-drift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(calc(var(--dx) * 0.6), var(--dy)); }
  66%  { transform: translate(var(--dx), calc(var(--dy) * 0.4)); }
  100% { transform: translate(0, 0); }
}
@keyframes orb-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); opacity: 0.92; }
  50%      { transform: scale(1.06); filter: brightness(1.08); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__orb,
  .hero__orb-float,
  .hero__orb img { animation: none; }
}

.hero__kicker {
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 3.4px;
  line-height: 40px;
  color: #C5B8ED;
}

/* ── 双行交错大标题 ── */
.hero__title {
  margin-top: -5px;
  font-size: clamp(3rem, 6.25vw, 120px); /* 1920 时 120px */
  font-weight: 400;
}
.hero__title-line {
  display: block;
  line-height: 1.4333; /* 172/120 */
  color: #FCEEFF; /* 渐变兜底色 */
  background-image: linear-gradient(90deg, #EEEEEE 0%, #D1A1FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__title-line--body { transform: translateX(clamp(-89px, -4.64vw, 0px)); }
.hero__title-line--mood {
  margin-top: -0.325em; /* 行盒交叠 39px */
  transform: translateX(clamp(0px, 5.78vw, 111px));
}

.hero__sub {
  margin: 21px auto 0;
  max-width: 625px;
  font-size: 20px;
  font-weight: 300;
  line-height: 40px;
  color: #C5B8ED;
}

/* ── 按钮 ── */
.hero__actions {
  margin-top: 103px;
  display: flex;
  justify-content: center;
  gap: 26px;
}
.hero__btn {
  width: 162px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  font-weight: 500;
  text-decoration: none;
  transition: filter 0.2s ease, background-color 0.2s ease;
}
.hero__btn--primary {
  position: relative;
  z-index: 0; /* 自建层叠上下文,让 -1 光晕垫在按钮下而不是沉到页面背景后 */
  font-size: 16px;
  color: #16083B;
  background: linear-gradient(90deg,
    #FAB9BA 0%, #F9C5B3 30%, #EDD5BC 50%, #D7DAC6 70%, #CECEDC 100%);
}
/* 光晕:按钮渐变的模糊拷贝垫在下层,颜色随渐变左粉右蓝 */
.hero__btn--primary::before {
  content: '';
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg,
    #FAB9BA 0%, #F9C5B3 30%, #EDD5BC 50%, #D7DAC6 70%, #CECEDC 100%);
  filter: blur(18px);
  opacity: 0.9;
}
.hero__btn--primary:hover { filter: brightness(1.06); }
.hero__btn--ghost {
  font-size: 15px;
  color: #FFFFFF;
  background: rgba(54, 56, 104, 0.5);
  border: 1px solid rgba(84, 82, 131, 0.55);
}
.hero__btn--ghost:hover { background: rgba(54, 56, 104, 0.72); }

/* ── 响应式 ── */
@media (max-width: 960px) {
  .hero { padding: 96px 24px 48px; }
  .hero__kicker { font-size: 14px; letter-spacing: 2.4px; }
  .hero__sub { font-size: 16px; line-height: 1.9; }
  .hero__actions { margin-top: 56px; }
}