/* =============================================================================
 * anim-3d.css — premium 3D + animation system for the Meat + Grocery POS.
 *
 * Loaded AFTER app.css so it can override transitions/shadows. Every transform
 * keyframe is wrapped in @media (prefers-reduced-motion: no-preference) — the
 * static fallback (depth-2 shadow only) is OUTSIDE that wrap.
 *
 * Selector targets match existing classes in:
 *   - resources/views/layouts/app.php   (.sidebar, .nav, .nav a, .topbar)
 *   - resources/views/pos/checkout.php  (.g-pos, .g-cat-tab, .g-act, .g-key, .g-product-card, .g-spark)
 *   - resources/views/dashboard/index.php (.metric-card, .panel)
 * Plus modal dialogs (.modal, .modal-card).
 *
 * Tier map:
 *   T1 — sidebar nav + POS category rail tabs
 *   T2 — action buttons (Hold / Recall / Discount / Void / Pending / Receipt / Payment) + .btn / .pay-button
 *   T3 — product cards (.g-product-card)
 *   T4 — keypad (.g-key)
 *   + Modal entrance, dashboard reveal, frozen-dept frost, meat-dept butcher paper
 * =========================================================================== */

/* ========== Static fallback (always applied) ================================ */
.sidebar .nav a,
.g-cat-tab,
.g-act,
.g-key,
.g-product-card,
.metric-card,
.panel,
.btn,
.pay-button,
.modal-card {
    box-shadow: var(--depth-2);
}

/* Department tint chip (border + glow) — applied even with reduced motion */
.g-product-card[data-dept="meat"]    { border-color: rgba(159, 29, 42, .35); }
.g-product-card[data-dept="pork"]    { border-color: rgba(194, 65, 12, .35); }
.g-product-card[data-dept="chicken"] { border-color: rgba(217, 119, 6, .35); }
.g-product-card[data-dept="seafood"] { border-color: rgba(  8, 145, 178, .35); }
.g-product-card[data-dept="deli"]    { border-color: rgba(161, 98, 7, .35); }
.g-product-card[data-dept="dairy"]   { border-color: rgba(250, 204, 21, .55); }
.g-product-card[data-dept="frozen"]  { border-color: rgba( 96, 165, 250, .55); background: linear-gradient(180deg, #f7fbff, #ffffff); }
.g-product-card[data-dept="bakery"]  { border-color: rgba(146, 64, 14, .35); }
.g-product-card[data-dept="produce"] { border-color: rgba( 31, 122, 77, .35); }
.g-product-card[data-dept="drygoods"]{ border-color: rgba(120, 113, 108, .35); }
.g-product-card[data-dept="beverages"]{border-color: rgba( 14, 165, 233, .35); }
.g-product-card[data-dept="snacks"]  { border-color: rgba(183, 121, 31, .35); }
.g-product-card[data-dept="household"]{ border-color: rgba(107, 114, 128, .35); }
.g-product-card[data-dept="personal_care"]{ border-color: rgba(219, 39, 119, .35); }

.g-product-card .g-card-thumb { position: relative; overflow: hidden; }

/* Ripple element (inserted by JS) — shape + color, not animation */
.g-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    mix-blend-mode: screen;
    z-index: 2;
}

/* Spark slot inside the Pay button */
.g-spark {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 3;
}
.g-spark > span {
    position: absolute;
    top: 50%; left: 50%;
    width: 8px; height: 8px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
}

/* Ensure positioning context for ripple/spark on transforming elements */
.sidebar .nav a,
.g-cat-tab,
.g-act,
.g-key,
.btn,
.pay-button,
[data-anim="ripple"] {
    position: relative;
    overflow: hidden;
}

[data-complete-sale] { overflow: visible; }   /* spark needs to escape the button */

/* ============================================================================
 * Motion-enabled rules — all wrapped in prefers-reduced-motion: no-preference.
 * ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

    /* Global perspective on parents that host 3D children */
    .sidebar { perspective: var(--perspective); }
    .nav     { perspective: var(--perspective); transform-style: preserve-3d; }
    .g-cat-rail        { perspective: var(--perspective); }
    .g-product-grid    { perspective: var(--perspective); }
    .g-actions         { perspective: var(--perspective); }
    .g-keypad          { perspective: var(--perspective); }
    .modal-actions     { perspective: var(--perspective); }
    .metric-grid, .content-grid { perspective: var(--perspective); }

    /* — KEYFRAMES ----------------------------------------------------------- */
    @keyframes slideInCascade {
        from { opacity: 0; transform: translate3d(-12px, 0, -40px) rotateY(-6deg); }
        to   { opacity: 1; transform: translate3d(0, 0, 0)         rotateY(0); }
    }
    @keyframes floatIn {
        from { opacity: 0; transform: translate3d(0, 18px, -60px) scale(.94); }
        to   { opacity: 1; transform: translate3d(0,  0,   0)     scale(1); }
    }
    @keyframes glowPulse {
        0%, 100% { box-shadow: var(--depth-2), 0 0 0 rgba(0,0,0,0); }
        50%      { box-shadow: var(--depth-3), var(--glow, var(--glow-meat)); }
    }
    @keyframes springBack {
        0%   { transform: translateY(2px) scale(.97); }
        60%  { transform: translateY(-1px) scale(1.02); }
        100% { transform: translateY(0)    scale(1); }
    }
    @keyframes modalEnter {
        from { opacity: 0; transform: translateZ(-200px) rotateX(-8deg); }
        to   { opacity: 1; transform: translateZ(0)      rotateX(0); }
    }
    @keyframes cardReveal {
        from { opacity: 0; transform: translate3d(0, 24px, -40px); }
        to   { opacity: 1; transform: translate3d(0, 0,    0); }
    }
    @keyframes ripple {
        to { transform: translate(-50%, -50%) scale(20); opacity: 0; }
    }
    @keyframes burstParticle {
        0%   { transform: translate(-50%, -50%) translate(0, 0) scale(0); opacity: 1; }
        20%  { transform: translate(-50%, -50%) translate(0, 0) scale(1); opacity: 1; }
        100% { transform: translate(-50%, -50%) translate(var(--bx), var(--by)) scale(.4); opacity: 0; }
    }
    @keyframes burstFlash {
        0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.0), var(--depth-3); }
        50%  { box-shadow: 0 0 0 16px rgba(255,255,255,.0), var(--depth-3), 0 0 36px rgba(255,255,255,.85); }
        100% { box-shadow: 0 0 0 22px rgba(255,255,255,.0), var(--depth-3); }
    }
    @keyframes frostShimmer {
        0%, 100% { background-position: -200% 0; opacity: 0; }
        45%      { opacity: .55; }
        50%      { background-position: 200% 0; opacity: .55; }
    }
    @keyframes priceGlowMeat {
        0%, 100% { text-shadow: 0 0 0 rgba(159, 29, 42, 0); }
        50%      { text-shadow: 0 0 12px rgba(159, 29, 42, .55); }
    }

    /* ============ T1 — sidebar nav + category rail tabs =================== */
    .sidebar .nav a,
    .g-cat-tab {
        transform-style: preserve-3d;
        transition:
            transform var(--d-mid)  var(--ease-spring),
            box-shadow var(--d-mid) var(--ease-out-quint),
            background-color var(--d-fast) linear,
            color var(--d-fast) linear;
        will-change: transform;
        animation: slideInCascade var(--d-slow) var(--ease-out-quint) both;
        animation-delay: calc(var(--i, 0) * var(--d-stag));
    }
    .sidebar .nav a:hover,
    .g-cat-tab:hover {
        transform: translate3d(0, -2px, var(--lift-z)) rotateX(2deg);
        box-shadow: var(--depth-3);
    }
    .sidebar .nav a:active,
    .g-cat-tab:active {
        transform: translate3d(0, 1px, 0) rotateX(0);
        box-shadow: var(--depth-press);
    }
    /* Active POS category tab gets glow pulse based on --tc (set inline in checkout.php) */
    .g-cat-tab.active {
        background: var(--tc, var(--primary));
        color: #fff;
        border-color: var(--tc, var(--primary));
        --glow: 0 0 24px color-mix(in srgb, var(--tc, var(--primary)) 65%, transparent);
        animation: glowPulse 2.4s ease-in-out infinite;
    }

    /* ============ T2 — action buttons (cart bar, modal, pay buttons) ===== */
    .g-act, .btn, .pay-button {
        transform-style: preserve-3d;
        transition:
            transform var(--d-fast) var(--ease-out-quint),
            box-shadow var(--d-fast) var(--ease-out-quint),
            filter var(--d-fast) linear;
        will-change: transform;
    }
    .g-act::before,
    .btn::before,
    .pay-button::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.10));
        transform: translateZ(-4px);
        pointer-events: none;
    }
    .g-act:hover, .btn:hover, .pay-button:hover {
        transform: translateZ(var(--lift-z)) translateY(-1px);
        box-shadow: var(--depth-3);
        filter: brightness(1.04);
    }
    .g-act:active, .btn:active, .pay-button:active {
        transform: translateZ(0) translateY(var(--press-z));
        box-shadow: var(--depth-press);
        animation: springBack 220ms var(--ease-spring);
    }

    /* Payment button — colored glow on hover, success burst on .is-bursting */
    [data-complete-sale] {
        position: relative;
    }
    [data-complete-sale]:hover {
        box-shadow: var(--depth-3), 0 0 24px rgba(180, 35, 24, .55);
    }
    [data-complete-sale].is-bursting {
        animation: burstFlash 700ms var(--ease-out-quint);
    }
    [data-complete-sale].is-bursting .g-spark > span {
        animation: burstParticle 720ms var(--ease-out-quint) forwards;
    }

    /* ============ T3 — product cards (3D mouse-tracked tilt via JS) ====== */
    .g-product-card {
        transform-style: preserve-3d;
        transition:
            transform var(--d-mid)  var(--ease-spring),
            box-shadow var(--d-mid) var(--ease-out-quint),
            border-color var(--d-mid) linear;
        will-change: transform;
        animation: floatIn 480ms var(--ease-out-quint) both;
        /* Cap the stagger index: with 100+ catalog items an uncapped
           --i × 30ms left late cards invisible for 3+ seconds. */
        animation-delay: calc(min(var(--i, 0), 20) * 30ms);
    }
    .g-product-card:hover {
        box-shadow: var(--depth-3),
                    var(--glow, var(--glow-meat));
    }
    .g-product-card[data-dept="meat"]:hover    { --glow: var(--glow-meat); }
    .g-product-card[data-dept="pork"]:hover    { --glow: var(--glow-pork); }
    .g-product-card[data-dept="chicken"]:hover { --glow: var(--glow-chicken); }
    .g-product-card[data-dept="seafood"]:hover { --glow: var(--glow-seafood); }
    .g-product-card[data-dept="deli"]:hover    { --glow: var(--glow-deli); }
    .g-product-card[data-dept="dairy"]:hover   { --glow: var(--glow-dairy); }
    .g-product-card[data-dept="frozen"]:hover  { --glow: var(--glow-frozen); }
    .g-product-card[data-dept="bakery"]:hover  { --glow: var(--glow-bakery); }
    .g-product-card[data-dept="produce"]:hover { --glow: var(--glow-produce); }
    .g-product-card[data-dept="drygoods"]:hover{ --glow: var(--glow-drygoods); }
    .g-product-card[data-dept="beverages"]:hover{--glow: var(--glow-beverages); }
    .g-product-card[data-dept="snacks"]:hover  { --glow: var(--glow-snacks); }
    .g-product-card[data-dept="household"]:hover{--glow: var(--glow-household); }
    .g-product-card[data-dept="personal_care"]:hover{--glow: var(--glow-personal_care); }

    /* Card thumbnail scale on hover (CSS-only fallback when JS tilt absent) */
    .g-product-card .g-card-thumb img,
    .g-product-card .g-card-initials {
        transition: transform var(--d-mid) var(--ease-spring);
    }
    .g-product-card:hover .g-card-thumb img,
    .g-product-card:hover .g-card-initials {
        transform: scale(1.06);
    }

    /* Frozen department frost shimmer on the thumbnail */
    .g-product-card[data-dept="frozen"] .g-card-thumb::after {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--tex-frost);
        background-size: 200% 100%;
        mix-blend-mode: screen;
        pointer-events: none;
        animation: frostShimmer 4.2s var(--ease-in-out) infinite;
    }
    /* Meat departments: subtle butcher-paper noise on the thumbnail */
    .g-product-card[data-dept="meat"]    .g-card-thumb,
    .g-product-card[data-dept="pork"]    .g-card-thumb,
    .g-product-card[data-dept="chicken"] .g-card-thumb,
    .g-product-card[data-dept="seafood"] .g-card-thumb,
    .g-product-card[data-dept="deli"]    .g-card-thumb {
        background-image: var(--tex-butcher);
        background-blend-mode: multiply;
    }

    /* Price glow on meat-department cards */
    .g-product-card[data-dept="meat"]    .g-card-price,
    .g-product-card[data-dept="pork"]    .g-card-price,
    .g-product-card[data-dept="chicken"] .g-card-price,
    .g-product-card[data-dept="seafood"] .g-card-price {
        animation: priceGlowMeat 3.6s var(--ease-in-out) infinite;
    }

    /* Out-of-stock cards stay flat — kill 3D so they read disabled */
    .g-product-card.g-oos {
        animation: floatIn 480ms var(--ease-out-quint) both;
        opacity: .55;
        filter: grayscale(35%);
    }
    .g-product-card.g-oos:hover {
        transform: none !important;
        box-shadow: var(--depth-2);
    }

    /* ============ T4 — keypad ============================================= */
    .g-key {
        transform-style: preserve-3d;
        transition:
            transform 80ms var(--ease-out-quint),
            box-shadow 80ms var(--ease-out-quint);
        will-change: transform;
    }
    .g-key:hover    { transform: translateZ(4px); }
    .g-key:active   { transform: translateY(var(--press-z)) scale(.97); box-shadow: var(--depth-press); }
    .g-key:focus-visible { animation: springBack 200ms var(--ease-spring); }

    /* ============ Modals ================================================== */
    .modal[open] .modal-card,
    .modal[open] form.modal-card {
        animation: modalEnter 320ms var(--ease-spring) both;
        transform-origin: center center;
    }
    .modal::backdrop { backdrop-filter: blur(3px); transition: backdrop-filter var(--d-mid) linear; }

    /* ============ Sidebar — slide-in on load ============================== */
    .sidebar { animation: slideInCascade 520ms var(--ease-out-quint) both; }

    /* ============ Topbar status pill — heartbeat ========================== */
    .status-pill {
        animation: glowPulse 3.2s ease-in-out infinite;
        --glow: 0 0 14px rgba(31, 122, 77, .45);
    }

    /* ============ Dashboard reveal ======================================= */
    .metric-card[data-anim="reveal"],
    .panel[data-anim="reveal"] {
        opacity: 0;
        transform: translate3d(0, 24px, -40px);
        transition: opacity var(--d-slow) var(--ease-out-quint),
                    transform var(--d-slow) var(--ease-out-quint);
        transition-delay: calc(var(--i, 0) * 80ms);
    }
    .metric-card[data-anim="reveal"].is-revealed,
    .panel[data-anim="reveal"].is-revealed {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    /* Ripple element animation */
    .g-ripple { animation: ripple 520ms var(--ease-out-quint) forwards; }

    /* ============ POS shell — subtle butcher-paper background ============= */
    .g-pos {
        background-image: var(--tex-butcher);
        background-size: 240px 240px;
        background-blend-mode: multiply;
    }

    /* ============ Sync badge breathes when offline ======================= */
    .g-sync-badge.g-sync-offline {
        animation: glowPulse 1.8s ease-in-out infinite;
        --glow: 0 0 14px rgba(180, 35, 24, .55);
        background: rgba(180, 35, 24, .12);
        color: #b42318;
    }
}

/* ============================================================================
 * Reduced-motion fallback — keep depth + tints, drop transforms + animations.
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}

/* High-contrast / low-end perf opt-out */
body[data-perf="lite"] .g-product-card,
body[data-perf="lite"] .sidebar .nav a,
body[data-perf="lite"] .g-cat-tab,
body[data-perf="lite"] .g-act,
body[data-perf="lite"] .g-key,
body[data-perf="lite"] .btn {
    animation: none !important;
    transform: none !important;
}