@keyframes fade-up {
    from {
        opacity: 0;
        transform: translate3d(0, 24px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.js-enabled [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition:
        opacity 640ms ease,
        transform 640ms ease;
    transition-delay: var(--reveal-delay, 0ms);
}

.js-enabled [data-reveal].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.hero-copy {
    animation: fade-up 720ms ease both;
}

.hero-visual {
    animation: fade-up 720ms ease 120ms both;
}

.button,
.browser-mockup,
.metric,
.skill-card,
.focus-grid article,
.process-grid article,
.contact-methods a {
    will-change: transform;
}

.browser-mockup.is-tilting {
    transition: transform 80ms linear;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }

    .js-enabled [data-reveal] {
        opacity: 1;
        transform: none;
    }
}