/* 暖流官网 · 首屏满屏 + 热点标记简化 — 2026-10-29
 *
 * 两个问题：
 * 1) 首屏高度原来是 clamp(760px,93svh,930px)，永远比视口矮 7%，
 *    底部露出一条白边。参考宁德时代、深度智控的首屏都是「一张图占满一屏」，
 *    所以改成 100svh（小视口高度：手机地址栏展开时也不跳），下限 600px 兜住
 *    矮窗口。用 svh 而不是 dvh，是因为 dvh 会随地址栏收放实时变化，滚动时
 *    整屏高度跟着跳，观感很差。
 * 2) 热点：平时只显示一颗橙色呼吸灯（原来的磨砂玻璃按钮常显太抢画面，
 *    四个按钮压在照片上像贴纸）。鼠标经过时，才从呼吸灯右侧推出一个
 *    橙底白字的按钮；触屏没有 hover，按钮直接常显，否则等于点不到。
 *
 * 这个文件必须在其它样式之后加载（index.html 里排在最后）。
 */

/* ---------- 一、首屏占满一屏 ---------- */
body.v5-site .hero-v3 {
  height: 100vh;            /* 老浏览器兜底 */
  height: 100svh;           /* 支持 svh 的浏览器以这行为准 */
  min-height: 600px;
  max-height: none;
  overflow: hidden;
}

/* 手机：改成「图在上、文字卡片压在底部」。
   原来同时被设了 top 和 bottom，卡片被拉成一整块，底部留一大片空白。 */
@media (max-width: 767px) {
  body.v5-site .hero-v3 .hero-inner {
    top: auto !important;
    bottom: 22px !important;
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* 高度变大后，标题与副行的间距按视口再收一点，避免小笔记本上过挤 */
@media (min-width: 1000px) and (max-height: 820px) {
  body.v5-site .hero-v3 .hero-inner { padding: 30px 34px 28px !important; }
  body.v5-site .hero-v3 .hero-title { font-size: clamp(46px, 4.6vw, 58px); }
  body.v5-site .hero-v3 .hero-sub { font-size: clamp(20px, 1.8vw, 23px); margin-top: 12px; }
}

/* 首屏在第一屏里，不该等滚动才出现。
   入场动画的触发线设在「视口底部往上 60px」，而首屏卡片贴底，
   行动链接正好落在触发线以下 —— 永远等不到，就一直 opacity:0，
   卡片底部留下一块空玻璃。这里直接放行。 */
body.v5-site .hero-v3 .reveal,
body.v5-site .hero-v3 .reveal.in {
  opacity: 1 !important;
  transform: none !important;
}

/* 卡片贴底后，最后一行贴边太紧，补一点内边距 */
@media (max-width: 767px) {
  body.v5-site .hero-v3 .hero-inner { padding-bottom: 20px !important; }
  body.v5-site .hero-v3 .hero-actions { margin-top: 6px !important; }
}

/* ---------- 二、热点：橙色呼吸灯，悬停向右推出按钮 ---------- */

/* 四个场景统一用品牌橙：场景是平行关系，颜色不该暗示主次 */
body.v5-site .wf-pin-heating,
body.v5-site .wf-pin-park,
body.v5-site .wf-pin-datacenter,
body.v5-site .wf-pin-manufacturing {
  --pin: #F08300;
}

/* 平时只留一颗呼吸灯。标签改成绝对定位贴到圆点右侧 —— 它一旦参与布局，
   整块的 translate(-50%,-50%) 中心点就会随文字长短漂移，
   热点就不在它标的那台设备上了。 */
body.v5-site .wf-hero-pin {
  gap: 0 !important;
  scale: 1 !important;
  filter: none !important;
}

/* 悬停热区：圆点只有 20px，直接指着它太难指中。
   用 :before 把可指范围扩到 56px，同时也盖住了「圆点 → 按钮」之间那道缝，
   鼠标横移过去不会中途掉 hover、按钮不会缩回去。 */
body.v5-site .wf-hero-pin:before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

/* ---- 呼吸灯本体 ---- */
/* 两个动作叠在一起，才读得出「一闪一闪 + 涟漪扩散」：
   ① 灯芯 pulse：整体 scale + brightness + 光晕同步涨落，2.2s 一个来回；
   ② 涟漪 ripple：两层描边环错开半个周期往外扩到 3 倍，扩到边缘就消失。
   灯芯用径向渐变（左上偏亮）做质感，不是一块死橙；白环仍用 box-shadow
   画，不占尺寸，避免又变成同心圆靶心。 */
body.v5-site .wf-pin-beacon {
  display: block !important;
  position: relative !important;
  width: 17px !important;
  height: 17px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 34% 30%,
    #FFC15A 0%, #FF9C1A 40%, #F08300 76%, #E67C00 100%) !important;
  box-shadow:
    0 0 0 1.2px rgba(255, 255, 255, .95),
    0 0 7px 2px rgba(240, 131, 0, .5),
    0 0 18px 6px rgba(240, 131, 0, .22),
    0 2px 7px rgba(22,33,62, .26) !important;
  animation: wf-pin-pulse 2.2s ease-in-out infinite !important;
  transition: transform .2s ease;
  will-change: transform, box-shadow;
}
body.v5-site .wf-pin-beacon:before,
body.v5-site .wf-pin-beacon:after {
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;
  border: 2px solid rgba(250, 146, 26, .9) !important;
  border-radius: 50% !important;
  background: none !important;
  box-shadow: 0 0 7px rgba(240, 131, 0, .38) !important;
  animation: wf-pin-ripple 2.2s cubic-bezier(.16, .72, .3, 1) infinite !important;
  pointer-events: none !important;
}
/* 第二层晚半个周期出来 —— 一圈还没散完，下一圈已经起头，像水面连环波 */
body.v5-site .wf-pin-beacon:after {
  display: block !important;
  animation-delay: 1.1s !important;
}

@keyframes wf-pin-pulse {
  0%, 100% {
    transform: scale(.86);
    filter: brightness(.9);
    box-shadow:
      0 0 0 1.2px rgba(255, 255, 255, .95),
      0 0 5px 1px rgba(240, 131, 0, .36),
      0 0 12px 3px rgba(240, 131, 0, .14),
      0 2px 7px rgba(22,33,62, .26);
  }
  50% {
    transform: scale(1.2);
    filter: brightness(1.22);
    box-shadow:
      0 0 0 1.2px rgba(255, 255, 255, 1),
      0 0 11px 4px rgba(240, 131, 0, .82),
      0 0 28px 10px rgba(240, 131, 0, .38),
      0 2px 7px rgba(22,33,62, .26);
  }
}
@keyframes wf-pin-ripple {
  0% {
    transform: scale(.52);
    opacity: .82;
    border-width: 2.4px;
  }
  55% { opacity: .42; }
  100% {
    transform: scale(3.2);
    opacity: 0;
    border-width: 1px;
  }
}

/* ---- 悬停时推出的按钮 ---- */
/* 之前为了白字的对比度把底色压到 #C96C00，颜色一发棕就显「脏」。这次换思路：
   底色不再加深，只做黄 → 橙的短跨度渐变（#FFA92B → #F08300），跨度小、不发浑，
   橙是亮的、干净的；可读性交给字重（700）+ 一层极短的硬投影把笔画边缘压实，
   而不是靠背景变暗。去掉内高光，顶部不再闷。 */
body.v5-site .wf-pin-label {
  position: absolute !important;
  left: calc(100% + 9px) !important;
  top: 50% !important;
  gap: 6px !important;
  padding: 7px 13px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: linear-gradient(180deg, #FFAB2E 0%, #FA9418 26%, #F08300 78%, #EC7E00 100%) !important;
  box-shadow:
    0 5px 14px rgba(240, 131, 0, .26),
    0 2px 5px rgba(46, 26, 0, .16) !important;
  color: #fff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: .2px;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(148, 62, 0, .5);
  transform-origin: left center;
  transform: translate(-7px, -50%) scale(.86);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .18s ease,
    transform .26s cubic-bezier(.2, .78, .26, 1),
    box-shadow .2s ease,
    visibility .18s;
}
body.v5-site .wf-pin-label strong {
  color: #fff !important;
  font-weight: 600 !important;
}

body.v5-site .wf-pin-arw {
  width: 14px;
  height: 14px;
  flex: none;
  color: #fff;
  opacity: .92;
  transition: transform .2s ease;
}

/* 指针经过（或键盘聚焦）：按钮从圆点右侧推出来 */
body.v5-site .wf-hero-pin:hover .wf-pin-label,
body.v5-site .wf-hero-pin:focus-visible .wf-pin-label {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(0, -50%) scale(1);
}
/* 指针进去：灯芯停在最亮那一格（不再闪），涟漪照旧一圈圈散 ——
   按钮已经出来了，灯还要保持「活的」 */
body.v5-site .wf-hero-pin:hover .wf-pin-beacon,
body.v5-site .wf-hero-pin:focus-visible .wf-pin-beacon {
  animation: none !important;
  transform: scale(1.12) !important;
  filter: brightness(1.14) !important;
  box-shadow:
    0 0 0 1.2px rgba(255, 255, 255, .98),
    0 0 10px 3px rgba(240, 131, 0, .72),
    0 0 26px 9px rgba(240, 131, 0, .32),
    0 2px 7px rgba(22,33,62, .26) !important;
}
body.v5-site .wf-hero-pin:hover .wf-pin-label,
body.v5-site .wf-hero-pin:focus-visible .wf-pin-label {
  background: linear-gradient(180deg, #FFB63F 0%, #FB9C1E 26%, #F28700 78%, #EE8200 100%) !important;
  box-shadow:
    0 8px 20px rgba(240, 131, 0, .34),
    0 2px 6px rgba(46, 26, 0, .18) !important;
}
body.v5-site .wf-hero-pin:hover .wf-pin-arw,
body.v5-site .wf-hero-pin:focus-visible .wf-pin-arw {
  transform: translateX(2px);
}
body.v5-site .wf-hero-pin:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 8px;
  border-radius: 50%;
  filter: none !important;
}

/* ---- 触屏：没有 hover，按钮直接常显，否则等于点不到 ---- */
@media (hover: none), (max-width: 750px) {
  body.v5-site .wf-pin-label {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(0, -50%) scale(1) !important;
    padding: 7px 11px 7px 10px !important;
    font-size: 11.5px !important;
    gap: 6px !important;
  }
  body.v5-site .wf-pin-arw { width: 11px; height: 11px; }
  body.v5-site .wf-pin-beacon { width: 13px !important; height: 13px !important; }
}

/* 靠右的两个点，窄屏上向右推会顶出屏幕，改成向左推 */
@media (max-width: 750px) {
  body.v5-site .wf-pin-datacenter .wf-pin-label,
  body.v5-site .wf-pin-manufacturing .wf-pin-label {
    left: auto !important;
    right: calc(100% + 9px) !important;
    transform-origin: right center;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.v5-site .wf-pin-beacon,
  body.v5-site .wf-pin-beacon:before,
  body.v5-site .wf-pin-beacon:after { animation: none !important; }
  /* 动画停掉后涟漪不能留在原地，否则灯周围挂着一圈死环 */
  body.v5-site .wf-pin-beacon:before,
  body.v5-site .wf-pin-beacon:after { display: none !important; }
  body.v5-site .wf-pin-label,
  body.v5-site .wf-pin-beacon,
  body.v5-site .wf-pin-arw { transition: none; }
}