/* ============================================================================
   Landing page — motion (see landing-motion.js).

   Rising uses the `translate` property and hovering uses `transform`, so the
   two never fight: a card can finish rising and still lift under the cursor,
   and the rise's stagger delay never slows the hover.
   ========================================================================== */
html.lm-js{scroll-behavior:auto}

/* ------------------------------------------------------------ rising in */
html.lm-full .lm{
  opacity:0;translate:0 48px;
  transition:
    opacity 1s cubic-bezier(.2,.7,.2,1) var(--lm-d,0ms),
    translate 1.15s cubic-bezier(.16,1,.3,1) var(--lm-d,0ms),
    transform .7s cubic-bezier(.4,0,.2,1),
    box-shadow .7s cubic-bezier(.4,0,.2,1);
}
html.lm-full .lm.lm-in{opacity:1;translate:0 0}

/* the device asked for less motion: a fade where it stands */
html.lm-soft .lm{opacity:0;transition:opacity .9s ease var(--lm-d,0ms),transform .7s cubic-bezier(.4,0,.2,1),box-shadow .7s cubic-bezier(.4,0,.2,1)}
html.lm-soft .lm.lm-in{opacity:1}

/* ------------------------------------------------------------- hovering
   Everything that lifts under the cursor lifts the same way: slowly, easing
   in and out, straight up -- no snap and no scale (a scale reads as a zoom).
   :where() keeps these rules light, so a card that is also rising in keeps
   the fuller transition list above. */
html.lm-js :where(.newcard,.read,.piece,.qi-panel,.qi-audit,.qi-steps > li,.world-card,.who-card,.price-card,.mini,.tell,
  .pnode,.person-node,.float-card,.sw,.duo article,.btn3){
  transition:transform .7s cubic-bezier(.4,0,.2,1),box-shadow .7s cubic-bezier(.4,0,.2,1),
    background-color .5s ease,border-color .5s ease,filter .5s ease;
}
html.lm-full :where(.newcard,.read,.piece,.qi-panel,.qi-audit,.qi-steps > li,.world-card,.who-card,.price-card,.mini,.tell,
  .float-card,.duo article):hover{
  transform:translateY(-6px);
  box-shadow:0 2px 6px rgba(20,40,70,.06),0 34px 70px -30px rgba(20,40,70,.34);
}
html.lm-full :where(.pnode,.person-node,.sw):hover{transform:translateY(-4px)}
html.lm-full :where(.btn3):hover{transform:translateY(-2px)}
/* less motion asked for: the same gentle lift, smaller */
html.lm-soft :where(.newcard,.read,.piece,.qi-panel,.qi-audit,.qi-steps > li,.world-card,.who-card,.price-card,.mini,.tell,
  .float-card,.duo article):hover{
  transform:translateY(-3px);
  box-shadow:0 2px 6px rgba(20,40,70,.06),0 30px 60px -32px rgba(20,40,70,.3);
}
html.lm-soft :where(.pnode,.person-node,.sw):hover{transform:translateY(-2px)}
html.lm-soft :where(.btn3):hover{transform:translateY(-1px)}
html.lm-full :where(.newcard,.read,.piece,.qi-panel,.qi-audit,.qi-steps > li,.world-card,.who-card,.price-card,.mini,.tell,.float-card,.duo article){
  will-change:transform;
}

/* ------------------------------------------------- the Engine, sideways */
.lm-strip{position:relative}
.lm-strip-foot{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px;
  font-size:13px;font-weight:600;color:var(--ink-faint,#8494AD)}
.lm-strip-bar{position:relative;width:160px;height:4px;border-radius:99px;background:rgba(20,40,70,.1);overflow:hidden}
.lm-strip-bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;
  background:linear-gradient(90deg,#00A9A8,#0E67B3)}

/* pinned on a laptop: the section holds still, the panels travel */
#engine.lm-pin > .wrap{position:sticky;top:calc(var(--lm-head,72px) + 8px);
  min-height:calc(100vh - var(--lm-head,72px) - 16px);display:flex;flex-direction:column;justify-content:center}
#engine.lm-pin .sec-head{margin-bottom:clamp(22px,3vh,40px)}
#engine.lm-pin .lm-strip{overflow:visible;margin-inline:calc(50% - 50vw);padding-inline:max(24px,calc(50vw - 50%))}
#engine.lm-pin .lm-strip{overflow-x:clip}
#engine.lm-pin .engine-grid{display:flex;flex-wrap:nowrap;gap:24px;width:max-content;align-items:stretch;will-change:transform}
#engine.lm-pin .piece{flex:0 0 clamp(330px,26vw,400px)}
#engine.lm-pin .piece:last-child{margin-right:max(24px,calc(50vw - 50%))}

/* everywhere else: a strip to swipe or scroll */
#engine.lm-swipe .engine-grid{display:flex;flex-wrap:nowrap;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding:6px 4px 18px;scrollbar-width:thin;align-items:stretch}
#engine.lm-swipe .piece{flex:0 0 min(340px,82vw);scroll-snap-align:start}