/* 华昇金玛 · 视觉增强模块（鼠标驱动 3D 产品橱窗 + 植保动态模块）2026-09-10 */
:root{
  --sc-green:#2E7D32; --sc-green-dark:#0f3316; --sc-gold:#F9A825;
  --sc-ink:#18241d; --sc-muted:#5f7064; --sc-line:#dfe9e2;
}

/* ===== 通用：滚动进场 ===== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ===== A. 鼠标驱动 3D 产品橱窗 ===== */
.sc3d{padding:60px 0 34px;background:
  radial-gradient(900px 360px at 50% 0%,rgba(46,125,50,.13),transparent 70%),
  linear-gradient(180deg,#f4f9f5 0%,#ffffff 62%);overflow:hidden}
.sc3d-head{text-align:center;max-width:880px;margin:0 auto 8px}
.sc3d-head .kick{font-size:13px;letter-spacing:2px;color:var(--sc-green);font-weight:800}
.sc3d-head h2{font-size:clamp(27px,3.8vw,42px);color:var(--sc-green-dark);line-height:1.15;margin:10px 0 12px}
.sc3d-head p{color:var(--sc-muted);font-size:16px}

.sc3d-stage{position:relative;margin-top:26px;height:400px;perspective:1500px;perspective-origin:50% 42%;cursor:pointer}
.sc3d-track{position:absolute;left:0;top:0;width:max-content;height:100%;transform-style:preserve-3d;display:flex;align-items:center;gap:6px;transition:transform .5s cubic-bezier(.22,.8,.25,1)}
.sc3d-prod{position:relative;width:150px;height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  transform-style:preserve-3d;transition:transform .38s cubic-bezier(.22,.8,.25,1),opacity .38s ease,filter .38s ease;will-change:transform}
.sc3d-prod img{width:100%;max-height:230px;object-fit:contain;pointer-events:none;
  filter:drop-shadow(0 16px 20px rgba(11,45,20,.22));
  -webkit-box-reflect:below 1px linear-gradient(transparent 64%,rgba(255,255,255,.28))}
.sc3d-prod .tag{margin-top:14px;font-size:13px;color:var(--sc-muted);opacity:0;transform:translateY(6px);transition:.3s}
.sc3d-prod.hot .tag{opacity:1;transform:none;font-weight:800;color:var(--sc-green-dark)}
.sc3d-prod.hot img{filter:drop-shadow(0 28px 34px rgba(11,45,20,.42))}
.sc3d-prod::after{content:"";position:absolute;left:50%;bottom:44px;width:120px;height:18px;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(11,45,20,.28),transparent 70%);opacity:0;transition:.35s}
.sc3d-prod.hot::after{opacity:1;bottom:34px;width:150px}

.sc3d-caption{text-align:center;margin-top:6px;min-height:86px}
.sc3d-caption .name{font-size:clamp(22px,3.2vw,34px);font-weight:850;color:var(--sc-green-dark);transition:opacity .28s,transform .28s}
.sc3d-caption .desc{color:var(--sc-muted);font-size:15px;margin-top:4px;max-width:620px;margin-left:auto;margin-right:auto;transition:opacity .28s,transform .28s}
.sc3d-caption .go{display:inline-block;margin-top:10px;font-size:13px;color:var(--sc-green);border:1px solid var(--sc-line);
  background:#fff;border-radius:999px;padding:6px 14px;transition:.25s}
.sc3d-caption .go:hover{background:var(--sc-green);color:#fff;border-color:var(--sc-green)}
.sc3d-caption.swap .name,.sc3d-caption.swap .desc{opacity:0;transform:translateY(8px)}

.sc3d-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:6px}
.sc3d-dots button{border:1px solid var(--sc-line);background:#fff;border-radius:999px;padding:6px 12px;font-size:13px;color:var(--sc-muted);cursor:pointer;transition:.2s}
.sc3d-dots button:hover{border-color:var(--sc-green);color:var(--sc-green)}
.sc3d-dots button.on{background:var(--sc-green);border-color:var(--sc-green);color:#fff}

/* ===== B. 植保动态模块 ===== */
.zb{padding:70px 0;background:linear-gradient(160deg,#0f2d19 0%,#14431f 55%,#0b2412 100%);color:#fff;position:relative;overflow:hidden}
.zb::before{content:"";position:absolute;inset:0;background-image:var(--zb-bg,none);background-size:cover;background-position:center;opacity:.14;filter:blur(2px)}
.zb::after{content:"";position:absolute;width:520px;height:520px;right:-160px;top:-160px;border-radius:50%;
  background:radial-gradient(circle,rgba(249,168,37,.22),transparent 65%);filter:blur(10px)}
.zb .wrap{position:relative;z-index:2}
.zb-head{text-align:center;max-width:820px;margin:0 auto 34px}
.zb-head .kick{font-size:13px;letter-spacing:2px;color:#8fd6a0;font-weight:800}
.zb-head h2{font-size:clamp(28px,4vw,42px);line-height:1.15;margin:10px 0 12px}
.zb-head p{color:rgba(255,255,255,.7)}

.zb-grid{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start}
.zb-list{display:flex;flex-direction:column;gap:10px}
.zb-list button{display:flex;align-items:center;gap:12px;text-align:left;padding:13px 16px;border-radius:14px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;
  font-size:15px;transition:.25s;backdrop-filter:blur(6px)}
.zb-list button:hover{background:rgba(255,255,255,.12);transform:translateX(4px)}
.zb-list button.on{background:linear-gradient(90deg,var(--sc-gold),#f6c95a);color:#171100;border-color:transparent;font-weight:800}
.zb-list .ico{font-size:20px}

.zb-panel{position:relative;min-height:330px;perspective:1200px}
.zb-card{position:absolute;inset:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:20px;padding:26px 28px;backdrop-filter:blur(10px);transform-style:preserve-3d;
  opacity:0;transform:rotateY(-24deg) translateZ(-60px);transition:opacity .5s,transform .6s;pointer-events:none}
.zb-card.on{opacity:1;transform:none;pointer-events:auto}
.zb-card h3{font-size:24px;margin-bottom:6px;color:#fff}
.zb-card .why{color:#8fd6a0;font-size:14px;margin-bottom:16px}
.zb-card ol{margin-left:18px;line-height:1.95;color:rgba(255,255,255,.88)}
.zb-card .pd{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.zb-card .pd span{background:rgba(249,168,37,.16);border:1px solid rgba(249,168,37,.4);color:#ffd980;border-radius:999px;padding:6px 12px;font-size:13px}

.zb-flow{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:26px;flex-wrap:wrap}
.zb-flow .step{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.75);font-size:13px}
.zb-flow .dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:zbPulse 2s infinite}
.zb-flow .step:nth-child(3) .dot{animation-delay:.5s}
.zb-flow .step:nth-child(5) .dot{animation-delay:1s}
@keyframes zbPulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}70%{box-shadow:0 0 0 12px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.zb-flow .line{width:44px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,.05))}

@media(max-width:900px){
  .sc3d-stage{height:340px}
  .sc3d-prod{width:120px;height:280px}
  .zb-grid{grid-template-columns:1fr}
  .zb-list{flex-direction:row;overflow-x:auto}
  .zb-list button{white-space:nowrap}
}