/* =============================================================================
   motion.css — motion polish for artxdevllc.com
   =============================================================================
   Loaded LAST in <head> (after each page's inline <style>) so these rules win
   ties without needing !important.

   DESIGN RULE FOR THIS FILE: tune the *timing*, never the *choreography*.

   The pages already define their own hover behaviour (nav links lift and glow,
   cards lift and scale, buttons shift). Redefining `transition` or `:hover`
   here would silently drop whichever properties this file forgot to re-list, so
   instead we set only `transition-timing-function` and `transition-duration`.
   Those override the sub-properties while leaving each page's own
   `transition-property` (often `all`) and its :hover transforms untouched.

   The one exception is `.fade-in`, a simple, known rule that this file owns
   outright so it can add blur and a stagger.
   ========================================================================== */

:root {
    /* decelerating — fast start, soft landing. The workhorse. */
    --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
    /* gentler cousin, for small hover moves */
    --ease-out-quint: cubic-bezier(.22, 1, .36, 1);
    /* symmetrical, for things that move both ways (headers, menus, modals) */
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);

    --dur-fast: .24s;
    --dur-base: .4s;
    --dur-slow: .75s;
    --stagger-step: 70ms;
}

html {
    scroll-behavior: smooth;
}

/* -----------------------------------------------------------------------------
   1. Scroll reveals — this file owns .fade-in completely.
      Softer curve, a little blur, and a per-item stagger (--i from motion.js).
   -------------------------------------------------------------------------- */
.fade-in {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    filter: blur(6px);
    transition:
        opacity var(--dur-slow) var(--ease-out-expo),
        transform var(--dur-slow) var(--ease-out-expo),
        filter var(--dur-slow) var(--ease-out-expo);
    transition-delay: calc(var(--i, 0) * var(--stagger-step));
    will-change: opacity, transform;
}

.fade-in.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

/* Once the entrance has finished, hand the element back to the page.
   This matters because many elements are BOTH .fade-in and a card
   (e.g. class="team-card fade-in"): the shorthand above would otherwise leave
   transition-property stuck at opacity/transform/filter, so their hover
   box-shadow, background and border changes would jump instead of animate.
   Restoring `all` also releases the compositing layer we were holding. */
.fade-in.motion-done {
    transition-property: all;
    will-change: auto;
    filter: none;
}

/* -----------------------------------------------------------------------------
   2. Cards — same movement the pages already define, just a nicer curve.
      Only timing-function + duration are set, so `transition: all` survives.
   -------------------------------------------------------------------------- */
.service-card,
.stat-card,
.value-card,
.team-card,
.contact-card,
.vision-card,
.job-card,
.content-card,
.culture-card,
.project-card {
    transition-timing-function: var(--ease-out-quint);
    transition-duration: var(--dur-base);
}

/* -----------------------------------------------------------------------------
   3. Buttons — quicker than cards, so they feel responsive under the cursor
   -------------------------------------------------------------------------- */
.btn-primary,
.cta-button,
.filter-btn,
.apply-btn,
.website-link-btn,
.select-plan-btn,
.submit-btn,
.btn-small {
    transition-timing-function: var(--ease-out-quint);
    transition-duration: var(--dur-fast);
}

/* Press feedback — additive, nothing else defines :active */
.btn-primary:active,
.cta-button:active,
.filter-btn:active,
.apply-btn:active,
.select-plan-btn:active,
.submit-btn:active {
    transform: scale(.97);
    transition-duration: .08s;
}

/* Keyboard users get a visible affordance too */
.btn-primary:focus-visible,
.cta-button:focus-visible,
.filter-btn:focus-visible,
.apply-btn:focus-visible,
.submit-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   4. Nav — the pages animate transform, text-shadow and pseudo-elements here,
      so again: timing only, so every one of those keeps animating.
   -------------------------------------------------------------------------- */
.nav-links a,
.nav-links a::before,
.nav-links a::after {
    transition-timing-function: var(--ease-out-quint);
    transition-duration: var(--dur-fast);
}

header,
.header {
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--dur-base);
}

/* -----------------------------------------------------------------------------
   5. Media — video/image previews settle instead of snapping
   -------------------------------------------------------------------------- */
.project-preview video,
.project-preview img,
.team-card img,
.project-card img {
    transition-timing-function: var(--ease-out-expo);
    transition-duration: var(--dur-slow);
}

/* -----------------------------------------------------------------------------
   6. Accessibility — this file loads after the pages' own reduced-motion block,
      so it must opt out again or it would silently re-enable everything.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

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

    /* content must stay visible — never leave it blurred or offset */
    .fade-in {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}
