/* Full-site motion and darker workspace layer. Theme accents remain controlled by bank settings. */
:root{--bank-motion-fast:.18s;--bank-motion-mid:.34s;--bank-motion-slow:.58s;--bank-motion-ease:cubic-bezier(.2,.78,.22,1)}

/* Dark professional workspaces while preserving configured primary/accent colors. */
body.bank-app.bank-admin-workspace,
body.bank-app.bank-user-workspace{
  --bank-text:#f5faf7;--bank-muted:#a1b3ab;--bank-border:rgba(235,250,242,.095);
  background:
    radial-gradient(circle at 88% -8%,color-mix(in srgb,var(--bank-primary) 17%,transparent),transparent 34%),
    radial-gradient(circle at 2% 44%,color-mix(in srgb,var(--bank-accent) 4%,transparent),transparent 28%),
    linear-gradient(145deg,color-mix(in srgb,var(--bank-bg) 72%,#000 28%),color-mix(in srgb,var(--bank-bg-2) 78%,#000 22%))!important;
}
body.bank-app.bank-admin-workspace .bank-main,
body.bank-app.bank-user-workspace .bank-main{background:linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.04))!important}
body.bank-app.bank-admin-workspace .bank-reference-sidebar,
body.bank-app.bank-user-workspace .bank-reference-sidebar{background:linear-gradient(180deg,color-mix(in srgb,var(--bank-surface) 72%,#000 28%),color-mix(in srgb,var(--bank-bg) 78%,#000 22%))!important;box-shadow:18px 0 60px rgba(0,0,0,.18)}
body.bank-app.bank-admin-workspace .bank-reference-topbar,
body.bank-app.bank-user-workspace .bank-reference-topbar{background:color-mix(in srgb,var(--bank-bg) 77%,#000 23%)!important;box-shadow:0 10px 30px rgba(0,0,0,.14)}
body.bank-app.bank-admin-workspace :where(.bank-card,.bank-reference-card,.bank-kpi-card),
body.bank-app.bank-user-workspace :where(.bank-card,.bank-reference-card,.bank-kpi-card){
  background:linear-gradient(145deg,color-mix(in srgb,var(--bank-surface-2) 76%,#000 24%),color-mix(in srgb,var(--bank-surface) 82%,#000 18%))!important;
  border-color:rgba(235,250,242,.085)!important;
  box-shadow:0 16px 46px rgba(0,0,0,.18)!important;
}
body.bank-app.bank-admin-workspace :where(.bank-table-wrap,.bank-customer-tabs,.bank-global-search),
body.bank-app.bank-user-workspace :where(.bank-table-wrap,.bank-global-search){background:rgba(0,0,0,.15)!important}

/* Entry / stagger motion. JS adds .bank-motion-item to real content only. */
.bank-motion-item{opacity:0;transform:translate3d(0,14px,0) scale(.992);transition:opacity var(--bank-motion-slow) var(--bank-motion-ease),transform var(--bank-motion-slow) var(--bank-motion-ease),border-color var(--bank-motion-fast),box-shadow var(--bank-motion-fast)}
.bank-motion-item.bank-motion-visible{opacity:1;transform:none}
.bank-motion-item[data-bank-motion="left"]{transform:translate3d(-16px,0,0)}
.bank-motion-item[data-bank-motion="right"]{transform:translate3d(16px,0,0)}
.bank-motion-item.bank-motion-visible[data-bank-motion]{transform:none}

/* Professional interaction feedback. */
body.bank-app :where(.bank-btn,.bank-icon-button,.bank-quick,.bank-quick-actions-strip>a,.bank-admin-quick-grid>a,.bank-service-list>a,.bank-pending-list>a,.bank-top-popover-grid>a,.bank-mobile-more-grid>a,.bank-kpi-card),
body.bank-public :where(a.primary,.section-btn,.service-card,.page-cards>article,.news-card,.feature-lines>span,.global-points>span),
body.bank-auth :where(.auth-button,.auth-card,input,select){transition:transform var(--bank-motion-fast) var(--bank-motion-ease),box-shadow var(--bank-motion-fast),border-color var(--bank-motion-fast),background-color var(--bank-motion-fast),filter var(--bank-motion-fast)!important}
@media(hover:hover){
 body.bank-app :where(.bank-kpi-card,.bank-quick-actions-strip>a,.bank-admin-quick-grid>a,.bank-service-list>a,.bank-pending-list>a):hover{transform:translateY(-3px)!important;box-shadow:0 20px 48px rgba(0,0,0,.26)!important}
 body.bank-app :where(.bank-btn,.bank-icon-button):hover{transform:translateY(-2px)}
 body.bank-public :where(.service-card,.page-cards>article,.news-card):hover{transform:translateY(-5px);box-shadow:0 24px 58px rgba(0,0,0,.16)}
 body.bank-public :where(a.primary,.section-btn):hover{transform:translateY(-2px)}
 body.bank-auth .auth-button:hover{transform:translateY(-2px);filter:saturate(1.06)}
}
body.bank-app :where(.bank-btn,.bank-icon-button,.bank-quick-actions-strip>a,.bank-mobile-bottom-nav a,.bank-mobile-bottom-nav button):active,
body.bank-public :where(a.primary,.section-btn,.service-card):active,
body.bank-auth .auth-button:active{transform:scale(.975)!important}

/* Popups / sheets / confirmation animations. */
@keyframes bankLayerIn{from{opacity:0}to{opacity:1}}
@keyframes bankDialogIn{from{opacity:0;transform:translateY(18px) scale(.965)}to{opacity:1;transform:none}}
@keyframes bankToastPop{0%{opacity:0;transform:translate3d(20px,-10px,0) scale(.97)}100%{opacity:1;transform:none}}
.bank-confirm-layer{animation:bankLayerIn .2s ease both!important}
.bank-confirm-card{animation:bankDialogIn .28s var(--bank-motion-ease) both!important;transform-origin:center}
.bank-alert.bank-toast-live{animation:bankToastPop .32s var(--bank-motion-ease) both!important}
.bank-top-popover{transform-origin:top right;animation:bankDialogIn .22s var(--bank-motion-ease) both!important}
.bank-mobile-more-sheet{transition:opacity .24s var(--bank-motion-ease),transform .3s var(--bank-motion-ease),visibility 0s linear .3s!important}
.bank-mobile-more-sheet.open{transition-delay:0s!important}
.bank-sidebar{transition:transform .3s var(--bank-motion-ease),visibility 0s linear .3s!important}
.bank-sidebar.open{transition-delay:0s!important}
.bank-sidebar-backdrop{transition:opacity .24s ease,visibility 0s linear .24s!important}

/* Public site: every section can flow in without a movie-like takeover. */
body.bank-public .reveal{transition:opacity .7s var(--bank-motion-ease),transform .7s var(--bank-motion-ease),filter .7s var(--bank-motion-ease)!important;filter:blur(2px)}
body.bank-public .reveal.is-visible{filter:none}
body.bank-public .normal-hero-bg,body.bank-public .global-bg,body.bank-public .page-visual{transition:transform 1.2s var(--bank-motion-ease),filter .5s ease}
@media(hover:hover){body.bank-public .normal-hero:hover .normal-hero-bg{transform:scale(1.018)}body.bank-public .page-visual:hover{transform:scale(1.012)}}
body.bank-public .public-status{animation:bankDialogIn .28s var(--bank-motion-ease) both}
body.bank-public .pub-links.is-open{animation:bankDialogIn .24s var(--bank-motion-ease) both}

/* Authentication entry motion. */
body.bank-auth .auth-story{animation:bankAuthStory .65s var(--bank-motion-ease) both}
body.bank-auth .auth-card{animation:bankAuthCard .55s .08s var(--bank-motion-ease) both}
@keyframes bankAuthStory{from{opacity:.2;transform:scale(1.025)}to{opacity:1;transform:none}}
@keyframes bankAuthCard{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
body.bank-auth .auth-alert{animation:bankDialogIn .28s var(--bank-motion-ease) both}
body.bank-auth input:focus,body.bank-auth select:focus{transform:translateY(-1px)}

/* Bulk stock-management panel. */
.bank-stock-bulk{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 13px;margin:14px 0;border:1px solid var(--bank-border);border-radius:12px;background:rgba(0,0,0,.13)}
.bank-stock-bulk label{display:flex;align-items:center;gap:8px;font-weight:780}.bank-stock-bulk-actions{display:flex;align-items:center;gap:9px}.bank-stock-select{position:absolute;top:14px;right:14px;z-index:3;width:20px;height:20px;accent-color:var(--bank-primary)}
.bank-stock-product-card{position:relative!important;padding-top:44px!important}

@media(max-width:760px){
 .bank-stock-bulk{align-items:stretch}.bank-stock-bulk-actions{display:grid;grid-template-columns:1fr;width:100%}.bank-stock-bulk-actions .bank-btn{width:100%}
 body.bank-app.bank-admin-workspace .bank-reference-sidebar,body.bank-app.bank-user-workspace .bank-reference-sidebar{box-shadow:28px 0 90px rgba(0,0,0,.48)}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
 .bank-motion-item{opacity:1!important;transform:none!important}.bank-public .reveal{filter:none!important}
}

/* 2026 full-site controls: settings can disable decorative motion without disabling UI. */
html.bank-motion-disabled *,html.bank-motion-disabled *::before,html.bank-motion-disabled *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
html.bank-motion-disabled .bank-motion-item,html.bank-motion-disabled body.bank-public .reveal{opacity:1!important;transform:none!important;filter:none!important}
html.bank-popup-motion-disabled :is(.bank-confirm-layer,.bank-confirm-card,.bank-top-popover,.bank-alert.bank-toast-live,.public-status-live,.pub-links.is-open){animation:none!important;transition-duration:.001ms!important}