:root {
    --motion-fast: 140ms;
    --motion-standard: 220ms;
    --motion-slow: 320ms;
    --motion-reveal: 680ms;
    --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

html {
    scroll-behavior: smooth;
}

html::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 12000;
    pointer-events: none;
    background: #e8890c;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
}

html.is-navigating::before {
    opacity: 1;
    transform: scaleX(0.78);
    transition: transform var(--motion-slow) var(--motion-ease-out), opacity var(--motion-fast) linear;
}

a.is-pending {
    opacity: 0.62;
}

@keyframes heroRise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

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

@keyframes heroMediaIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.985);
    }

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

.hero-section .hero-eyebrow {
    animation: heroRise 520ms 80ms var(--motion-ease-out) both;
}

.hero-section .hero-title {
    animation: heroRise 720ms 140ms var(--motion-ease-out) both;
}

.hero-section .hero-subtitle {
    animation: heroRise 620ms 220ms var(--motion-ease-out) both;
}

.hero-section .cta-buttons {
    animation: heroRise 560ms 290ms var(--motion-ease-out) both;
}

.hero-section .hero-stats {
    animation: heroRise 620ms 360ms var(--motion-ease-out) both;
}

.hero-section .hero-media {
    animation: heroMediaIn 820ms 180ms var(--motion-ease-out) both;
}

.motion-reveal {
    opacity: 1;
    transform: translateY(16px);
    transition: transform 560ms var(--motion-ease-out);
}

.motion-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.button,
.btn,
.feature-card {
    transition-property: transform, background-color, color, border-color, box-shadow, opacity;
    transition-duration: var(--motion-standard);
    transition-timing-function: var(--motion-ease-standard);
}

@media (hover: hover) and (pointer: fine) {
    .button:hover,
    .btn:hover {
        transform: translateY(-2px);
    }

    .feature-card:hover {
        transform: translateY(-4px);
    }
}

.button:active,
.btn:active {
    transform: translateY(0) scale(0.985);
}

:where(a, button, [tabindex]):focus-visible {
    outline: 3px solid rgba(232, 137, 12, 0.48) !important;
    outline-offset: 3px !important;
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }

    html::before {
        display: none;
    }

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