/*
 * Horeka Quick OS — Navigation Progress: feedback styles
 * ---------------------------------------------------------------------------
 * The top bar styles itself (inline, from includes/nav-progress.php) so it can
 * paint before this file is fetched. What lives here is everything that only
 * matters once the page is interactive:
 *
 *   .hq-tapd            press acknowledgement, applied on pointerdown (~0ms)
 *   .hq-busy            "this button is waiting on the server" sweep
 *   .hq-ajax-overlay    the pre-existing full-screen veil, softened so it no
 *                       longer white-flashes on fast navigations
 */

/* ── Instant press feedback ────────────────────────────────────────────────
   Added on pointerdown, before any click handler or network call runs. This
   is what makes add-to-cart feel immediate even when the round-trip isn't. */
.hq-tapd {
    filter: brightness(0.94);
    transition: transform 0.09s ease-out, filter 0.09s ease-out;
}

button.hq-tapd,
.hq-tapd[role="button"],
.hq-add-cart-btn.hq-tapd,
.hqd-p-add-btn.hq-tapd,
.hq-add-main-btn.hq-tapd,
.hq-bottom-add-cart.hq-tapd,
.hqd-pdp-atc-new.hq-tapd,
.hqd-pdp-buy-now.hq-tapd {
    transform: scale(0.965);
}

/* ── Button busy state ─────────────────────────────────────────────────────
   A moving sweep so the control shows *motion* while the AJAX call is in
   flight — static "Adding..." text reads as a frozen UI. */
.hq-busy {
    position: relative;
    pointer-events: none;
    cursor: progress;
}

.hq-busy::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(100deg,
                rgba(255, 255, 255, 0) 20%,
                rgba(255, 255, 255, 0.55) 50%,
                rgba(255, 255, 255, 0) 80%);
    background-size: 220% 100%;
    animation: hq-busy-sweep 0.9s linear infinite;
}

@keyframes hq-busy-sweep {
    from { background-position: 130% 0; }
    to   { background-position: -130% 0; }
}

/* ── Soften the legacy full-screen overlay ─────────────────────────────────
   It still blocks double-taps immediately (pointer-events flip is instant),
   but the visible white-out is delayed half a second. Navigations that finish
   quickly now show only the top bar and never blank the screen; slow ones
   still get the veil + spinner. */
.hq-ajax-overlay {
    background: rgba(255, 255, 255, 0.55) !important;
    transition: opacity 0.22s ease 0.5s !important;
}

.hq-ajax-overlay:not(.active) {
    transition: opacity 0.12s ease 0s !important;
}

.hq-ajax-overlay .hq-ajax-spinner {
    opacity: 0;
    transition: opacity 0.2s ease 0.65s;
}

.hq-ajax-overlay.active .hq-ajax-spinner {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .hq-tapd { transform: none !important; }
    .hq-busy::after { animation: none; }
}

/* ── AJAX page swap: dim, don't blank ─────────────────────────────────────
   loadPageContent used to drive .hq-app-container to opacity:0 and hold the
   blank screen for 300ms before swapping. Dimming instead keeps the outgoing
   page readable through the (now much shorter) transition, so home↔PDP reads
   as a hand-off rather than a white flash. */
.hq-app-container {
    transition: opacity 0.16s ease;
}

.hq-app-container.hq-page-loading {
    opacity: 0.42;
}