/*
  Motion: one timing, one style.
  Reveal = fade + slight rise. Nothing else moves for decoration.
*/

.reveal {
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity var(--duration) var(--ease),
        transform var(--duration) var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

.fullscreen-menu {
    transition: clip-path .5s var(--ease) !important;
}

.button,
.nav-link,
.project-row,
.text-link,
.menu-button span,
.site-header {
    transition:
        color var(--duration) var(--ease),
        background-color var(--duration) var(--ease),
        border-color var(--duration) var(--ease),
        opacity var(--duration) var(--ease) !important;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

body.menu-open {
    overflow: hidden;
}