/* ==========================================================================
   COSMOSKIN — account motion
   Panel enter only. The number roll-up is driven from account-motion.js
   because it animates text content, which CSS cannot interpolate.
   ========================================================================== */

/* A short rise as a panel takes over, staggered across its first few blocks so
   the eye is led down the page instead of the whole slab appearing at once.
   Transform and opacity only — the account layout must not reflow. */
.account-page .cs-panel-enter > * {
  animation: csAccountPanelEnter 380ms cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: var(--cs-enter-delay, 0ms);
}

@keyframes csAccountPanelEnter {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Figures mid-roll must not reflow the tile they sit in as digits are added. */
.account-page .cs-stat strong[data-cs-counting],
.account-page .cs-club-mini__points b[data-cs-counting],
.account-page .cs-profile-meter__spend span[data-cs-counting] {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

@media (prefers-reduced-motion: reduce) {
  .account-page .cs-panel-enter > * {
    animation: none;
  }
}