/* Scroll motion: element reveal, split-word headings, image unveil, progress bar, parallax hooks.
   Hidden start states apply only when JS is running (html.js-on), so content never stays invisible. */
.js-on .rv{opacity:0;transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js-on .rv-up{transform:translateY(34px)}
.js-on .rv-right{transform:translateX(40px)}
.js-on .rv-left{transform:translateX(-40px)}
.js-on .rv-scale{transform:scale(.95)}
.js-on .rv.in{opacity:1;transform:none}

/* Headings are split into words by js/ui/split-text.js and rise one after another */
.split-ready .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.split-ready .w>span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease)}
.split-ready.in .w>span{transform:none}

/* Image unveil: a clipped frame that opens while the picture settles */
.js-on .unveil{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease)}
.js-on .unveil.in{clip-path:inset(0 0 0 0)}
.unveil img{scale:1.18;transition:scale 1.8s var(--ease)}
.unveil.in img{scale:1.04}

/* Parallax: js/ui/parallax.js sets --py on elements that have data-parallax / data-parallax-img */
[data-parallax],[data-parallax-img]{translate:0 var(--py,0px);will-change:translate}
[data-parallax-img]{scale:1.14}

/* Reading progress */
.progress{position:fixed;top:0;right:0;left:0;height:3px;background:var(--clay);transform-origin:right;transform:scaleX(var(--p,0));z-index:1100;pointer-events:none}

@media (prefers-reduced-motion: reduce){
  .js-on .rv,.split-ready .w>span,.js-on .unveil{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .unveil img{scale:1!important;transition:none!important}
  [data-parallax],[data-parallax-img]{translate:none!important}
  [data-parallax-img]{scale:1!important}
}