/*bits*/
:root {
  --b0: 0;
  --b1: 0;
  --b2: 0;
  --b3: 0;
  --b4: 0;
}
/*nth child with 1st bit flipped*/
.in-view>*:nth-child(2n) {
  --b0: 1;
}
/*nth child with 2nd bit flipped*/
.in-view>*:nth-child(4n+3),
.in-view>*:nth-child(4n) {
  --b1: 1;
}
/*nth child with 3rd bit flipped*/
.in-view>*:nth-child(8n),
.in-view>*:nth-child(8n-1),
.in-view>*:nth-child(8n-2),
.in-view>*:nth-child(8n-3) {
  --b2: 1;
}
/*nth child with 4th bit flipped*/
.in-view>*:nth-child(16n),
.in-view>*:nth-child(16n-1),
.in-view>*:nth-child(16n-2),
.in-view>*:nth-child(16n-3),
.in-view>*:nth-child(16n-4),
.in-view>*:nth-child(16n-5),
.in-view>*:nth-child(16n-6),
.in-view>*:nth-child(16n-7) {
  --b3: 1;
}
/*nth child with 5th bit flipped*/
.in-view>*:nth-child(32n),
.in-view>*:nth-child(32n-1),
.in-view>*:nth-child(32n-2),
.in-view>*:nth-child(32n-3),
.in-view>*:nth-child(32n-4),
.in-view>*:nth-child(32n-5),
.in-view>*:nth-child(32n-6),
.in-view>*:nth-child(32n-7),
.in-view>*:nth-child(32n-8),
.in-view>*:nth-child(32n-9),
.in-view>*:nth-child(32n-10),
.in-view>*:nth-child(32n-11),
.in-view>*:nth-child(32n-12),
.in-view>*:nth-child(32n-13),
.in-view>*:nth-child(32n-14),
.in-view>*:nth-child(32n-15) {
  --b4: 1;
}
.in-view>* {
    opacity: 0;
    animation: fade-in 0.5s ease-out;
    animation-fill-mode: forwards;
}
.in-view>*:nth-child(n) {
    --n: calc(var(--b0) + 2 * var(--b1) + 4 * var(--b2) + 8 * var(--b3) + 16 * var(--b4));
    animation-delay: calc(var(--n) * 0.3s);
}
.in-view>li:nth-child(n) {
    --n: calc(var(--b0) + 2 * var(--b1) + 4 * var(--b2) + 8 * var(--b3) + 16 * var(--b4));
    animation-delay: calc(var(--n) * 0.1s);
}
.in-view>a:nth-child(n) {
    --n: calc(var(--b0) + 2 * var(--b1) + 4 * var(--b2) + 8 * var(--b3) + 16 * var(--b4));
    animation-delay: calc(var(--n) * 0.1s);
}
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateX(-5vw);
    }
    to {
        opacity: 100%;
        transform: translateY(0);
    }
}