/* ---------------------------------------------------------------------------
   Shared scroll-motion primitives for polson.app.

   Rules this file plays by:
   - Only transform and opacity are animated, so nothing triggers layout.
   - Nothing is hidden unless JS is alive to reveal it (the .js-motion class is
     set by motion.js), so the site reads perfectly with JS off or broken.
   - prefers-reduced-motion turns all of it off, rather than merely shortening it.
   --------------------------------------------------------------------------- */

/* Reveal on entry ---------------------------------------------------------- */
.js-motion [data-reveal]{opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.js-motion [data-reveal].is-in{opacity:1;transform:none}
/* Children stagger themselves via an index set in JS. */
.js-motion [data-stagger] > *{opacity:0;transform:translate3d(0,20px,0);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i,0) * 70ms)}
.js-motion [data-stagger].is-in > *{opacity:1;transform:none}

/* Parallax ----------------------------------------------------------------- */
/* JS writes --pz (a -1..1 progress) and the layer moves by its own depth. */
[data-parallax]{will-change:transform;transform:translate3d(0,calc(var(--pz,0) * var(--depth,40px)),0)}

/* Scroll progress rail ----------------------------------------------------- */
.progress-rail{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;background:transparent;pointer-events:none}
.progress-rail i{display:block;height:100%;width:100%;transform:scaleX(var(--p,0));transform-origin:0 50%;
  background:var(--rail,linear-gradient(90deg,#38c5ac,#2f74c0))}

@media (prefers-reduced-motion: reduce){
  .js-motion [data-reveal],
  .js-motion [data-stagger] > *{opacity:1 !important;transform:none !important;transition:none !important}
  [data-parallax]{transform:none !important}
  .progress-rail{display:none}
}