html {
    scroll-behavior: smooth;
}

body {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.88));
}

.grid-faint {
    background-image: linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
    background-size: 30px 30px;
}

section,
article,
aside {
    will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
    main section {
        animation: rise 0.7s ease both;
    }

    main section:nth-of-type(2) {
        animation-delay: 0.08s;
    }

    main section:nth-of-type(3) {
        animation-delay: 0.16s;
    }

    main section:nth-of-type(4) {
        animation-delay: 0.24s;
    }
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}