/* Shared motion layer. Subtle and formal: opacity + transform only (cheap on the GPU), no big blurs or shadows, one soft settle at most,
   everything off under prefers-reduced-motion. Components opt in with data-mo / data-mo-stagger / .mo-seg / [data-count] / .mo-bar / .mo-flash / .mo-skel. */
:root { --mo-ease: cubic-bezier(.22,.8,.3,1); --mo-fast: .18s; --mo-base: .32s; }

/* reveal on scroll (only hides things once motion.js is running, so nothing is ever invisible without JS) */
.mo-ready [data-mo]:not(.mo-in), .mo-ready [data-mo-stagger] > *:not(.mo-in) { opacity:0; transform:translateY(10px); }
.mo-ready [data-mo].mo-in, .mo-ready [data-mo-stagger] > .mo-in { opacity:1; transform:none; transition:opacity var(--mo-base) var(--mo-ease), transform var(--mo-base) var(--mo-ease); transition-delay:calc(var(--mo-i, 0) * 45ms); }

/* a freshly shown / added block */
@keyframes mo-rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes mo-fade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@keyframes mo-pop { 0% { opacity:0; transform:scale(.96); } 70% { opacity:1; transform:scale(1.01); } 100% { transform:none; } }
.mo-enter { animation:mo-rise var(--mo-base) var(--mo-ease) both; }
.mo-swap { animation:mo-fade .28s var(--mo-ease) both; }   /* restarts every time display flips from none, e.g. monthly <-> yearly prices */
.mo-pop { animation:mo-pop .34s var(--mo-ease) both; }

/* segmented control with a sliding thumb (the buttons keep working without JS: aria-pressed colours them) */
.mo-seg { position:relative; isolation:isolate; }
.mo-seg > .mo-thumb { position:absolute; z-index:-1; left:0; top:0; border-radius:inherit; background:var(--primary); pointer-events:none; transform:translate3d(var(--x,0),var(--y,0),0); width:var(--w,0); height:var(--h,0); transition:transform .32s var(--mo-ease), width .32s var(--mo-ease), height .32s var(--mo-ease), opacity .2s; opacity:0; }
.mo-seg.mo-live > .mo-thumb { opacity:1; }
.mo-seg.mo-live > button[aria-pressed="true"], .mo-seg.mo-live > a[aria-current], .mo-seg.mo-live > button.on { background:transparent !important; }
.mo-seg > button, .mo-seg > a { transition:color .2s; }

/* bars grow from the left; counters are done in JS */
@keyframes mo-grow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.mo-bar > i, .mo-bar > u { transform-origin:left center; animation:mo-grow .7s var(--mo-ease) .1s both; }

/* "saved" flash for a cell / row, and the unsaved marker */
@keyframes mo-flash { 0% { background:rgba(34,197,94,.34); } 100% { background:transparent; } }
.mo-flash { animation:mo-flash 1.1s ease-out; }
@keyframes mo-shake { 0%,100% { transform:none; } 25% { transform:translateX(-3px); } 75% { transform:translateX(3px); } }
.mo-bad { animation:mo-shake .28s ease; }

/* skeleton while loading */
@keyframes mo-shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }
.mo-skel { border-radius:10px; min-height:1em; background:linear-gradient(100deg, rgba(100,116,139,.14) 30%, rgba(100,116,139,.26) 50%, rgba(100,116,139,.14) 70%); background-size:200% 100%; animation:mo-shimmer 1.4s linear infinite; }
:root[data-theme="dark"] .mo-skel { background:linear-gradient(100deg, #0D1C42 30%, #16295C 50%, #0D1C42 70%); background-size:200% 100%; }

/* soft press / lift on interactive cards and buttons */
.mo-lift { transition:transform var(--mo-fast) var(--mo-ease), border-color var(--mo-fast); }
.mo-lift:hover { transform:translateY(-2px); }
.mo-press { transition:transform .12s ease; }
.mo-press:active { transform:scale(.975); }

/* panels that open / close (details, drawers) */
@keyframes mo-open { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
details[open] > :not(summary) { animation:mo-open .26s var(--mo-ease); }

@media (prefers-reduced-motion: reduce) {
  .mo-ready [data-mo]:not(.mo-in), .mo-ready [data-mo-stagger] > *:not(.mo-in) { opacity:1; transform:none; }
  .mo-enter, .mo-swap, .mo-pop, .mo-bar > i, .mo-bar > u, .mo-flash, .mo-bad, details[open] > :not(summary) { animation:none !important; }
  .mo-skel { animation:none; }
  .mo-seg > .mo-thumb, .mo-lift, .mo-press, .mo-ready [data-mo].mo-in { transition:none !important; }
}

/* table rows only fade (transform is unreliable on display:table-row) */
.mo-ready [data-mo-stagger] > tr:not(.mo-in) { transform:none; }
/* the plan table's prices: the sliding thumb colours the active period, the label keeps contrast */
.sub-period.mo-live button { background:transparent; }
.sub-period.mo-live button[aria-pressed="true"] { color:#fff; }
.sub-period { border-radius:99px; }
.sub-period > .mo-thumb { border-radius:99px; }