/* Clara motion — shared by claracareers.com and the candidate portal.

   Springs, not durations. Transitions use --m-spring (a damped spring with a
   ~1.5% overshoot) or --m-smooth (critically damped, for anything that moves
   the layout around it). /portal/motion.js rewrites both as exact CSS linear()
   spring curves; the cubic-bezier values here are the fallback for browsers
   without linear().

   Direction: one element morphs between states instead of being swapped out;
   text changes with a short blur; nothing bounces, glows or bursts. Every
   rule below is inert under prefers-reduced-motion. */

:root {
  --m-spring: cubic-bezier(.22, 1, .36, 1);
  --m-smooth: cubic-bezier(.22, 1, .36, 1);
  --m-out: cubic-bezier(.2, .7, .2, 1);
}

/* Waiting for its entrance. Only motion.js adds this class, so a page without
   JS, a crawler, or a failed script load never hides content. */
.m-pending { opacity: 0; }

/* Visually hidden text (the real value behind a rolling number). */
.m-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Button morph: [icon slot][label] ── */
.m-btn { display: inline-flex; align-items: center; justify-content: center; }
.m-btn-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 0; height: 1.1em; margin-right: 0; overflow: hidden; flex-shrink: 0;
}
.m-btn-ico.is-on { width: 1.1em; margin-right: .5em; }
.m-btn-ico svg { width: 1.1em; height: 1.1em; display: block; overflow: visible; }
.m-btn-txt { display: inline-block; min-width: 0; }  /* wraps like the plain label would */
.m-btn.is-success { background-color: #137333 !important; border-color: #137333 !important; color: #fff !important; }
.m-spin { transform-origin: 50% 50%; animation: m-rotate .75s linear infinite; }
@keyframes m-rotate { to { transform: rotate(360deg); } }

/* ── Rolling digits ── */
.m-odo { display: inline; white-space: nowrap; }
.m-odo-vis { display: inline; user-select: none; -webkit-user-select: none; }  /* copy gets the real value from .m-sr */
.m-odo-col {
  display: inline-block; position: relative; overflow: visible;
  clip-path: inset(0 -1px); max-width: 1em;
  transition: max-width .5s var(--m-smooth), opacity .3s var(--m-out);
}
.m-odo-col.is-out { max-width: 0; opacity: 0; }
.m-odo-ghost { visibility: hidden; }
.m-odo-strip {
  position: absolute; left: 0; top: 0; width: 100%;
  transition: transform .9s var(--m-spring);
}
.m-odo-strip > span { display: block; text-align: center; }

/* ── Liquid indicator (segmented controls, slot pickers, hover tracks) ── */
.m-liquid {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  pointer-events: none; z-index: 0;
  transition: opacity .2s var(--m-out);
}
.m-liquid.is-hidden { opacity: 0; }

/* ── Self-drawing check (success states) ── */
.m-check-draw path { stroke-dasharray: 24; stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .m-pending { opacity: 1 !important; }
  .m-spin { animation-duration: 2.4s; }
  .m-odo-col, .m-odo-strip, .m-liquid { transition: none !important; }
}