@keyframes enter-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes enter-rise { from { transform: translateY(26px); } to { transform: none; } }
@keyframes enter-rise-sm { from { transform: translateY(10px); } to { transform: none; } }

.enter {
    --i: 0;
    animation: enter-fade .2s var(--ease-out-quart) both, enter-rise .4s var(--ease-out-cubic) both;
    animation-delay: calc(160ms * var(--i) / (var(--i) + 5));
}
.stagger > .enter:nth-child(1) { animation-delay: 0ms; }
.stagger > .enter:nth-child(2) { animation-delay: 27ms; }
.stagger > .enter:nth-child(3) { animation-delay: 46ms; }
.stagger > .enter:nth-child(4) { animation-delay: 60ms; }
.stagger > .enter:nth-child(5) { animation-delay: 71ms; }
.stagger > .enter:nth-child(6) { animation-delay: 80ms; }
.stagger > .enter:nth-child(7) { animation-delay: 87ms; }
.stagger > .enter:nth-child(8) { animation-delay: 93ms; }
.stagger > .enter:nth-child(9) { animation-delay: 99ms; }
.stagger > .enter:nth-child(10) { animation-delay: 103ms; }
.stagger > .enter:nth-child(11) { animation-delay: 107ms; }
.stagger > .enter:nth-child(12) { animation-delay: 110ms; }

.page-in { animation: enter-fade .2s var(--ease-out-quart) both; }

.rows-enter > * { animation: enter-fade .2s var(--ease-out-quart) both, enter-rise-sm .3s var(--ease-out-cubic) both; }
.rows-enter > :nth-child(2) { animation-delay: calc(var(--stagger-row) * 1); }
.rows-enter > :nth-child(3) { animation-delay: calc(var(--stagger-row) * 2); }
.rows-enter > :nth-child(4) { animation-delay: calc(var(--stagger-row) * 3); }
.rows-enter > :nth-child(5) { animation-delay: calc(var(--stagger-row) * 4); }
.rows-enter > :nth-child(6) { animation-delay: calc(var(--stagger-row) * 5); }
.rows-enter > :nth-child(7) { animation-delay: calc(var(--stagger-row) * 6); }
.rows-enter > :nth-child(8) { animation-delay: calc(var(--stagger-row) * 7); }
.rows-enter > :nth-child(9) { animation-delay: calc(var(--stagger-row) * 8); }
.rows-enter > :nth-child(10) { animation-delay: calc(var(--stagger-row) * 9); }
.rows-enter > :nth-child(11) { animation-delay: calc(var(--stagger-row) * 10); }
.rows-enter > :nth-child(12) { animation-delay: calc(var(--stagger-row) * 11); }
.rows-enter > :nth-child(13) { animation-delay: calc(var(--stagger-row) * 12); }
.rows-enter > :nth-child(14) { animation-delay: calc(var(--stagger-row) * 13); }
.rows-enter > :nth-child(15) { animation-delay: calc(var(--stagger-row) * 14); }
.rows-enter > :nth-child(16) { animation-delay: calc(var(--stagger-row) * 15); }
.rows-enter > :nth-child(17) { animation-delay: calc(var(--stagger-row) * 16); }
.rows-enter > :nth-child(18) { animation-delay: calc(var(--stagger-row) * 17); }
.rows-enter > :nth-child(19) { animation-delay: calc(var(--stagger-row) * 18); }
.rows-enter > :nth-child(20) { animation-delay: calc(var(--stagger-row) * 19); }
.rows-enter > :nth-child(n+21) { animation-delay: calc(var(--stagger-row) * 20); }

.pop-grow { transform-origin: var(--origin, top left); animation: pop-grow var(--dur-pop) var(--ease-pop) both; }
.pop-close { transform-origin: var(--origin, top left); animation: pop-close var(--dur-close-cut) var(--ease-close) both; }
.open-scale { animation: open-scale var(--dur-open) var(--ease-pop) both; }
@keyframes open-scale { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }

* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover { scrollbar-color: var(--track-hover) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
:hover::-webkit-scrollbar-thumb { background: var(--track); }
::-webkit-scrollbar-thumb:hover { background: var(--track-hover); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}