/* jishui.css — 「积水地势预警」台阶页组件样式（类名一律 jp- 前缀）
   配合 sections/jishui.html + js/products/jishui.js 使用；
   引擎与 .st-* 结构见 css/steps.css，站点基样（--line/--shadow/--text-* 等）见 css/style.css。
   入场动效约定与 shjb 一致：只在 .st-steps:not(.st-static) 下做初始隐藏，
   移动端 .st-static 退化时一切内容直接以终态呈现。 */

/* ==================== L0：落雨城市 + 低洼泛红 + iPhone ==================== */
.jp-hero { position: relative; width: 100%; height: 100%; }

.jp-scene {
  position: absolute; left: 0; bottom: 4%; width: 66%; max-width: 560px;
}
.jp-city { display: block; width: 100%; height: auto; }

/* 雨丝：JS 生成 <i>，动画只在组件激活 / 移动端退化时播放 */
.jp-rain { position: absolute; inset: -12% 0 0 0; overflow: hidden; pointer-events: none; }
.jp-rain i {
  position: absolute; top: -34px; width: 2px; height: 30px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(10,126,164,0), rgba(10,126,164,.55));
  animation-name: jp-rain-fall; animation-timing-function: linear;
  animation-iteration-count: infinite; animation-play-state: paused;
  animation-duration: 1.2s;
}
.st-steps:not(.st-static) .st-comp.active .jp-rain i,
.st-steps.st-static .jp-rain i { animation-play-state: running; }
@keyframes jp-rain-fall {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: .9; }
  85% { opacity: .9; }
  100% { transform: translateY(460px); opacity: 0; }
}

/* 低洼处红光：淡入后持续脉动 */
.jp-glow { opacity: 0; }
.st-steps:not(.st-static) .st-comp.active .jp-glow {
  animation: jp-glow-in 1.3s .9s both, jp-glow-pulse 2.8s 2.3s ease-in-out infinite;
}
.st-steps:not(.st-static) .st-comp.active .jp-glow-2 {
  animation-delay: 1.25s, 2.6s;
}
.st-steps.st-static .jp-glow { opacity: .85; }
@keyframes jp-glow-in { from { opacity: 0; } to { opacity: .85; } }
@keyframes jp-glow-pulse { 0%, 100% { opacity: .85; } 50% { opacity: .45; } }

/* 积水：从洼地底部涨起 */
.jp-water { transform: translateY(56px); }
.st-steps:not(.st-static) .st-comp.active .jp-water {
  animation: jp-water-in 2.1s 1.15s cubic-bezier(.2,.7,.3,1) both;
}
.st-steps.st-static .jp-water { transform: none; }
@keyframes jp-water-in { to { transform: none; } }

.jp-scene-tag {
  position: absolute; left: 26%; bottom: 4%;
  font-size: 12.5px; font-weight: 600; color: #c22f26;
  background: rgba(255,255,255,.92); border: 1px solid rgba(255,59,48,.25);
  border-radius: 980px; padding: 6px 13px; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(255,59,48,.14);
}
.st-steps:not(.st-static) .jp-scene-tag { opacity: 0; transform: translateY(10px); }
.st-steps:not(.st-static) .st-comp.active .jp-scene-tag {
  animation: jp-tag-in .5s 1.9s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes jp-tag-in { to { opacity: 1; transform: none; } }

/* iPhone mock（真实截图，压在最上层） */
.jp-hero-phone {
  position: absolute; right: 0; bottom: 0; z-index: 2; text-align: center;
  transform: rotate(-4deg);
  transition: opacity .5s, transform .6s cubic-bezier(.2,.9,.3,1.2);
}
.st-steps:not(.st-static) .jp-hero-phone { opacity: 0; transform: translateY(34px) rotate(-1deg); }
.st-steps:not(.st-static) .st-comp.active .jp-hero-phone { opacity: 1; transform: rotate(-4deg); transition-delay: .15s; }
.jp-phone-frame {
  width: 179px; height: 363px; /* iphone-x 外框 427×864 × scale(.42) */
  filter: drop-shadow(0 22px 44px rgba(4,42,58,.32));
}
.jp-phone-frame .marvel-device { transform: scale(.42); transform-origin: top left; }
.jp-phone-frame .screen img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: 37% 39%; /* 对准截图里的十字中心 */
}
.jp-cap {
  display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600;
  color: var(--st-cat); background: #fff; border: 1px solid var(--line);
  border-radius: 980px; padding: 7px 14px; box-shadow: var(--shadow); white-space: nowrap;
}

/* ==================== 01：CT 式高程剖面（可交互） ==================== */
.jp-ct { width: min(680px, 100%); }
.jp-ct-grid {
  display: grid; gap: 8px;
  grid-template-columns: 96px 1fr;
  grid-template-rows: 96px minmax(240px, 34svh);
  grid-template-areas: "corner ew" "ns map";
}
.jp-ct-cv { display: block; width: 100%; height: 100%; }
.jp-ct-corner {
  grid-area: corner; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
.jp-ct-zoom { font-size: 16px; font-weight: 700; color: var(--st-cat); font-variant-numeric: tabular-nums; }
.jp-ct-ylab { font-size: 11px; color: var(--text-3); margin-top: 3px; }
.jp-ct-ew {
  grid-area: ew; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); cursor: ns-resize;
}
.jp-ct-ns {
  grid-area: ns; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); cursor: ew-resize;
}
.jp-ct-mapwrap {
  grid-area: map; position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-shot);
  cursor: crosshair; touch-action: none; background: #dfe8d2;
}
.jp-ct-map { position: absolute; inset: 0; }
.jp-ct-line { position: absolute; pointer-events: none; }
.jp-ct-line-h {
  left: 0; right: 0; height: 0; top: 50%;
  border-top: 1.5px dashed rgba(10,126,164,.85);
}
.jp-ct-line-v {
  top: 0; bottom: 0; width: 0; left: 50%;
  border-left: 1.5px dashed rgba(10,126,164,.85);
}
.jp-ct-dot {
  position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; border-radius: 50%;
  background: var(--st-cat); border: 2.5px solid #fff; transform: translate(-50%, -50%);
  box-shadow: 0 2px 8px rgba(10,126,164,.5); pointer-events: none;
}
.jp-ct-chip {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -190%);
  font-size: 12px; font-weight: 700; color: var(--st-cat); font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.94); border: 1px solid var(--line);
  border-radius: 980px; padding: 4px 11px; white-space: nowrap;
  box-shadow: var(--shadow); pointer-events: none;
}
.jp-ct-note { margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--text-3); }

/* ==================== 02：风险标红 ==================== */
.jp-risk {
  width: min(660px, 100%);
  display: grid; grid-template-columns: 1fr 208px; gap: 16px; align-items: stretch;
}
.jp-risk-mapwrap {
  position: relative; overflow: hidden; min-height: 320px;
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-shot);
  background: #dfe8d2;
}
.jp-risk-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.jp-risk-heat { position: absolute; inset: 0; pointer-events: none; }
.jp-hot {
  position: absolute; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,59,48,.6), rgba(255,59,48,.18) 55%, rgba(255,59,48,0) 72%);
  opacity: 0; transition: opacity .8s ease;
}
.jp-risk.on .jp-hot { opacity: 1; animation: jp-hot-pulse 2.4s ease-in-out infinite; }
.jp-risk.on .jp-hot:nth-child(2) { animation-delay: .35s; }
.jp-risk.on .jp-hot:nth-child(3) { animation-delay: .7s; }
.jp-risk.on .jp-hot:nth-child(4) { animation-delay: 1.05s; }
.jp-risk.on .jp-hot:nth-child(5) { animation-delay: 1.4s; }
.jp-risk.on .jp-hot:nth-child(6) { animation-delay: 1.75s; }
@keyframes jp-hot-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.35); }
}
.jp-risk-toggle {
  position: absolute; top: 12px; right: 12px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--text-2); background: rgba(255,255,255,.94);
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 16px;
  cursor: pointer; box-shadow: var(--shadow);
  transition: background .25s, color .25s, border-color .25s;
}
.jp-risk.on .jp-risk-toggle {
  background: #e64545; border-color: #e64545; color: #fff;
  box-shadow: 0 8px 22px rgba(230,69,69,.4);
}
.jp-risk-side { display: flex; flex-direction: column; gap: 12px; }
.jp-risk-prof {
  flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 14px 16px;
}
.jp-risk-prof svg { display: block; width: 100%; height: auto; }
.jp-risk-pin { animation: jp-pin-pulse 1.8s ease-in-out infinite; transform-origin: 112px 62px; }
@keyframes jp-pin-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } }
.jp-risk-prof p { margin-top: 8px; font-size: 12.5px; line-height: 1.55; }
.jp-risk-prof b { display: block; font-size: 13.5px; color: #c22f26; }
.jp-risk-prof span { color: var(--text-3); }
.jp-risk-legend {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 10px 14px;
  font-size: 11.5px; color: var(--text-3); white-space: nowrap;
}
.jp-risk-bar {
  flex: 1; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, rgba(10,126,164,.25), #f5c243 55%, #ff3b30);
}
.jp-risk-note { font-size: 12px; color: var(--text-3); line-height: 1.6; text-align: center; }

/* ==================== 03：全国可搜 ==================== */
.jp-search { width: min(640px, 100%); }
.jp-search-bar {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 980px;
  padding: 13px 20px; box-shadow: var(--shadow); font-size: 16px;
}
.jp-search-ico { width: 18px; height: 18px; flex: none; color: var(--text-3); }
.jp-search-text { color: var(--text-3); font-weight: 500; }
.jp-search-text.jp-typing { color: var(--text, #1d1d1f); }
.jp-search-caret {
  width: 2px; height: 19px; border-radius: 1px; background: var(--st-cat);
  animation: jp-caret 1s steps(1) infinite;
}
@keyframes jp-caret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.jp-fly {
  position: relative; margin-top: 14px; height: 340px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-shot);
  background: #edf2ee;
}
.jp-fly-inner {
  position: absolute; left: 0; top: 0; width: 1600px; height: 1000px;
  transform-origin: 0 0;
  transition: transform 1.1s cubic-bezier(.3,.7,.2,1);
}
.jp-fly-inner svg { display: block; width: 1600px; height: 1000px; }
.jp-fly-cross { position: absolute; pointer-events: none; }
.jp-fly-cross-h {
  left: 0; right: 0; top: 50%; height: 0;
  border-top: 1.5px dashed rgba(10,126,164,.8);
}
.jp-fly-cross-v {
  top: 0; bottom: 0; left: 50%; width: 0;
  border-left: 1.5px dashed rgba(10,126,164,.8);
}
.jp-fly-cross.jp-land { animation: jp-cross-land .5s cubic-bezier(.2,.9,.3,1.2); }
@keyframes jp-cross-land {
  0% { opacity: 0; transform: scale(1.06); }
  100% { opacity: 1; transform: none; }
}
.jp-fly-marker {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%, -50%); opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.jp-fly-marker.jp-on { opacity: 1; }
.jp-fly-marker i {
  display: block; width: 15px; height: 15px; margin: 0 auto; border-radius: 50%;
  background: #ff3b30; border: 3px solid #fff;
  box-shadow: 0 3px 10px rgba(255,59,48,.5);
}
.jp-fly-marker.jp-on i { animation: jp-drop .55s cubic-bezier(.2,.9,.3,1.4) both; }
@keyframes jp-drop {
  0% { transform: translateY(-46px) scale(.6); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.jp-fly-label {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  font-size: 12.5px; font-weight: 700; color: #c22f26; white-space: nowrap;
  background: rgba(255,255,255,.95); border: 1px solid rgba(255,59,48,.25);
  border-radius: 980px; padding: 5px 12px; box-shadow: var(--shadow);
}
.jp-search-note { margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--text-3); }

/* ==================== 04：网友亲测 留言墙 ==================== */
.jp-wall { width: min(680px, 100%); }
.jp-wall-note {
  text-align: center; font-size: 12.5px; letter-spacing: .12em;
  color: var(--text-3); margin-bottom: 16px;
}
.jp-wall-grid { column-count: 2; column-gap: 14px; }
.jp-cmt {
  break-inside: avoid; margin-bottom: 14px;
  display: flex; gap: 11px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 14px 16px;
}
.st-steps:not(.st-static) .jp-cmt {
  opacity: 0; transform: translateY(26px) rotate(1.2deg);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.3,1.1);
  transition-delay: var(--jp-d, 0s);
}
.st-steps:not(.st-static) .st-comp.active .jp-cmt { opacity: 1; transform: none; }
.jp-avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 600;
}
.jp-cmt-main b { font-size: 13px; }
.jp-cmt-main p { font-size: 13.5px; line-height: 1.6; color: var(--text-2); margin-top: 3px; }
.jp-cmt-like {
  display: inline-block; margin-top: 7px;
  font-size: 12px; font-weight: 600; color: #ff2d55;
  animation: jp-like 2.6s ease-in-out infinite;
}
@keyframes jp-like { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ==================== 移动端退化（≤900px，.st-static 长页） ==================== */
@media (max-width: 900px) {
  .jp-hero { height: 380px; }
  .jp-scene { width: 100%; bottom: 0; }
  .jp-hero-phone { right: 4%; }
  .jp-phone-frame { width: 137px; height: 277px; }
  .jp-phone-frame .marvel-device { transform: scale(.32); }
  .jp-ct-grid {
    grid-template-columns: 72px 1fr;
    grid-template-rows: 76px 220px;
  }
  .jp-risk { grid-template-columns: 1fr; }
  .jp-risk-mapwrap { min-height: 260px; }
  .jp-fly { height: 240px; }
  .jp-wall-grid { column-count: 1; }
  .jp-cmt { transform: none; }
}