/* Shared motion utilities (rule 2.7, 2026-10-09 pricing-plans brief). Generic on purpose — any
   page may adopt it: link this file + jz-motion.js, add class="jzm-motion" to an ancestor, and
   mark a revealable element with [data-reveal] (optionally data-reveal-delay="0.15s").

   Content is NEVER hidden by this stylesheet alone. jz-motion.js adds .jzm-reveal only once it
   has run, so a page whose JavaScript fails or is disabled shows everything, always — the sample
   hero this pattern is drawn from hid content with CSS before its script ran, so content stayed
   invisible if JavaScript failed; this file does not repeat that defect. */
html:not(.js) [data-reveal] { opacity: 1 !important; translate: none !important; transform: none !important; }
/* /ship round 3 (test-engineer, 2026-10-09): the no-JS rule above covers [data-reveal] itself,
   but a .jzm-meter bar sits as its DESCENDANT, not on the same element, and was still starting
   from width:0 with no script running to ever fill it — content invisible with JS off, exactly
   what the comment above promises never happens. */
html:not(.js) .jzm-meter i { width: var(--jzm-w, 100%) !important; }

/* /ship round 3 (code-reviewer, 2026-10-09): the reveal moves `translate`, not `transform` —
   same as marketing-home.css's own `.jzm-reveal` ("translate keeps hover transforms free").
   A card's own hover lift (`transform: translateY(-5px)`) shares equal CSS specificity with
   `.jzm-in`'s rule and this file loads after pricingplans.css, so using `transform` here would
   silently cancel every hover lift on every revealed card for the rest of the page's life. */
.jzm-motion .jzm-reveal {
  opacity: 0;
  translate: 0 22px;
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), translate .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--jzm-d, 0s);
}
.jzm-motion .jzm-reveal.jzm-in { opacity: 1; translate: none; }

.jzm-motion .jzm-meter i { width: 0; transition: width 1.4s cubic-bezier(.2,.7,.2,1) .3s; }
.jzm-motion .jzm-reveal.jzm-in .jzm-meter i,
.jzm-motion .jzm-meter.jzm-in i { width: var(--jzm-w, 100%); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], .jzm-reveal { opacity: 1 !important; translate: none !important; transform: none !important; }
  .jzm-meter i { width: var(--jzm-w, 100%) !important; }
}