/* PRBE MOTION LAYER — styles for the GPU ripple, the wave band and the
   scroll reveals. Every rule here is additive: with motion.js absent or
   WebGL unavailable the page renders exactly as it did before. */

.prb-ripple{position:absolute;top:0;left:0;z-index:1;pointer-events:none;
  display:block;will-change:transform}

/* wave band — a real canvas, sized by its host */
.prb-wave{position:relative;width:100%;height:118px;overflow:hidden;
  display:block;pointer-events:none}
.prb-wave canvas.prb-wavecv{position:absolute;inset:0;width:100%;height:100%;display:block}
.prb-wave.tall{height:160px}
.prb-wave.onnavy{background:transparent}

/* staggered scroll reveal — motion, not a dissolve */
.mrev{opacity:0;transform:translate3d(0,34px,0) scale(.985);
  transition:opacity .72s cubic-bezier(.16,.84,.28,1),
             transform .72s cubic-bezier(.16,.84,.28,1)}
.mrev.on{opacity:1;transform:none}
.mrev.left{transform:translate3d(-30px,14px,0)}
.mrev.right{transform:translate3d(30px,14px,0)}
.mrev.left.on,.mrev.right.on{transform:none}

/* velocity skew + parallax hosts get GPU hints only */
[data-skew],[data-par]{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .prb-ripple,.prb-wave{display:none}
  .mrev{opacity:1;transform:none;transition:none}
  [data-skew],[data-par]{transform:none!important;will-change:auto}
}

/* ---- PER-ITEM MOTION (the fix for "absolutely dead") -----------------------
   Every content leaf gets its own entrance, alternating side to side, with an
   index delay set in JS. Real movement — travel + lift + settle — not a fade.
   A fade alone is what read as dead; the eye needs displacement to register
   that something arrived. */
.mitem{
  opacity:0;
  transform:translate3d(-26px,30px,0) scale(.97);
  transition:opacity .74s cubic-bezier(.16,.86,.26,1),
             transform .82s cubic-bezier(.16,.86,.26,1);
  will-change:transform,opacity;
}
.mitem.alt{ transform:translate3d(26px,30px,0) scale(.97); }
.mitem.on{ opacity:1; transform:none; }

/* the heavier blocks travel further so the arrival is unmistakable */
a.card.mitem,.sort.mitem,.optin.mitem,.paper.mitem,.box.mitem{
  transform:translate3d(-38px,42px,0) scale(.965);
}
a.card.mitem.alt,.sort.mitem.alt,.optin.mitem.alt,.paper.mitem.alt,.box.mitem.alt{
  transform:translate3d(38px,42px,0) scale(.965);
}
a.card.mitem.on,.sort.mitem.on,.optin.mitem.on,.paper.mitem.on,.box.mitem.on{ transform:none; }

/* list rows cascade in from the side they sit on */
li.mitem,.lane.mitem{ transform:translate3d(-22px,16px,0); }
li.mitem.on,.lane.mitem.on{ transform:none; }

/* headings rise, they do not slide */
h2.mitem,h3.mitem,h4.mitem{ transform:translate3d(0,26px,0); }
h2.mitem.on,h3.mitem.on,h4.mitem.on{ transform:none; }

@media (prefers-reduced-motion:reduce){
  .mitem{opacity:1!important;transform:none!important;transition:none;will-change:auto}
}