/* RQ ERP motion pass — additive only, no existing rule in app.css/pos.css
   is overridden or removed. Every animation here is guarded by
   prefers-reduced-motion at the bottom. */

@keyframes rq-fade-in-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes rq-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@keyframes rq-pulse-once {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rq-primary) 45%, transparent); }
    100% { box-shadow: 0 0 0 10px transparent; }
}

/* Entrance animation — applied by motion.js to .card and stat tiles as
   they enter, staggered with an inline --rq-delay custom property. */
.rq-fade-in {
    animation: rq-fade-in-up .45s cubic-bezier(.2, .7, .3, 1) both;
    animation-delay: var(--rq-delay, 0s);
}

/* Cards and buttons get a light, consistent hover/press feel. Clickable
   cards (quick-action tiles, table tiles) lift slightly; plain data cards
   (lists, forms) only get a soft shadow, no movement, so nothing jitters
   inside a table layout. */
.card {
    transition: box-shadow .18s ease, transform .18s ease;
}

a.card:hover,
.rq-pos-tile:hover,
.rq-table-tile:hover {
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .18);
}

.btn {
    transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
}

.btn:active {
    transform: scale(.96);
}

.rq-sidebar .nav-link {
    transition: background-color .15s ease, color .15s ease, transform .1s ease;
}

.rq-sidebar .nav-link:hover {
    transform: translateX(var(--rq-nav-hover-shift, 0));
}

[dir="rtl"] .rq-sidebar .nav-link:hover { --rq-nav-hover-shift: -3px; }
[dir="ltr"] .rq-sidebar .nav-link:hover { --rq-nav-hover-shift: 3px; }

/* A brief highlight pulse — motion.js adds/removes .rq-flash on an element
   that just changed (e.g. a cart line total, a just-completed action). */
.rq-flash {
    animation: rq-pulse-once .5s ease-out;
}

/* Bootstrap modal transitions, tuned for a touch more life without
   changing timing enough to feel sluggish. */
.modal.fade .modal-dialog {
    transition: transform .28s cubic-bezier(.34, 1.2, .64, 1), opacity .2s ease;
}

/* Loading skeleton placeholder — motion.js toggles this on async POS
   actions (product search render, checkout submit) since this is the only
   fetch()-driven UI in the app and had no loading affordance before. */
.rq-skeleton {
    position: relative;
    color: transparent !important;
    pointer-events: none;
    overflow: hidden;
    border-radius: .4rem;
    background: linear-gradient(
        90deg,
        var(--rq-border) 25%,
        color-mix(in srgb, var(--rq-border) 40%, var(--rq-surface)) 37%,
        var(--rq-border) 63%
    );
    background-size: 400% 100%;
    animation: rq-shimmer 1.3s ease infinite;
}

.rq-btn-spinner::after {
    content: "";
    display: inline-block;
    width: .85em;
    height: .85em;
    margin-inline-start: .5em;
    border: 2px solid currentColor;
    border-inline-start-color: transparent;
    border-radius: 50%;
    vertical-align: -.15em;
    animation: rq-spin .6s linear infinite;
}

@keyframes rq-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .rq-fade-in,
    .rq-flash,
    .rq-skeleton,
    .rq-btn-spinner::after {
        animation: none !important;
    }

    .card,
    .btn,
    .rq-sidebar .nav-link,
    .modal.fade .modal-dialog {
        transition: none !important;
    }
}