/* 1.11.54-safe — Fast rolling counters only.
 * Keeps OT Diary's existing icons, colors, active states and button motion untouched.
 * Numeric totals roll immediately when their value changes. */

:is(
  [data-otd-like-count],
  [data-otd-share-count],
  [data-otd-comment-count],
  [data-otd-repost-count],
  [data-otd-send-count]
){
  white-space:nowrap;
  contain:paint;
}

.otd-counter-roll{
  display:inline-block;
  position:relative;
  height:1em;
  line-height:1;
  overflow:hidden;
  vertical-align:-.06em;
  white-space:nowrap;
  transform:translateZ(0);
}
.otd-counter-roll__track{
  display:flex;
  flex-direction:column;
  width:max-content;
  min-width:100%;
  height:2em;
  line-height:1;
  transform:translate3d(0,0,0);
  will-change:transform;
  backface-visibility:hidden;
}
.otd-counter-roll__track > span{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  height:1em;
  flex:0 0 1em;
  line-height:1;
  white-space:nowrap;
  will-change:opacity,transform;
}

/* The running class is inserted in the same DOM write as the new value,
 * so there is no extra requestAnimationFrame / dead frame before motion. */
.otd-counter-roll.is-running .otd-counter-roll__track{
  animation:otd-counter-roll-up 180ms cubic-bezier(.20,.82,.22,1) both;
}
.otd-counter-roll.is-running.is-decreasing .otd-counter-roll__track{
  animation-name:otd-counter-roll-down;
}

@keyframes otd-counter-roll-up{
  0%{transform:translate3d(0,0,0)}
  72%{transform:translate3d(0,-1.035em,0)}
  100%{transform:translate3d(0,-1em,0)}
}
@keyframes otd-counter-roll-down{
  0%{transform:translate3d(0,-1em,0)}
  72%{transform:translate3d(0,.035em,0)}
  100%{transform:translate3d(0,0,0)}
}

/* Tiny hover readiness on pointer devices only. It does not change layout,
 * colors or the existing icon interaction. */
@media (hover:hover) and (pointer:fine){
  :is(button,a,[role="button"]):hover :is(
    [data-otd-like-count],
    [data-otd-share-count],
    [data-otd-comment-count],
    [data-otd-repost-count],
    [data-otd-send-count]
  ){
    transition:opacity 90ms ease-out;
    opacity:.92;
  }
}

@media (prefers-reduced-motion:reduce){
  .otd-counter-roll__track{
    animation:none!important;
    transform:none!important;
  }
}