/**
 * Design Engineering motion trial (emil-design-eng)
 *
 * Revert: delete this file and the <link> in bysk_glass_assets.blade.php.
 *
 * Rules of this layer:
 * - Animate only transform/opacity/scale/filter (GPU).
 * - Press feedback uses the independent `scale` property so it never
 *   fights layout transforms (POS FAB, Popper dropdowns, translateZ).
 * - High-frequency keys: no hover motion. Keyboard-initiated UI: no enter animation.
 * - Occasional overlays (modal / drawer / toast): short ease-out, never scale(0).
 */

:root {
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --duration-press: 140ms;
    --duration-popover: 180ms;
    --duration-modal: 220ms;
    --duration-drawer: 280ms;
}

/* —— Buttons: press, not hover-lift —— */
body.bysk-glass .btn {
    transition:
        scale var(--duration-press) var(--ease-out),
        filter var(--duration-press) ease,
        box-shadow var(--duration-press) var(--ease-out),
        background-color var(--duration-press) ease,
        border-color var(--duration-press) ease,
        color var(--duration-press) ease;
}

body.bysk-glass .btn:not(:disabled):hover {
    transform: none;
    filter: none;
}

body.bysk-glass .btn:not(:disabled):active {
    transform: none;
    scale: 0.97;
}

@media (hover: hover) and (pointer: fine) {
    body.bysk-glass .btn:not(:disabled):hover {
        filter: brightness(1.03);
    }
}

/* POS / login keypads: tapped constantly — press only, never hover */
body.bysk-glass #loginVkbPanel .login-vkb-key,
body.bysk-glass #posNumericKeyboard .btn,
body.bysk-glass #posKeyboardPanel .btn,
body.bysk-glass .pos-kb-dock__panel .btn {
    transition: scale 100ms var(--ease-out);
}

body.bysk-glass #loginVkbPanel .login-vkb-key:hover,
body.bysk-glass #posNumericKeyboard .btn:hover,
body.bysk-glass #posKeyboardPanel .btn:hover,
body.bysk-glass .pos-kb-dock__panel .btn:hover {
    filter: none;
}

body.bysk-glass #loginVkbPanel .login-vkb-key:active,
body.bysk-glass #posNumericKeyboard .btn:not(:disabled):active,
body.bysk-glass #posKeyboardPanel .btn:not(:disabled):active,
body.bysk-glass .pos-kb-dock__panel .btn:not(:disabled):active {
    scale: 0.97;
}

/* React POS cart bar / FAB (not Bootstrap .btn) */
#posPhoneCartBar button,
#posMobileCheckoutFab {
    transition: scale var(--duration-press) var(--ease-out), filter var(--duration-press) ease;
}

#posPhoneCartBar button:not(:disabled):active,
#posMobileCheckoutFab:not(:disabled):active {
    scale: 0.97;
}

/* —— Modals: scale from 0.96, center origin, under 300ms —— */
body.bysk-glass .modal.fade .modal-dialog {
    transform: scale(0.96);
    transform-origin: center center;
    transition: transform var(--duration-modal) var(--ease-out);
}

body.bysk-glass .modal.show .modal-dialog {
    transform: none;
}

body.bysk-glass .modal.fade .modal-backdrop {
    transition: opacity var(--duration-modal) var(--ease-out);
}

/* —— Offcanvas / drawers: iOS-like curve —— */
body.bysk-glass .offcanvas,
body.bysk-glass .offcanvas-backdrop {
    transition:
        transform var(--duration-drawer) var(--ease-drawer),
        opacity var(--duration-drawer) var(--ease-out);
}

/* —— Login virtual keyboard: bottom drawer (occasional) —— */
#loginVirtualKeyboard:not(.d-none) #loginVkbPanel {
    transform: translateY(0);
    transition: transform var(--duration-drawer) var(--ease-drawer);
}

#loginVirtualKeyboard:not(.d-none):not(.is-closing) #loginVkbPanel {
    @starting-style {
        transform: translateY(100%);
    }
}

#loginVirtualKeyboard.is-closing #loginVkbPanel {
    transform: translateY(100%);
}

/* —— Confirm dialog (occasional) —— */
.bysk-ui-confirm-overlay:not([hidden]) .bysk-ui-confirm-card {
    opacity: 1;
    scale: 1;
    transform-origin: center center;
    transition:
        opacity var(--duration-modal) var(--ease-out),
        scale var(--duration-modal) var(--ease-out);
}

.bysk-ui-confirm-overlay:not([hidden]) .bysk-ui-confirm-card {
    @starting-style {
        opacity: 0;
        scale: 0.96;
    }
}

.bysk-ui-confirm-overlay:not([hidden]) .bysk-ui-confirm-backdrop {
    opacity: 1;
    transition: opacity var(--duration-modal) var(--ease-out);
}

.bysk-ui-confirm-overlay:not([hidden]) .bysk-ui-confirm-backdrop {
    @starting-style {
        opacity: 0;
    }
}

/* —— Toasts: enter/exit same axis; transitions not keyframes —— */
.bysk-ui-toast-mount .bysk-ui-toast {
    animation: none;
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 240ms var(--ease-out),
        transform 240ms var(--ease-out);
}

.bysk-ui-toast-mount .bysk-ui-toast {
    @starting-style {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
}

.bysk-ui-toast-mount.is-bottom .bysk-ui-toast {
    @starting-style {
        opacity: 0;
        transform: translateY(0.5rem);
    }
}

.bysk-ui-toast-mount .bysk-ui-toast.is-leaving {
    opacity: 0;
    transform: translateY(-0.5rem);
}

.bysk-ui-toast-mount.is-bottom .bysk-ui-toast.is-leaving {
    transform: translateY(0.5rem);
}

/* —— Login submit: touch-sized, same press language —— */
body.login-vkb-page .btn-primary[type='submit'] {
    min-height: 2.75rem;
    font-weight: 700;
}

/* =========================================================
   Cashier POS — high-frequency till: press, not hover-lift
   ========================================================= */
body.pos-page .pos-products-col .pos-product-card {
    transition:
        scale var(--duration-press) var(--ease-out),
        box-shadow var(--duration-press) var(--ease-out),
        border-color var(--duration-press) ease;
}

body.pos-page .pos-products-col .pos-product-card:hover,
body.pos-page .pos-products-col .pos-product-card:active {
    transform: none;
}

body.pos-page .pos-products-col .pos-product-card:active {
    scale: 0.97;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

body.pos-page .pos-product-card .pos-product-qty-btn,
body.pos-page .pos-product-card .pos-product-add-fab,
body.pos-page #orderDetailsList .pos-order-qty-btn,
body.pos-page #posCategoryTabsWrap .nav-link,
body.pos-page .pos-seg-control__btn,
body.pos-page #itemExtrasModalOptions .pos-extra-modifier-card,
body.pos-page #posCompleteSaleBtn,
body.pos-page #posOpenAccountBtn {
    transition:
        scale 100ms var(--ease-out),
        background-color var(--duration-press) ease,
        border-color var(--duration-press) ease,
        color var(--duration-press) ease,
        box-shadow var(--duration-press) var(--ease-out);
}

body.pos-page .pos-product-card .pos-product-qty-btn:active,
body.pos-page .pos-product-card .pos-product-add-fab:active,
body.pos-page #orderDetailsList .pos-order-qty-btn:active,
body.pos-page #posCategoryTabsWrap .nav-link:active,
body.pos-page .pos-seg-control__btn:active,
body.pos-page #itemExtrasModalOptions .pos-extra-modifier-card:active,
body.pos-page #posCompleteSaleBtn:not(:disabled):active,
body.pos-page #posOpenAccountBtn:not(:disabled):active {
    transform: none;
    scale: 0.97;
}

body.pos-page .pos-product-card .pos-product-qty-btn:hover,
body.pos-page #itemExtrasModalOptions .pos-extra-modifier-card:hover,
body.pos-page #orderDetailsList .pos-order-qty-btn:hover {
    background-color: inherit;
}

@media (hover: hover) and (pointer: fine) {
    body.pos-page .pos-product-card .pos-product-qty-btn:hover {
        background: #eef4fb;
        border-color: #6ea8fe;
    }

    body.pos-page #itemExtrasModalOptions .pos-extra-modifier-card:hover {
        border-color: #93c5fd;
        background: #f8fafc;
    }

    body.pos-page #orderDetailsList .pos-order-qty-btn:hover {
        background: #e2e8f0;
    }
}

/* Touch override in POS used transform:scale and can clip checkout */
@media (pointer: coarse) {
    body.pos-page .pos-touch-15 .btn:active {
        transform: none;
        scale: 0.97;
    }
}

/* Virtual keyboard dock: snappy, same-axis, never scale(0) */
body.pos-page .pos-kb-dock {
    transition:
        opacity 160ms var(--ease-out),
        transform 160ms var(--ease-drawer),
        visibility 160ms var(--ease-out);
}

/* Extras / gift / payment modals inherit global modal scale(0.96) */

/* =========================================================
   Kitchen — state color under 300ms, press on actions
   ========================================================= */
.kitchen-screen-11 .kitchen-order-card {
    transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.kitchen-screen-11 .kitchen-order-card__head {
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.kitchen-screen-11 .kitchen-order-card__timer {
    transition: color 200ms ease, background-color 200ms ease;
}

.kitchen-screen-11 .kitchen-order-card__primary-btn,
.kitchen-screen-11 .kitchen-lists-row .btn:not(.btn-link),
.kitchen-station-pill,
.kitchen-screen-11 .js-mark-ready,
.kitchen-screen-11 .js-mark-delivered,
.kitchen-screen-11 .js-start-prep {
    transition:
        scale var(--duration-press) var(--ease-out),
        background-color var(--duration-press) ease,
        color var(--duration-press) ease,
        box-shadow var(--duration-press) var(--ease-out),
        border-color var(--duration-press) ease,
        filter var(--duration-press) ease;
}

.kitchen-screen-11 .kitchen-order-card__primary-btn:not(:disabled):active,
.kitchen-screen-11 .kitchen-lists-row .btn:not(.btn-link):not(:disabled):active,
.kitchen-station-pill:active,
.kitchen-screen-11 .js-mark-ready:not(:disabled):active,
.kitchen-screen-11 .js-mark-delivered:not(:disabled):active,
.kitchen-screen-11 .js-start-prep:not(:disabled):active {
    transform: none;
    scale: 0.97;
}

.kitchen-station-pill:hover {
    background: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .kitchen-station-pill:hover {
        background: #e5e7eb;
        color: #374151;
    }

    .kitchen-station-pill.active:hover {
        background: #111827;
        color: #fff;
    }
}

/* Gift confirm: occasional overlay, scale from 0.96 */
.kitchen-gift-confirm-overlay:not(.d-none) .kitchen-gift-confirm-card {
    opacity: 1;
    scale: 1;
    transform-origin: center center;
    transition:
        opacity var(--duration-modal) var(--ease-out),
        scale var(--duration-modal) var(--ease-out);
}

.kitchen-gift-confirm-overlay:not(.d-none) .kitchen-gift-confirm-card {
    @starting-style {
        opacity: 0;
        scale: 0.96;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.bysk-glass .btn,
    body.bysk-glass .modal.fade .modal-dialog,
    body.bysk-glass .modal.fade .modal-backdrop,
    body.bysk-glass .offcanvas,
    body.bysk-glass .offcanvas-backdrop,
    #loginVirtualKeyboard #loginVkbPanel,
    .bysk-ui-confirm-overlay .bysk-ui-confirm-card,
    .bysk-ui-confirm-overlay .bysk-ui-confirm-backdrop,
    .bysk-ui-toast-mount .bysk-ui-toast,
    #posPhoneCartBar button,
    #posMobileCheckoutFab,
    body.pos-page .pos-products-col .pos-product-card,
    body.pos-page .pos-kb-dock,
    .kitchen-screen-11 .kitchen-order-card,
    .kitchen-screen-11 .kitchen-order-card__head,
    .kitchen-gift-confirm-overlay .kitchen-gift-confirm-card {
        transition: opacity 0.2s ease, filter 0.2s ease, background-color 0.2s ease, color 0.2s ease,
            border-color 0.2s ease !important;
        animation: none !important;
    }

    body.bysk-glass .btn:not(:disabled):active,
    body.bysk-glass .btn:not(:disabled):hover,
    #posPhoneCartBar button:not(:disabled):active,
    #posMobileCheckoutFab:not(:disabled):active,
    body.bysk-glass .modal.fade .modal-dialog,
    #loginVirtualKeyboard #loginVkbPanel,
    body.pos-page .pos-products-col .pos-product-card:active,
    .kitchen-station-pill:active,
    .kitchen-gift-confirm-overlay .kitchen-gift-confirm-card {
        transform: none !important;
        scale: 1 !important;
    }
}