body {
  --color-1: #A1EEFF;
  --color-2: #00BDF2;
}

li {
  --delay-step: 0.75s;
  --n-reveal-delay: 0.5s;
  --n-reveal-duration: 0.75s;
}

/* :nth-child(n+1) */

.cards-list--0 {
  counter-reset: cardnumber n-index -1;
}

.cards-list--0 li:nth-child(n+1) {
   --open: 1;
  counter-increment: n-index;
}


/* :nth-child(n+2) */

.cards-list--1 {
  counter-reset: cardnumber n-index -1;
}

.cards-list--1 li:nth-child(n+2) {
   --open: 1;
  counter-increment: n-index;
  --global-delay: -0.75s;
}


/* :nth-child(n+7) */

.cards-list--2 {
  counter-reset: cardnumber n-index -1;
}

.cards-list--2 li:nth-child(n+7) {
   --open: 1;
  counter-increment: n-index;
  --global-delay: -4.5s;
}


/* :nth-child(-n+7) */

.cards-list--3 {
  counter-reset: cardnumber n-index 7;
}

.cards-list--3 li:nth-child(-n+7) {
   --open: 1;
  counter-increment: n-index -1;

  --global-delay: 6s; 
  --delay: calc(var(--global-delay) - var(--i) * var(--delay-step));
}


/* :nth-child(-n+2) */

.cards-list--4 {
  counter-reset: cardnumber n-index 2;
}

.cards-list--4 li:nth-child(-n+2) {
   --open: 1;
  counter-increment: n-index -1;

  --global-delay: 2.5s;
  --delay: calc(var(--global-delay) - var(--i) * var(--delay-step));
}


/* :nth-child(-n+1) */

.cards-list--5 {
  counter-reset: cardnumber n-index 1;
}

.cards-list--5 li:nth-child(-n+1) {
   --open: 1;
  counter-increment: n-index -1;

  --global-delay: 1.5s;
  --delay: calc(var(--global-delay) - var(--i) * var(--delay-step));
}


/*
Служебные настройки:

--delay-step — управляет общим шагом времени между поворотом карточек/появлением индексов
--n-reveal-delay - время от появления индекса до поворота карточки
--n-reveal-duration - сколько виден индекс после появления
--global-delay - общая задержка анимаций, по умолчанию 1 сек, для больших N можно делать отрицательной

counter-reset: cardnumber n-index 0;  — при разных значениях формулы в селекторе надо ставить 0 или -1 как начальное значение
для 2n и прочих: 0
для 2n+1 и прочих: -1
*/