/* ============================================================
   MXUber for Business — motion & micro-interaction layer
   Loaded by Modules/Crm/resources/views/for-business.blade.php
   AFTER the page's inline layout styles, so it owns all hover /
   animation behaviour. No JS: scroll reveals use CSS
   animation-timeline where supported, on-load stagger otherwise.
   Ink #0A0A0A · tile #F6F6F6 · muted #545454 · Inter.
   ============================================================ */

/* ---------- 1. hero entrance — copy staggered 0 / 100 / 200ms ---------- */
@keyframes mx-hero-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
.hero-grid > div:first-child > * {
    animation: mx-hero-in .65s cubic-bezier(.16, 1, .3, 1) backwards;
}
.hero-grid > div:first-child > :nth-child(1) { animation-delay: 0s; }
.hero-grid > div:first-child > :nth-child(2) { animation-delay: .1s; }
.hero-grid > div:first-child > :nth-child(3) { animation-delay: .2s; }
.hero-grid > div:first-child > :nth-child(4) { animation-delay: .25s; }
.hero-brands {
    animation: mx-hero-in .65s .32s cubic-bezier(.16, 1, .3, 1) backwards;
}
.hero-brands__mark { transition: color .2s ease; }
.hero-brands__mark:hover { color: #545454; }

/* ---------- 2. mock approval card — spring in from the right ---------- */
@keyframes mx-spring-in {
    from { opacity: 0; transform: translateX(56px) scale(.94); }
    to   { opacity: 1; transform: none; }
}
.mock {
    animation: mx-spring-in .3s cubic-bezier(.34, 1.56, .64, 1) .12s backwards;
    will-change: transform;
}

/* map route draws itself once the card lands (pathLength="100" normalises) */
@keyframes mx-route-draw {
    from { stroke-dashoffset: 100; }
    to   { stroke-dashoffset: 0; }
}
.mock-map__route {
    stroke-dasharray: 100;
    animation: mx-route-draw 1s .45s cubic-bezier(.16, 1, .3, 1) backwards;
}
/* origin / destination pins pop as the route reaches them */
@keyframes mx-pin-pop {
    from { opacity: 0; transform: scale(.4); }
    to   { opacity: 1; transform: none; }
}
.mock-map circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: mx-pin-pop .35s cubic-bezier(.34, 1.56, .64, 1) backwards;
}
.mock-map circle:nth-of-type(1) { animation-delay: .45s; }
.mock-map circle:nth-of-type(2) { animation-delay: 1.35s; }

/* ---------- 3. feature cards — stagger fadeIn on scroll ----------
   Chromium: scroll-driven animation-timeline (no observer, no JS).
   Others: the base rule below is the on-load staggered fallback. */
@keyframes mx-card-fade {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}
.grid .card {
    animation: mx-card-fade .55s cubic-bezier(.16, 1, .3, 1) backwards;
}
.grid .card:nth-child(2) { animation-delay: .07s; }
.grid .card:nth-child(3) { animation-delay: .14s; }
.grid .card:nth-child(4) { animation-delay: .21s; }
.grid .card:nth-child(5) { animation-delay: .28s; }
.grid .card:nth-child(6) { animation-delay: .35s; }

@supports (animation-timeline: view()) {
    /* shorthand resets the fallback delays; timeline drives progress.
       Per-column range offsets stagger cards inside each row. */
    .grid .card,
    .grid .card:nth-child(n) {
        animation: mx-card-fade .55s cubic-bezier(.16, 1, .3, 1) both;
        animation-timeline: view();
        animation-range: entry 8% entry 42%;
    }
    .grid .card:nth-child(3n + 2) { animation-range: entry 13% entry 47%; }
    .grid .card:nth-child(3n)     { animation-range: entry 18% entry 52%; }
}

/* icon tile breathes with the card hover */
.card .tile { transition: transform .22s cubic-bezier(.16, 1, .3, 1); }
.card .tile i { transition: transform .22s cubic-bezier(.16, 1, .3, 1); }
.card:hover .tile { transform: translateY(-2px); }
.card:hover .tile i { transform: scale(1.06); }

/* ---------- 4. CTA press feedback ---------- */
.btn-dark, .btn-ghost, .btn-white, .btn-line,
.mock-actions button {
    transition: transform .08s ease, background .18s ease, border-color .18s ease;
}
.btn-dark:active, .btn-ghost:active, .btn-white:active,
.btn-line:active, .mock-actions button:active {
    transform: translateY(1px);
}

/* ---------- 5. nav — smooth underline hover ---------- */
.nav-links a.link { position: relative; }
.nav-links a.link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 1.5px;
    border-radius: 2px;
    background: #0A0A0A;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s cubic-bezier(.16, 1, .3, 1);
}
.nav-links a.link:hover::after,
.nav-links a.link:focus-visible::after { transform: scaleX(1); }

/* ---------- 6. finance stat card — gentle float ---------- */
@keyframes mx-stat-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.fin-stat { animation: mx-stat-float 5s ease-in-out 1.4s infinite; }

/* ---------- 7. accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
    .hero-grid > div:first-child > *,
    .hero-brands,
    .mock,
    .mock-map__route,
    .mock-map circle,
    .grid .card,
    .fin-stat {
        animation: none;
    }
    .card .tile, .card .tile i { transition: none; }
}

/* ---------- 8. pill rounded buttons ---------- */
.btn,
.btn-dark,
.btn-ghost,
.btn-white,
.btn-line,
.btn-sm,
.mock-actions .ok,
.mock-actions .no,
.mock-actions button {
    border-radius: 9999px !important;
}