/* ============================================================
   hero.css
   ============================================================ */

.hero{
  min-height:100vh;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;
  padding-top:130px;padding-bottom:0;
  /* 顶部深蓝紫 → 底部精确对齐产品区 #3730d4 */
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%,   rgba(100,50,220,.50) 0%,transparent 55%),
    radial-gradient(ellipse 60% 55% at 5%  70%,  rgba(0,200,185,.30)  0%,transparent 60%),
    radial-gradient(ellipse 60% 55% at 95% 65%,  rgba(80,60,230,.35)  0%,transparent 60%),
    linear-gradient(180deg, #0d0a2e 0%, #110e3a 18%, #2520a8 52%, #3730d4 78%, #3730d4 100%);
}

/* 左青右蓝V形地面 */
.hero-floor{
  position:absolute;bottom:0;left:0;right:0;height:60%;
  z-index:0;pointer-events:none;
  background:
    linear-gradient(135deg, rgba(0,220,200,.38) 0%,rgba(0,180,200,.12) 28%,transparent 55%),
    linear-gradient(-135deg,rgba(75,55,230,.42) 0%,rgba(100,80,240,.15) 28%,transparent 55%);
}
.hero-floor::before{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(rgba(140,180,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(140,180,255,.05) 1px,transparent 1px);
  background-size:70px 70px;
  transform:perspective(500px) rotateX(50deg);
  transform-origin:bottom center;
  mask-image:linear-gradient(to top,rgba(0,0,0,.4) 0%,transparent 65%);
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.4) 0%,transparent 65%);
}

/* 底部无缝过渡遮罩 — 完全覆盖分界线 */
.hero-fade{
  position:absolute;bottom:0;left:0;right:0;
  height:100%;
  background:linear-gradient(to top,
    #3730d4 0%,
    #3730d4 12%,
    rgba(55,48,212,0.85) 30%,
    rgba(55,48,212,0.4) 60%,
    transparent 100%
  );
  z-index:3;pointer-events:none;
}

/* 星点 */
.hero-stars{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  overflow:hidden;
}
.hero-stars .star{
  position:absolute;background:#fff;border-radius:50%;
  animation:twinkle var(--d,3s) ease-in-out infinite var(--dl,0s);
}
@keyframes twinkle{
  0%,100%{opacity:var(--oa,.6);transform:scale(1)}
  50%{opacity:var(--ob,.08);transform:scale(.5)}
}
.hero-stars .sparkle{
  position:absolute;
  color:rgba(255,255,255,.55);
  display:block;
  line-height:1;
  animation:sparkle-spin var(--ds,4s) linear infinite var(--dl,0s);
}
@keyframes sparkle-spin{
  0%{transform:rotate(0) scale(1);opacity:.35}
  50%{transform:rotate(180deg) scale(1.3);opacity:.8}
  100%{transform:rotate(360deg) scale(1);opacity:.35}
}

/* 左上角星球装饰 */
.hero-planet{
  position:absolute;top:72px;left:13%;
  width:110px;height:110px;border-radius:50%;z-index:2;pointer-events:none;
  background:radial-gradient(circle at 35% 32%,
    rgba(200,235,235,.95) 0%,rgba(120,180,210,.7) 38%,
    rgba(60,90,200,.5) 70%,transparent 100%);
  filter:blur(1.5px);
  animation:planet-float 9s ease-in-out infinite;
  box-shadow:0 8px 32px rgba(0,200,185,.25);
}
@keyframes planet-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}

/* 顶部光晕 */
.hero-glow{
  position:absolute;top:-80px;left:50%;transform:translateX(-50%);
  width:1000px;height:540px;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(100,65,255,.38) 0%,transparent 68%);
}

/* 文字 */
.hero-content{
  position:relative;z-index:5;
  text-align:center;
  max-width:1280px;width:100%;
  padding:0 48px;
  margin-top:32px;
  margin-bottom:0;
  flex-shrink:0;
}
.hero-title{
  font-size:clamp(40px,6.2vw,82px);
  font-weight:900;line-height:1.12;
  color:#fff;letter-spacing:-.015em;
  text-shadow:0 2px 40px rgba(0,0,0,.3);
}
.hero-title span{display:block}

/* 三设备区 */
.hero-devices{
  position:absolute;z-index:4;
  width:100%;max-width:800px;
  left:50%;transform:translateX(-50%);
  bottom:0;height:62%;
  pointer-events:none;
}


/*
  ══ 设备图片替换说明 ══
  在对应 .device-slot 内加入 <img> 即显示：
  左: <img src="assets/images/device-left.png"   alt="左侧设备">
  中: <img src="assets/images/device-center.png" alt="中心设备">
  右: <img src="assets/images/device-right.png"  alt="右侧设备">
  建议透明底PNG，等距视角
*/
.device-slot{
  position:absolute;
  display:flex;align-items:flex-end;justify-content:center;
}
.device-slot img{
  width:100%;height:auto;object-fit:contain;
  filter:drop-shadow(0 20px 50px rgba(0,0,50,.65));
  animation:dev-float var(--ft,6s) ease-in-out infinite var(--fd,0s);
}
@keyframes dev-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}

.device-left {left:3%;bottom:0;width:clamp(190px,24vw,330px);--ft:7s;--fd:.6s}
.device-center{left:50%;transform:translateX(-50%);bottom:0;width:clamp(260px,33vw,450px);z-index:5;--ft:6s;--fd:0s}
.device-right {right:3%;bottom:4%;width:clamp(120px,15vw,210px);--ft:8s;--fd:1.2s}

/* ── 移动端 ── */
@media(max-width:768px){
  .hero{
    padding-top:106px;
    min-height:auto;
    padding-bottom:72vw;
    text-align:center;
  }

  .hero-content{
    padding:0 20px;
    text-align:center;
  }

  .hero-title{
    font-size:clamp(36px,10vw,56px);
  }

  .hero-planet{
    width:70px;
    height:70px;
    top:76px;
    left:6%;
  }

  /* 关键：移动端不要这层大地面 */
  .hero-floor{
    display:none;
  }

  /* 关键：底部渐变也压低一点 */
  .hero-fade{
    height:90px;
    background:linear-gradient(
      to top,
      #3730d4 0%,
      rgba(55,48,212,.85) 38%,
      transparent 100%
    );
  }

  .hero-devices{
    position:absolute;
    bottom:0;
    height:68vw;
    width:100%;
  }

  .device-left,
  .device-right{
    display:none;
  }

  .device-center{
    left:50%;
    transform:translateX(-50%);
    width:clamp(280px,86vw,430px);
    bottom:0;
  }
}
.hero-floor{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(0,220,200,.30) 0%, rgba(0,180,200,.08) 22%, transparent 48%),
    linear-gradient(-135deg, rgba(75,55,230,.30) 0%, rgba(100,80,240,.10) 22%, transparent 48%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.25) 28%, rgba(0,0,0,1) 55%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.25) 28%, rgba(0,0,0,1) 55%);
}