/* =========================================================
   NUMBER MOTION SYSTEM
   Lightweight, meaning-based number animation across the site.
   Uses only opacity + transform + letter-spacing for performance.
   ========================================================= */
.num-motion{
  display:inline-block;
  position:relative;
  font-variant-numeric:tabular-nums;
  transform-origin:50% 70%;
  will-change:auto;
}
.num-motion[data-num-kind="counter"]{min-width:var(--num-width,auto);text-align:inherit}

/* Numeric tokens stay readable before JS/observer activation. */
.motion-ready .num-motion:not(.is-number-visible){opacity:0}

/* 01 / 02 / 03 style indexes: mechanical pixel step. */
.num-motion.is-number-visible[data-num-kind="index"]{
  animation:numIndexIn 420ms steps(5,end) both;
  animation-delay:var(--num-delay,0ms);
}
@keyframes numIndexIn{
  0%{opacity:0;transform:translate3d(-10px,7px,0) skewX(-12deg)}
  45%{opacity:1;transform:translate3d(3px,-1px,0) skewX(5deg)}
  100%{opacity:1;transform:none}
}

/* Years: a compact ticker rather than a long count from zero. */
.num-motion.is-number-visible[data-num-kind="year"]{
  animation:numYearIn 500ms cubic-bezier(.2,.8,.2,1) both;
  animation-delay:var(--num-delay,0ms);
}
@keyframes numYearIn{
  0%{opacity:0;transform:translate3d(0,-9px,0);letter-spacing:.14em}
  58%{opacity:1;transform:translate3d(0,2px,0);letter-spacing:.035em}
  100%{opacity:1;transform:none;letter-spacing:inherit}
}

/* Live metrics and totals get a restrained count-up + settle. */
.num-motion.is-number-visible[data-num-kind="counter"]{
  animation:numCounterIn 430ms cubic-bezier(.2,.85,.2,1) both;
  animation-delay:var(--num-delay,0ms);
}
@keyframes numCounterIn{
  0%{opacity:.2;transform:translate3d(0,10px,0) scale(.9)}
  72%{opacity:1;transform:translate3d(0,-2px,0) scale(1.025)}
  100%{opacity:1;transform:none}
}

/* Ordinals such as 3rd: a tiny stamped-in motion. */
.num-motion.is-number-visible[data-num-kind="ordinal"]{
  animation:numOrdinalIn 440ms cubic-bezier(.2,.8,.2,1) both;
  animation-delay:var(--num-delay,0ms);
}
@keyframes numOrdinalIn{
  0%{opacity:0;transform:translate3d(0,8px,0) rotate(-6deg) scale(.88)}
  64%{opacity:1;transform:translate3d(0,-1px,0) rotate(2deg) scale(1.02)}
  100%{opacity:1;transform:none}
}

/* Version numbers such as V3: terminal-like pulse. */
.num-motion.is-number-visible[data-num-kind="version"]{
  animation:numVersionIn 460ms steps(4,end) both;
  animation-delay:var(--num-delay,0ms);
}
@keyframes numVersionIn{
  0%{opacity:0;transform:translate3d(6px,0,0) scaleX(.7)}
  35%{opacity:.45;transform:translate3d(-2px,0,0) scaleX(1.08)}
  70%{opacity:1;transform:translate3d(1px,0,0)}
  100%{opacity:1;transform:none}
}

/* Ambient numbers cycle through four subtle identities. */
.num-motion.is-number-visible[data-num-kind="ambient"][data-num-variant="0"]{animation:numAmbientA 420ms cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--num-delay,0ms)}
.num-motion.is-number-visible[data-num-kind="ambient"][data-num-variant="1"]{animation:numAmbientB 420ms cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--num-delay,0ms)}
.num-motion.is-number-visible[data-num-kind="ambient"][data-num-variant="2"]{animation:numAmbientC 440ms cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--num-delay,0ms)}
.num-motion.is-number-visible[data-num-kind="ambient"][data-num-variant="3"]{animation:numAmbientD 440ms cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--num-delay,0ms)}
@keyframes numAmbientA{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
@keyframes numAmbientB{from{opacity:0;transform:translate3d(-7px,0,0)}to{opacity:1;transform:none}}
@keyframes numAmbientC{from{opacity:0;transform:translate3d(7px,0,0) rotate(4deg)}to{opacity:1;transform:none}}
@keyframes numAmbientD{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}

/* Numeric exits remain quick and subordinate to the page transition. */
.view.page-motion-out .num-motion,
#home.home-motion-out .num-motion{
  animation:numMotionOut 120ms ease-in both!important;
  animation-delay:0ms!important;
}
@keyframes numMotionOut{to{opacity:0;transform:translate3d(0,-4px,0) scale(.98)}}

/* Give highlighted numeric UI a tiny hover response without moving layout. */
@media (hover:hover) and (pointer:fine){
  .capability:hover .num-motion[data-num-kind="index"],
  .path-card:hover .num-motion[data-num-kind="index"],
  .collab-item:hover .num-motion[data-num-kind="index"],
  .project:hover .num-motion[data-num-kind="index"]{
    transform:translate3d(2px,-2px,0);
    transition:transform 150ms ease-out;
  }
}

@media(prefers-reduced-motion:reduce){
  .motion-ready .num-motion,
  .num-motion.is-number-visible,
  .view.page-motion-out .num-motion,
  #home.home-motion-out .num-motion{
    opacity:1!important;
    transform:none!important;
    animation:none!important;
    transition:none!important;
    letter-spacing:inherit!important;
  }
}