/* assets/css/loading.css
   Loading feedback, shared by the main app, the Bank portal and the POS portal (each keeps its own copy).

   1) BUTTON LOADING  - the button you pressed shows a spinner (added by assets/js/loading.js).
   2) LOADING SCREEN  - a full-screen beeping logo, only for the pages listed in LOADING_SCREEN_PAGES
                        (config.php), and only if loading takes longer than ~0.2s so quick pages never flash it.

   Theme variables only (--bg0, --cyan), so dark / light both work. */

/* ── 1. button loading ────────────────────────────────────── */
/* The label and icons stay in the layout but are hidden, so the button keeps its exact size while a spinner
   sits in the middle. --bms-spin is the button's own text colour, set by loading.js, so the spinner is
   readable on any button style (cyan primary, ghost, danger...). We deliberately do NOT use the `disabled`
   attribute: a disabled submit button is left out of the form data, which would drop its name/value. */
.bms-loading {
    pointer-events: none;
    cursor: progress;
    color: transparent !important;
    text-shadow: none !important;
}
.bms-loading > * { opacity: 0 !important; }
.bms-loading::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.15em;
    height: 1.15em;
    margin: -.575em 0 0 -.575em;
    box-sizing: border-box;
    border: 2px solid var(--bms-spin, currentColor);
    border-right-color: transparent;
    border-radius: 50%;
    animation: bms-spin .65s linear infinite;
}
@keyframes bms-spin { to { transform: rotate(360deg); } }

/* ── 2. the loading screen ────────────────────────────────── */
/* Above toasts (2000), popups/dropdowns (1900-1950); below the session-expired overlay (3000). */
.bms-splash {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg0, var(--bg1, #0b0e14));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.bms-splash.is-visible {
    visibility: visible;
    pointer-events: auto;
    /* 1st: fade in after a short delay (a page that loads in <0.2s never shows it).
       2nd: pure-CSS failsafe - after 12s it disappears on its own even if JavaScript never runs. */
    animation: bms-splash-in .2s ease .2s forwards, bms-splash-failsafe .01s linear 12s forwards;
}
@keyframes bms-splash-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bms-splash-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.bms-splash-logo {
    --bms-ring-radius: 50%;
    position: relative;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bms-splash-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: bms-beep 1.3s ease-in-out infinite;
    will-change: transform;
}
/* a ring that radiates out on every beat */
.bms-splash-logo::before {
    content: "";
    position: absolute;
    inset: -4px;
    border: 2px solid var(--cyan, #22d3ee);
    border-radius: var(--bms-ring-radius);
    opacity: 0;
    animation: bms-ring 1.3s ease-out infinite;
    pointer-events: none;
}
/* wide wordmark logos (POS): no ring, just the beat */
.bms-splash-logo.is-wide { width: min(260px, 70vw); height: 66px; }
.bms-splash-logo.is-wide::before { display: none; }
.bms-splash-logo.is-wide img { object-position: center; }
/* a black logo needs inverting on a dark theme (POS does the same for its own logo) */
[data-theme="dark"] .bms-splash-logo img.invert-dark { filter: invert(1) brightness(1.7); }

/* "lub-dub" beat: a quick swell, a small dip, a second smaller swell, then rest */
@keyframes bms-beep {
    0%, 60%, 100% { transform: scale(1); }
    12%           { transform: scale(1.16); }
    26%           { transform: scale(.98); }
    38%           { transform: scale(1.09); }
}
@keyframes bms-ring {
    0%   { opacity: .6; transform: scale(.92); }
    70%  { opacity: 0;  transform: scale(1.9); }
    100% { opacity: 0;  transform: scale(1.9); }
}

.bms-sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* people who asked for less motion: a slow, gentle fade instead of scaling and rings */
@media (prefers-reduced-motion: reduce) {
    .bms-loading::after { animation-duration: 1.6s; }
    .bms-splash-logo img { animation: bms-fade 1.8s ease-in-out infinite; }
    .bms-splash-logo::before { display: none; }
    @keyframes bms-fade { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
}
@media print { .bms-splash { display: none !important; } }