/* PHAXIS scroll motion — case pages.
   Hidden states apply only under html.mx (set by motion.js), so no-JS and reduced-motion users see everything. */
:root{
  --mx-ease:cubic-bezier(0.16,1,0.3,1);
  --mx-ease-io:cubic-bezier(0.65,0,0.35,1);
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* 1 · headings: each line slides up out of its own mask */
.mx .mx-ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.mx .mx-lni{display:block;transform:translate3d(0,110%,0);transition:transform 1.1s var(--mx-ease);transition-delay:calc(var(--i,0) * 90ms + var(--d,0ms))}
.mx .mx-in .mx-lni{transform:none}

/* 2 · text blocks: soft rise */
.mx .mx-up{opacity:0;transform:translate3d(0,28px,0);transition:opacity .9s var(--mx-ease),transform 1s var(--mx-ease);transition-delay:var(--d,0ms)}
.mx .mx-up.mx-in{opacity:1;transform:none}

/* 3 · media: curtain opens from the top down. The picture itself never moves or zooms: it stays exactly in its frame. */
.mx .mx-fig{clip-path:inset(0 0 100% 0 round var(--mx-r,20px));transition:clip-path 1.3s var(--mx-ease-io);transition-delay:var(--d,0ms)}
.mx .mx-fig.mx-in{clip-path:inset(0 0 0 0 round var(--mx-r,20px))}

@media (prefers-reduced-motion:reduce){
  .mx .mx-lni,.mx .mx-up,.mx .mx-fig{transition:none!important;transform:none!important;opacity:1!important;clip-path:none!important}
}