/* A11Y / Motion sickness */
@media (prefers-reduced-motion: reduce) {
  .key-figure-value {
    display: block;
    visibility: visible;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .key-figure-value {
    display: none;
    visibility: hidden;
  }

  @property --c {
    syntax: "<integer>";
    initial-value: 0;
    inherits: true;
  }

  @property --counter-data {
    syntax: "<integer>";
    initial-value: 100;
    inherits: true;
  }

  @keyframes timer {
    from { --c: 0; }
    to { --c: var(--counter-data); }
  }

  .key-figure::after {
    content: var(--counter-data-suffix);
  }

  .key-figure-animation::before {
    content: var(--counter-data-prefix);
  }

  .key-figure-animation::after {
    animation: timer linear forwards;
    animation-timeline: view();
    animation-range: contain 0% contain 25%;
    counter-reset: count var(--c);
    content: counter(count);
  }
}