/* Case study motion layer (shared by the older case study pages).
   Every hidden state is scoped under .cm, which case-motion.js only adds when
   motion is allowed - so without JS, or with reduced motion, nothing is hidden. */

/* the pages' own section-level fades step aside; this layer animates the pieces */
.cm .reveal { opacity: 1 !important; transform: none !important; }

/* hero: builds in on load, one piece after another */
.cm .cm-h {
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1) var(--d, 0s),
              transform .9s cubic-bezier(.2,.7,.2,1) var(--d, 0s);
}
.cm.cm-go .cm-h { opacity: 1; transform: none; }
.cm .cm-h.cm-hero-img { transform: scale(.96); transition-duration: 1.2s; }
.cm.cm-go .cm-h.cm-hero-img { transform: none; }

/* body: blocks fade up as they scroll in, siblings staggered */
.cm .cm-b {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1) var(--d, 0s),
              transform .8s cubic-bezier(.2,.7,.2,1) var(--d, 0s);
}
.cm .cm-b.cm-in { opacity: 1; transform: none; }

/* images settle (shrink-to-fit, never grow, so nothing spills over its box) */
.cm .cm-b.cm-img { transform: translateY(14px) scale(.97); transition-duration: 1s, 1.3s; }
.cm .cm-b.cm-img.cm-in { transform: none; }

/* list and grid items pop slightly */
.cm .cm-b.cm-item { transform: translateY(14px) scale(.98); }
.cm .cm-b.cm-item.cm-in { transform: none; }

/* numbers being counted keep a steady width */
.cm .cm-count { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .cm .cm-h, .cm .cm-b { opacity: 1 !important; transform: none !important; transition: none !important; }
}