/* 暖流首页全景地图 · CATL-inspired image-first, not a CATL replica.
   2026-10-14, scoped exclusively to existing V5 Chinese homepage. */
body.v5-site:has(.hero-hotspot-detail) .nav:not(.scrolled){
  background:rgba(246,249,254,.70);
  border-bottom:1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(15px) saturate(135%);
  backdrop-filter:blur(15px) saturate(135%);
}
body.v5-site .hero-v3:has(.hero-hotspot-detail){
  height:clamp(675px,48.7vw,865px);min-height:0;
  max-height:none;isolation:isolate;position:relative;
  background:#b9c9e8;overflow:hidden;
}
body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-overview{
  opacity:1!important;visibility:visible!important;inset:0;
  background-size:cover!important;background-position:center center!important;
  filter:saturate(.94) contrast(1.015) brightness(1.025)!important;
  transform-origin:center;
  animation:wfPanoramaBreathe 29s ease-in-out infinite alternate!important;
  will-change:transform;
}
@keyframes wfPanoramaBreathe{
  0%{transform:scale(1.004)}
  100%{transform:scale(1.025)}
}
/* Fade only the sky typography zone; no rectangle or glass card on the panorama. */
body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-scrim{
  z-index:1;background:
    linear-gradient(180deg,rgba(244,248,255,.68) 0%,rgba(244,248,255,.38) 20%,rgba(244,248,255,0) 41%),
    linear-gradient(90deg,rgba(242,246,254,.22) 0%,transparent 51%);
}
body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-inner{
  position:absolute;z-index:3;top:clamp(105px,9.8vw,158px);
  left:max(44px,calc((100vw - 1380px)/2 + 44px));right:auto;
  display:block;min-height:0;
  width:min(760px,calc(100vw - 96px));
  padding:0!important;margin:0;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  background:transparent!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-title{
  margin:0;width:auto;max-width:100%;
  color:#253256;
  font-size:clamp(46px,4.1vw,68px);letter-spacing:-.06em;
  font-weight:700;line-height:1.05;text-shadow:0 2px 14px rgba(255,255,255,.7);
}
body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-title .accent{color:#ed8200}
body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-sub{
  display:block;margin-top:9px;max-width:100%;
  font-size:clamp(18px,1.7vw,27px);line-height:1.45;
  color:#253256;text-shadow:0 2px 13px rgba(255,255,255,.77);
}
body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-fact,
body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-fact.reveal{
  width:max-content;max-width:100%;display:flex!important;align-items:center;
  margin:14px 0 8px;padding:0;background:transparent;
  border:0;border-radius:0;backdrop-filter:none;
  box-shadow:none;color:#3b486d;font-size:12px;font-weight:620;
  text-shadow:0 1px 9px rgba(255,255,255,.9);opacity:1!important;transform:none!important;
}
body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-fact .dot{
  width:7px;height:7px;margin:0 7px 0 0;background:#ee8300;box-shadow:0 0 0 4px rgba(255,255,255,.65);
}
body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-actions{
  display:flex;margin:4px 0 0;gap:0;position:static;opacity:1!important;transform:none!important;
}
body.v5-site .hero-case-link{
  padding:7px 0;
  color:#1c367f;font-size:13px;line-height:1.4;font-weight:670;
  text-decoration:none;border-bottom:1px solid rgba(25,59,152,.52);
  text-shadow:0 1px 10px rgba(255,255,255,.83);
}
body.v5-site .hero-case-link:hover{color:#e88203;border-color:#e88203}
body.v5-site .hero-case-link:focus-visible{outline:3px solid #133cae;outline-offset:4px}
/* The old entire-width nav shell becomes a spatial marker layer with pointer-through
   behavior. Markers map to locations in the original, UNSLICED energy image. */
body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-scene-nav{
  position:absolute;inset:0;z-index:4;
  width:100%;max-width:none;height:100%;
  display:block!important;
  padding:0!important;margin:0!important;gap:0!important;
  background:none!important;border:0!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  pointer-events:none;
}
body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-scene{
  position:absolute;width:auto;min-width:0;min-height:0;height:auto;
  padding:8px 13px 8px 11px;margin:0;
  display:inline-flex;flex-direction:row;align-items:center;gap:8px;
  border:1px solid rgba(255,255,255,.88)!important;border-radius:999px!important;
  background:rgba(252,253,255,.82)!important;
  box-shadow:0 9px 27px rgba(16,45,123,.16),inset 0 1px 0 #fff!important;
  -webkit-backdrop-filter:blur(12px) saturate(130%)!important;
  backdrop-filter:blur(12px) saturate(130%)!important;
  color:#3b486d;
  transform:translate(-50%,-50%)!important;
  transition:background .2s,box-shadow .2s,border-color .2s;
  pointer-events:auto;cursor:pointer;white-space:nowrap;
}
body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-scene::before{
  content:"";display:block;width:8px;height:8px;flex:none;border-radius:50%;
  background:#1846c3;box-shadow:0 0 0 4px rgba(22,70,203,.12);
}
body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-scene.is-active::before{
  background:#f08a00;box-shadow:0 0 0 4px rgba(241,142,5,.15);
}
body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-scene:hover,
body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-scene:focus-visible{
  background:#fff!important;box-shadow:0 9px 30px rgba(25,50,120,.26)!important;
}
body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-scene.is-active{
  border-color:rgba(240,145,17,.54)!important;
  background:rgba(255,251,245,.94)!important;
}
body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-scene strong{font-size:13px;line-height:1.2;color:#253256;font-weight:680}
body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-scene small,
body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-scene span{display:none!important}
body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-scene[data-focus="0"]{left:14%;top:48%}
body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-scene[data-focus="1"]{left:40%;top:32%}
body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-scene[data-focus="2"]{left:75%;top:39%}
body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-scene[data-focus="3"]{left:78%;top:76%}
/* Motion button is separate from the spot labels visually, despite being created in nav. */
body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-motion{
  pointer-events:auto;position:absolute;z-index:6;
  top:auto;bottom:28px;right:28px;left:auto;
  border:1px solid rgba(215,223,239,.8);
  background:rgba(255,255,255,.66);backdrop-filter:blur(9px);
  border-radius:99px;min-width:0;padding:7px 12px;font-size:11px;
  box-shadow:none;
}
body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-foot{display:none!important}
body.v5-site .hero-v3:has(.hero-hotspot-detail) .energy-paths{display:none!important}
/* Click markers reveal one compact, dismissible context panel, not five permanent cards. */
body.v5-site .hero-hotspot-detail{
  position:absolute;z-index:7;right:7%;bottom:15%;
  width:min(300px,33vw);padding:17px 21px;
  border-radius:13px;border:1px solid rgba(255,255,255,.88);
  background:rgba(250,252,255,.92);
  box-shadow:0 15px 40px rgba(17,37,91,.2);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  color:#253256;
}
body.v5-site .hero-hotspot-detail[hidden]{display:none!important}
body.v5-site .hero-hotspot-close{
  position:absolute;top:8px;right:10px;
  background:transparent;border:0;border-radius:4px;
  color:#717d98;font-size:21px;line-height:1;
  padding:5px;cursor:pointer;
}
body.v5-site .hero-hotspot-eyebrow{display:block;color:#717d98;font-size:11px;margin-bottom:7px}
body.v5-site .hero-hotspot-detail strong{display:block;font-size:20px;color:#15295f}
body.v5-site .hero-hotspot-detail p{margin:7px 0 13px;font-size:13px;line-height:1.65;color:#5a698c}
body.v5-site .hero-hotspot-detail a{color:#d3790d;font-size:13px;font-weight:700;text-decoration:none}
/* Avoid image-specific fake zoom anchors: labels stay aligned with the panorama. */
body.v5-site .hero-v3:has(.hero-hotspot-detail)[data-focus] .hero-overview{
  background-position:center center!important;
}
body.v5-site .hero-v3:has(.hero-hotspot-detail).motion-paused .hero-overview{
  animation-play-state:paused!important;
}
@media(max-width:950px) and (min-width:768px){
 body.v5-site .hero-v3:has(.hero-hotspot-detail){height:clamp(630px,62vw,740px)}
 body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-inner{top:110px;left:35px;width:min(660px,calc(100vw - 70px))}
 body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-title{font-size:48px}
 body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-scene[data-focus="1"]{left:44%;top:41%}
}
@media(max-width:767px){
 body.v5-site .hero-v3:has(.hero-hotspot-detail){
   height:735px;min-height:735px;
 }
 body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-overview{
   background-size:auto 100%!important;
   background-position:50% 50%!important;
   animation:none!important;transform:none!important;
 }
 body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-scrim{
   background:linear-gradient(180deg,rgba(247,250,255,.96) 0%,rgba(247,250,255,.86) 31%,rgba(247,250,255,.14) 59%,rgba(236,241,252,.48) 100%);
 }
 body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-inner{
   left:20px;right:20px;top:calc(var(--nav-h) + 43px);width:auto;
   padding:0!important;
 }
 body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-title{font-size:clamp(36px,10vw,44px);line-height:1.05}
 body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-sub{font-size:19px;line-height:1.39;max-width:350px;margin-top:11px}
 body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-fact,
 body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-fact.reveal{
   max-width:100%;width:auto;white-space:normal;align-items:flex-start;
   font-size:10.5px;line-height:1.55;margin:12px 0 8px;
 }
 body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-fact .dot{margin-top:6px}
 body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-case-link{font-size:12px}
 /* Desktop spatial coordinates aren't meaningful after mobile cover crop.
    Four minimal image labels replace the old bulky full-width four-card bar. */
 body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-scene-nav{
   inset:auto 12px 44px;right:12px;width:auto;height:105px;
   display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));
   grid-template-rows:repeat(2,45px);gap:8px!important;
 }
 body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-scene{
   position:static;left:auto;top:auto;
   transform:none!important;width:100%;min-width:0;min-height:44px;height:44px;
   display:inline-flex;padding:10px 12px;
   border-radius:6px!important;
   box-shadow:0 6px 18px rgba(17,42,112,.11)!important;
 }
 body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-scene strong{font-size:12px}
 body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-motion{
   bottom:calc(100% + 10px);right:0;font-size:10px;
 }
 body.v5-site .hero-hotspot-detail{
   right:17px;left:17px;bottom:165px;width:auto;padding:14px 17px;
 }
}
@media(prefers-reduced-motion:reduce){
 body.v5-site .hero-v3:has(.hero-hotspot-detail) .hero-overview{animation:none!important;transform:none!important}
}