@media (prefers-reduced-motion: no-preference) {
    .hero,
    .rule,
    .socials { animation: rs-fade-in 550ms ease both; }
    .rule { animation-delay: 70ms; }
    .socials { animation-delay: 120ms; }

    .portfolio.is-revealed .portfolio-item {
        animation: rs-item-in 520ms cubic-bezier(.2, .72, .25, 1) both;
        animation-delay: calc(min(var(--row-index, 0), 16) * 90ms);
    }
}
@keyframes rs-fade-in { from { opacity: 0; transform: translateY(5px); } }
@keyframes rs-item-in {
    from {
        opacity: 0;
        transform: translate3d(var(--item-x, 0), calc(var(--item-y, 0) + 8px), 0);
    }
    to {
        opacity: 1;
        transform: translate3d(var(--item-x, 0), var(--item-y, 0), 0);
    }
}