@property --percent {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
  }
  
  @property --temp {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
  }
  
  @property --v1 {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
  }
  @property --v2 {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
  }
  @property --v3 {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
  }
   
  @keyframes counter--1 {
    from {
      --percent: 0;
    }
  
    to {
      --percent: 10;
    }
  }
  
  @keyframes counter--2 {
    from {
      --percent: 0;
    }
  
    to {
      --percent: 2;
    }
  }
  
  @keyframes counter--3 {
    from {
      --percent: 0;
    }
  
    to {
      --percent: 10000;
    }
  }
  .number {
    color: inherit;
    --temp: calc(var(--percent));
    --v1: max(var(--temp));
    --v2: max(var(--temp));
    counter-reset: v1 var(--v1) v2 var(--v2);
  
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 1.5s;
    animation-delay: 0.3s; /* small delay so page has painted */
  }

  
  .number--1 {
      animation-name: counter--1;
    }
.number--1::after,
.number--3::after {
    content: '+';
    color: inherit;
}
  
  .number--2 {
    animation-name: counter--2;
  }
  .number--1::before,
.number--2::before {
  content: counter(v1);
}



.number--3 {
    animation-name: counter--3;
    --v1: max(calc(var(--temp) / 1000), 0);
    --v2: max(calc(var(--temp) - var(--v1) * 1000), 0);
    counter-reset: v1 var(--v1) v2 var(--v2);
  }
  
  .number--3::before {
    content: counter(v1) "," counter(v2, decimal-leading-zero) "0";
  }
  .number--3::before {
    content: counter(v1) ",000";
  }

  /* .growing {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    animation: typewriter 1s ease-out forwards;
    animation-delay: 0.5s;
  }
  
  @keyframes typewriter {
    to { width: 7ch; }
  }  */

  .growing {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: fade-up 0.8s ease-out forwards;
    animation-delay: 0.5s;
  }
  
  @keyframes fade-up {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }