/* Journal (article) motion, Dr Catherine Chow. Article pages only.
   Transform and opacity only, no masks. The default CSS is the settled page:
   every hidden start state below is gated on html.jm, which journal-motion.js
   sets only when motion is allowed and IntersectionObserver exists. */

/* 1. Reading progress: the gold hairline fills by transform, a rose ink-dot rides its tip */
.jm .progress{width:100%!important;transform:scaleX(var(--jm-p,0));transform-origin:0 50%}
.jm-nib{position:absolute;left:0;bottom:-3.5px;width:7px;height:7px;border-radius:50%;background:#B5637F;
  transform:translate3d(var(--jm-x,-4px),0,0);opacity:0;transition:opacity .5s ease;pointer-events:none}
.jm-nib.on{opacity:1}

/* 3. Section headings: a fine gold rule draws beneath each as it enters view */
.prose h2{position:relative}
.prose h2::after{content:'';position:absolute;left:0;bottom:-.3em;width:72px;height:1px;background:var(--gold);
  transform-origin:0 50%}
.jm .prose h2::after{transform:scaleX(0);transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.jm .prose h2.jm-in::after{transform:scaleX(1)}

/* 4. Takeaways: one gold ink rect draws around the box, then the points rise in turn */
.box.takeaways{position:relative}
.jm-box{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.jm-box rect{fill:none;stroke:#A98443;stroke-width:1.3;stroke-opacity:.9;stroke-linecap:round}
.jm .jm-box rect{stroke-dasharray:1;stroke-dashoffset:1}
.jm .takeaways.jm-in .jm-box rect{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s cubic-bezier(.45,.05,.25,1)}
.jm .takeaways li{opacity:.6;transform:translateY(10px)}
.jm .takeaways.jm-in li{opacity:1;transform:none;
  transition:opacity .8s ease-out calc(var(--i) * 90ms + 650ms),transform .8s ease-out calc(var(--i) * 90ms + 650ms)}

/* 5. Related cards: the plates fade up in turn; the existing gentle hover lift stays (fine pointers only) */
.jm .related .post .art{opacity:0;transform:translateY(12px)}
.jm .related.jm-in .post .art{opacity:1;transform:none;
  transition:opacity .9s ease-out calc(var(--i) * 120ms),transform .9s ease-out calc(var(--i) * 120ms)}

/* light under touch: shorter travel, no sticky hover lift */
@media (pointer:coarse){
  .jm .related .post .art{transform:translateY(8px)}
  .jm .takeaways li{transform:translateY(7px)}
  .related .post:hover{transform:none;box-shadow:none}
}