/* Warmflow V5 · panoramic hero precision layout / 2026-10-14
   Source image: assets/img/v5/hero-overview-optimized.webp (1775x800).
   Hotspot xy are mapped to source image by home-precise-hotspots.js;
   popup anchoring is computed from the ACTUAL button geometry, not one shared corner. */
body.v5-site .hero-v3:has(#hero-hotspot-detail){
  height:clamp(565px,45vw,805px)!important;
  min-height:565px!important;max-height:805px!important;
  background:#e8eef9;overflow:hidden;
}
body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-overview{
  background-size:cover!important;
  background-position:50% 50%!important;
  animation:none!important;transform:none!important;
  filter:saturate(.95) brightness(1.035)!important;
}
/* Feather the frame, not the engineering equipment: centre retains its contrast. */
body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-scrim{
  pointer-events:none;z-index:2;
  background:
    linear-gradient(180deg,rgba(248,250,255,.83) 0%,rgba(248,250,255,.38) 11%,rgba(248,250,255,0) 29%),
    linear-gradient(90deg,rgba(248,250,255,.85) 0%,rgba(248,250,255,.44) 17%,rgba(248,250,255,0) 42%),
    linear-gradient(0deg,rgba(248,250,255,.54),rgba(248,250,255,0) 15%),
    linear-gradient(270deg,rgba(248,250,255,.52),rgba(248,250,255,0) 12%);
}
body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-inner{
  position:absolute;z-index:3;
  top:clamp(92px,10.5vw,137px)!important;
  left:max(26px,calc((100vw - 1440px)/2 + 42px))!important;
  right:auto!important;
  width:min(550px,38vw)!important;
  max-width:none!important;
  padding:0!important;margin:0!important;
  border:0!important;border-radius:0!important;background:none!important;
  box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  text-align:left!important;
}
body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-title{
  font-size:clamp(40px,3.55vw,60px)!important;
  line-height:1.07;letter-spacing:-.06em;
  color:#253256;text-shadow:0 2px 19px rgba(255,255,255,.87);
}
body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-sub{
  margin-top:8px;font-size:clamp(19px,1.58vw,27px)!important;
  line-height:1.52;font-weight:660;
  color:#253256;text-shadow:0 1px 15px #fff;
}
body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-fact,
body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-fact.reveal{
  width:auto!important;max-width:100%;
  line-height:1.6;font-size:clamp(10px,.79vw,12px)!important;
  margin:9px 0 5px!important;color:#5a698c;
  font-weight:620;white-space:normal;
}
body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-actions{
  margin-top:2px!important;
}
body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-case-link{
  font-size:12px!important;padding:4px 0;
}
/* A source-image-coordinate marker layer rather than viewport-percent approximation. */
body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-scene-nav{
  inset:0!important;display:block!important;
  width:100%!important;height:100%!important;
  padding:0!important;margin:0!important;
  pointer-events:none!important;background:transparent!important;border:0!important;box-shadow:none!important;
}
body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-scene{
  position:absolute!important;
  transform:translate(-50%,-50%)!important;
  min-width:0!important;width:max-content!important;max-width:none;
  min-height:36px!important;height:auto!important;
  display:inline-flex!important;flex-direction:row!important;align-items:center!important;
  gap:7px!important;
  padding:7px 12px 7px 10px!important;
  border-radius:50px!important;border:1px solid rgba(255,255,255,.91)!important;
  background:rgba(255,255,255,.86)!important;
  box-shadow:0 7px 25px rgba(31,54,119,.14)!important;
  -webkit-backdrop-filter:blur(11px) saturate(135%)!important;
  backdrop-filter:blur(11px) saturate(135%)!important;
  pointer-events:auto!important;
  white-space:nowrap;
}
body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-scene::before{
  flex:none;width:18px;height:18px;
  box-shadow:none!important;background:#f38a06!important;
  content:"热"!important;
  display:inline-flex;align-items:center;justify-content:center;
  color:white;font-size:10px;font-weight:700;
}
body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-scene[data-focus="1"]::before{
  content:"园"!important;background:#20b787!important;
}
body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-scene[data-focus="2"]::before{
  content:"数"!important;background:#2155ce!important;
}
body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-scene[data-focus="3"]::before{
  content:"造"!important;background:#7362ce!important;
}
body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-scene.is-active{
  background:rgba(255,255,255,.95)!important;border-color:rgba(241,155,42,.8)!important;
}
body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-scene strong{
  font-size:12px!important;letter-spacing:0!important;color:#3b486d;font-weight:690;
}
body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-scene:hover{
  background:#fff!important;box-shadow:0 9px 28px rgba(30,54,120,.22)!important;
}
body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-hotspot-detail{
  position:absolute!important;z-index:8;inset:auto;
  width:270px!important;max-width:calc(100% - 28px);
  box-sizing:border-box;
  padding:17px 19px!important;
  border:1px solid rgba(255,255,255,.93);border-radius:12px;
  background:rgba(251,252,255,.95);box-shadow:0 16px 38px rgba(28,51,114,.17);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-hotspot-detail strong{font-size:18px}
body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-hotspot-detail p{font-size:12px;line-height:1.75}
body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-hotspot-detail[hidden]{display:none!important}
body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-motion{
  pointer-events:auto;bottom:19px;right:22px;
  background:rgba(255,255,255,.75);
}
/* Medium widths still show the full composition as much as possible. */
@media (min-width:768px) and (max-width:1100px){
  body.v5-site .hero-v3:has(#hero-hotspot-detail){height:clamp(560px,53vw,650px)!important}
  body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-inner{
    top:95px!important;left:26px!important;width:min(430px,42vw)!important;
  }
  body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-title{font-size:44px!important}
  body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-sub{font-size:19px!important}
  body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-fact{font-size:10px!important}
  body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-scene strong{font-size:11px!important}
}
/* Smartphone: readable text in upper sky; hotspot controls in two rows, while
   the wide panorama is intentionally centre-cropped. A mobile sheet avoids
   covering unrelated landmarks with an incorrectly placed desktop popup. */
@media(max-width:767px){
  body.v5-site .hero-v3:has(#hero-hotspot-detail){height:720px!important;min-height:720px!important}
  body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-overview{
    background-size:auto 100%!important;background-position:center center!important;
  }
  body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-scrim{
    background:
     linear-gradient(180deg,rgba(249,251,255,.98) 0%,rgba(249,251,255,.91) 33%,rgba(249,251,255,.12) 62%,rgba(240,245,255,.73) 100%),
     linear-gradient(90deg,rgba(248,250,255,.28),transparent 30%);
  }
  body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-inner{
    left:20px!important;right:20px!important;top:calc(var(--nav-h) + 43px)!important;
    width:auto!important;max-width:none!important;
  }
  body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-title{font-size:clamp(35px,9.7vw,44px)!important}
  body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-sub{
    font-size:19px!important;max-width:350px;line-height:1.42;
  }
  body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-fact,
  body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-fact.reveal{
    font-size:10.5px!important;line-height:1.55;margin-top:13px!important;
  }
  body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-scene-nav{
    position:absolute!important;left:12px!important;right:12px!important;
    top:auto!important;bottom:40px!important;
    width:auto!important;height:auto!important;
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:minmax(44px,auto);gap:8px!important;
  }
  body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-scene{
    position:static!important;transform:none!important;
    width:100%!important;max-width:100%;
    min-height:44px!important;padding:9px 12px!important;
    border-radius:8px!important;justify-content:flex-start;
  }
  body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-scene strong{font-size:12px!important}
  body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-hotspot-detail{
    left:14px!important;right:14px!important;
    top:auto!important;bottom:150px!important;
    width:auto!important;max-width:none!important;
  }
  body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-motion{
    bottom:calc(100% + 10px);right:0;
  }
}
@media(prefers-reduced-motion:reduce){
  body.v5-site .hero-v3:has(#hero-hotspot-detail) .hero-overview{animation:none!important}
}