body {
  --color-1: #EED677;
  --color-2: #D9AB36;
}

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


/* :nth-child(n) */

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

.cards-list--0 li:nth-child(n) {
   --open: 1;
  counter-increment: n-index;
  
  --delay-step: 0.55s;
  --n-reveal-delay: 0.5s;
  --n-reveal-duration: 0.75s;
}


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

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

.cards-list--1 li:nth-child(2n),
.cards-list--3 li:nth-child(2n) {
   --open: 1;
  counter-increment: n-index;
}


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

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

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


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

--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
*/