.reveal {
    opacity: 0;
    transform: translateY(20px);
}

.reveal.visible {
    animation: reveal-in 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: var(--delay, 0ms);
}

@keyframes reveal-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .reveal,
    .reveal.visible,
    .surface,
    .primary-button,
    .secondary-button,
    .theme-toggle,
    .job-btn,
    .site-nav a,
    .footer-link {
        animation: none;
        transition: none;
        transform: none;
    }
}