@keyframes motion-fade-up {
    from {
        opacity: 0;
        transform: translateY(0.85rem);
    }

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

@keyframes motion-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes nav-rise {
    from {
        transform: translate(-50%, 12px);
    }

    to {
        transform: translate(-50%, 0);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .motion-hero .main-kicker {
        animation: motion-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .motion-hero .main-name {
        animation: motion-fade-up 0.62s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .motion-hero .main-role {
        animation: motion-fade-up 0.62s 0.16s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .motion-hero .main-stat:nth-child(1) {
        animation: motion-fade-up 0.58s 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .motion-hero .main-stat:nth-child(2) {
        animation: motion-fade-up 0.58s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .motion-hero .main-stat:nth-child(3) {
        animation: motion-fade-up 0.58s 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    body:not(.no-transition) .navigator {
        animation: nav-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
    }

    body:not(.no-transition) .theme-toggle {
        animation: motion-fade-in 0.42s ease 0.05s both;
    }

    .navigator-avatar {
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .navigator:hover .navigator-avatar {
        transform: scale(1.06);
    }

    .navigator-buttons a {
        transition:
            background-color 0.2s ease,
            border-color 0.2s ease,
            transform 0.22s ease;
    }

    .navigator-buttons a:hover {
        transform: translateY(-1px);
    }

    .navigator-contact {
        transition:
            filter 0.2s ease,
            transform 0.22s ease;
    }

    .navigator-contact:hover {
        transform: translateY(-1px);
    }

    .motion-reveal {
        opacity: 0;
        transform: translateY(1.35rem);
        transition:
            opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.68s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .motion-reveal.is-revealed {
        opacity: 1;
        transform: none;
    }

    .motion-reveal.is-revealed .project-card.project-card--motion {
        animation: motion-fade-up 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
        animation-delay: var(--motion-delay, 0s);
    }

    .motion-reveal.is-revealed .review-card.review-card--motion {
        animation: motion-fade-up 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
        animation-delay: var(--motion-delay, 0s);
    }

    .skill-pillar {
        transition:
            border-color 0.25s ease,
            background-color 0.25s ease,
            transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 0.35s ease;
    }

    .skill-pillar:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.1);
    }

    [data-theme="dark"] .skill-pillar:hover {
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
    }

    .review-card {
        transition:
            border-color 0.25s ease,
            background-color 0.25s ease,
            transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 0.3s ease;
    }

    .review-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
    }

    [data-theme="dark"] .review-card:hover {
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.42);
    }
}