.page-enter {
    animation: page-enter 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes page-enter {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

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

:where(html.js) main > section:not(.page-enter),
:where(html.js) main section .level-card,
:where(html.js) main section .feature-box,
:where(html.js) main section .testimonial-card,
:where(html.js) main section .course-card,
:where(html.js) main section .stat-card,
:where(html.js) main section .faq-item,
:where(html.js) .form-card:not(.page-enter),
.scroll-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 650ms ease var(--reveal-delay, 0ms), transform 650ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
    .page-enter {
        animation: none;
    }

    :where(html.js) main > section:not(.page-enter),
    :where(html.js) main section .level-card,
    :where(html.js) main section .feature-box,
    :where(html.js) main section .testimonial-card,
    :where(html.js) main section .course-card,
    :where(html.js) main section .stat-card,
    :where(html.js) main section .faq-item,
    :where(html.js) .form-card:not(.page-enter),
    .scroll-reveal,
    .scroll-reveal.is-visible {
        transform: none;
        transition: opacity 250ms ease;
        will-change: auto;
    }
}