/* Jompom Why Us: sticky panel with a shape-shifting 3D toy beside scrolling story points. */
.jp-why{background:var(--sky);color:var(--ink);padding:110px 0}
.jp-why .wy-head{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:end;margin-bottom:56px}
.jp-why .wy-head p{color:#2e3d48;font-size:17px;max-width:30em}
.jp-why .wy-story{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.jp-why .wy-pin{position:sticky;top:110px;height:min(560px,calc(100vh - 140px));border-radius:36px;background:var(--grad);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);overflow:hidden;display:grid;place-items:center;transition:background .6s}
.jp-why .wy-pin .scene{width:78%;perspective:900px}
.jp-why .wy-badge{position:absolute;left:20px;bottom:20px;background:var(--ink);color:#fff;font:700 15px/1 var(--jp-display);padding:12px 16px;border-radius:14px;transition:transform .5s var(--spring)}
.jp-why .wy-badge:empty{display:none}
.jp-why .wy-badge.flip{transform:rotate(-4deg) scale(1.06)}
.jp-why .wy-count{position:absolute;right:22px;top:18px;font:800 72px/1 var(--jp-display);color:rgba(255,255,255,.9);-webkit-text-stroke:3px var(--ink);paint-order:stroke}
.jp-why .wy-steps li{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:20px 0;transform-origin:left center;transition:opacity .5s,transform .7s var(--spring)}
.js-motion .jp-why .wy-steps li{opacity:.32;transform:translateX(18px) scale(.97)}
.js-motion .jp-why .wy-steps li.on{opacity:1;transform:none}
.jp-why .wy-steps h3{font-size:clamp(30px,3.6vw,50px);margin-bottom:16px}
.jp-why .wy-steps p{font-size:18px;max-width:28em;color:#2e3d48}

@media (max-width:980px){
  .jp-why .wy-head,.jp-why .wy-story{grid-template-columns:minmax(0,1fr)}
  .jp-why .wy-pin{position:relative;top:0;height:380px}
  .jp-why .wy-steps li,.js-motion .jp-why .wy-steps li{min-height:auto;opacity:1;transform:none;padding:26px 0}
}