/*
 * Sign-in page. The form is static markup in index.html (#acme-login) so it paints before .NET starts; Login.razor
 * only attaches to it. This file must stand alone: in sign-in mode Bootstrap, theme.css and app.css load after first
 * paint, so it carries its own reset, tokens and form controls.
 */
#acme-login {
    --acme-color-info-action: #2196F3;
    --acme-color-success: #198754;
    --acme-color-danger: #dc3545;
    --brand-dark: #021320;
    --acme-radius-sm: 4px;
    --acme-radius-md: 8px;
    --acme-radius-pill: 999px;
    --acme-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    position: fixed;
    inset: 0;
    z-index: 2000;
    box-sizing: border-box;
    font: 400 14px/1.5 "Aptos Login", "Aptos", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* What app.css and Bootstrap give this page once they load (they arrive after first paint on a signed-out load).
   Set here too, so the page is already in its final size and nothing moves when they apply. :where() keeps the
   html rule weaker than app.css, so a changed --font-size still wins there. */
/* The page's own copy of Aptos (same files as app.css, so no second download). "optional": if the preloaded font is
   not there by first paint the page keeps the fallback, instead of redrawing all text later (layout shift, late paint). */
@font-face {
    font-family: 'Audiowide Login';
    src: url('../fonts/Audiowide.woff2') format('woff2');
    font-weight: 400;
    font-display: optional;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Aptos Login';
    src: url('../fonts/Aptos.woff2') format('woff2');
    font-weight: 400;
    font-display: optional;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Aptos Login';
    src: url('../fonts/Aptos-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: optional;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:where(html) {
    font-size: var(--font-size, .9rem);
}

:where(body) {
    margin: 0;
}

#acme-login * {
    font-size: var(--font-size, .9rem);
    font-family: "Aptos Login", "Aptos", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

#acme-login small {
    font-size: .875em;
}

#acme-login h1 {
    line-height: 1.2;
}

#acme-login label {
    display: inline-block;
}

html:not(.acme-login-open) #acme-login {
    display: none;
}

html.acme-login-open body {
    background: #27323e;
}

/* Whatever #app holds under the page (boot loader, Blazor's placeholder) must not paint: it would count for layout
   shift and largest paint, and its styles arrive late. Visible only while this page fades in or out over it. */
html.acme-login-open:not(.acme-login-entering):not(.acme-login-leaving) #app {
    visibility: hidden;
}

/* Hand-off with Blazor (acmeLogin in index.html): fades in when the app opens the sign-in page, out once the next page
   is rendered underneath. The first paint (signed-out load) shows it at once. Rare, so a little softer than UI motion. */
html.acme-login-entering #acme-login {
    animation: acme-login-in 200ms cubic-bezier(.2, 0, 0, 1) both;
}

html.acme-login-leaving #acme-login {
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms cubic-bezier(.4, 0, 1, 1);
}

@keyframes acme-login-in {
    from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    html.acme-login-entering #acme-login {
        animation: none;
    }

    html.acme-login-leaving #acme-login {
        transition: none;
    }
}

#acme-login *,
#acme-login *::before,
#acme-login *::after {
    box-sizing: border-box;
}

#acme-login h1,
#acme-login p {
    margin: 0;
}

#acme-login a {
    color: inherit;
}

#acme-login button,
#acme-login input {
    font: inherit;
    color: inherit;
}

#acme-login svg {
    flex-shrink: 0;
}

#acme-login svg[hidden] {
    display: none;
}

#acme-login.login-page {
    --login-surface: #303740;
    --login-panel: linear-gradient(120deg, #2795eb 0%, #45a5ad 100%);
    --login-text: #f5f6f7;
    --login-muted: #b7bbc0;
    --login-form-surface: #303740;
    --login-form-text: #f5f6f7;
    --login-form-muted: #aeb4ba;
    --login-control-border: #c8cdd2;
    --login-border: #60666c;
    --login-accent: #ed6668;
    --login-accent-soft: #ffb386;
    --login-input-height: 28px;
    --login-touch-target: 32px;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    overflow-x: hidden;
    overflow-y: hidden;
    color: var(--login-text);
    background: #27323e;
}

#acme-login .login-shell {
    width: min(100%, 68rem);
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    margin: 0 auto;
    outline: none;
}

#acme-login .login-card {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--login-border) !important;
    border-radius: 1.125rem;
    color: var(--login-text);
    background: var(--login-surface);
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .28);
}

#acme-login .login-header {
    display: flex;
    min-height: 3.5rem;
    align-items: center;
    gap: .75rem;
    padding: .625rem 1.25rem;
    border-bottom: 1px solid var(--login-border);
    background: var(--login-surface);
}

#acme-login .erp-logo {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

#acme-login .header-brand-word {
    color: transparent;
    background: linear-gradient(90deg, #2951a6 0%, #de6262 100%);
    -webkit-background-clip: text;
    background-clip: text;
    font-family: "Audiowide Login", "Audiowide", cursive;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
}

#acme-login .version-text {
    padding: 0;
    border: 0;
    color: #7967a6;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.25;
}

#acme-login .login-content {
    display: grid;
    grid-template-columns: minmax(0, 60%) minmax(22rem, 40%);
    min-height: min(27.5rem, calc(100dvh - 9rem));
    background: var(--login-form-surface);
}

#acme-login .left-panel {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: clamp(1rem, 2vh, 1.5rem);
    padding: clamp(1.5rem, 4vw, 3rem);
    overflow: hidden;
    isolation: isolate;
    background: var(--login-panel);
    clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
}

#acme-login .left-panel::before,
#acme-login .left-panel::after {
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    content: "";
}

#acme-login .left-panel::before {
    width: 22rem;
    height: 22rem;
    top: -11rem;
    right: -8rem;
}

#acme-login .left-panel::after {
    width: 16rem;
    height: 16rem;
    bottom: -9rem;
    left: -6rem;
}

#acme-login .illustration-frame {
    width: min(90%, 35rem);
    padding: .75rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 1rem;
    background: rgba(15, 35, 55, .3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

#acme-login .left-panel-copy {
    max-width: 34rem;
    text-align: center;
}

#acme-login .product-kicker {
    display: block;
    margin-bottom: .375rem;
    color: rgba(255, 255, 255, .82);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

#acme-login .brand-text {
    margin: 0;
    font-family: "Audiowide Login", "Audiowide", cursive;
    color: white;
    font-size: clamp(2rem, 3.4vw, 3.75rem);
    font-weight: 800;
    letter-spacing: -.03em;
}

#acme-login .brand-text span {
    color: white;
    font-size: clamp(.875rem, 1.1vw, 1.25rem);
    letter-spacing: 0;
}

#acme-login .left-panel-copy p {
    max-width: 32rem;
    margin: .625rem auto 0;
    color: rgba(255, 255, 255, .78);
    font-size: .9375rem;
    line-height: 1.55;
}

#acme-login .login-form-panel {
    display: flex;
    min-width: 0;
    justify-content: center;
    flex-direction: column;
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 3.5vw, 3rem);
    color: var(--login-form-text);
    background: var(--login-form-surface);
}

#acme-login .login-intro,
#acme-login .login-form,
#acme-login .login-links {
    width: min(100%, 30rem);
    margin-inline: auto;
}

#acme-login .login-intro h1 {
    margin: 0;
    color: var(--login-accent);
    font-size: clamp(1.75rem, 2.5vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -.03em;
    text-align: center;
    text-transform: uppercase;
}

#acme-login .login-heading-accent {
    display: block;
    width: 6.5rem;
    height: .375rem;
    margin: 1rem auto;
    border-radius: var(--acme-radius-pill);
    background: var(--login-accent-soft);
}

#acme-login .login-fields {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

#acme-login .floating-label-wrapper {
    min-height: var(--login-touch-target);
    padding: .375rem 0 !important;
}

#acme-login .floating-input {
    height: var(--login-input-height) !important;
    min-height: var(--login-input-height) !important;
    max-height: var(--login-input-height) !important;
    padding-inline: .875rem 2.75rem !important;
    border-color: var(--login-control-border) !important;
    border-width: 1px !important;
    border-radius: var(--acme-radius-sm) !important;
    color: var(--login-form-text) !important;
    background: var(--login-form-surface) !important;
    font-size: 16px !important;
}

#acme-login .floating-input:focus,
#acme-login .floating-input:focus-visible {
    border-color: var(--login-accent) !important;
    outline: 1px solid rgba(237, 102, 104, .35) !important;
    outline-offset: 1px;
    box-shadow: none !important;
}

#acme-login .floating-label-text {
    top: 50%;
    left: .75rem;
    transform: translateY(-50%);
    color: var(--login-form-muted);
    background: var(--login-form-surface);
    transition: opacity var(--acme-transition-fast), color var(--acme-transition-fast);
}

#acme-login .floating-input:focus + .floating-label-text,
#acme-login .floating-input:not(:placeholder-shown) + .floating-label-text {
    top: 50%;
    left: .75rem;
    transform: translateY(-50%);
    color: var(--login-accent);
    font-size: inherit;
    opacity: 0;
    animation: none;
}

#acme-login .field-icon,
#acme-login .toggle-password {
    display: inline-flex;
    width: 2.75rem;
    height: var(--login-input-height);
    min-height: var(--login-input-height);
    align-items: center;
    justify-content: center;
    right: 0 !important;
    margin-right: 0 !important;
    color: var(--login-form-muted);
}

#acme-login .field-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#acme-login .toggle-password {
    top: 50%;
    height: var(--login-touch-target);
    min-height: var(--login-touch-target);
    transform: translateY(-50%);
}

#acme-login .toggle-password:focus-visible {
    border-radius: var(--acme-radius-md);
    outline: 1px solid color-mix(in srgb, var(--login-accent) 55%, transparent);
    outline-offset: -1px;
}

#acme-login .login-options {
    display: flex;
    min-height: var(--login-touch-target);
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
}

#acme-login .login-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
}

#acme-login .login-check-input,
#acme-login .login-check-label {
    cursor: pointer;
}

#acme-login .login-check-input {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
}

#acme-login .login-link {
    min-height: var(--login-touch-target);
    padding: .5rem 0 !important;
    color: var(--login-muted) !important;
    font-weight: 600;
    text-decoration: underline;
}

#acme-login .login-link:hover {
    text-decoration: underline;
}

#acme-login .login-submit {
    width: 100%;
    min-height: var(--login-touch-target);
    margin-top: .75rem;
    border: 0;
    border-radius: var(--acme-radius-sm);
    background: #e83243;
    font-weight: 700;
}

#acme-login .login-error,
#acme-login .login-validation-summary {
    width: min(100%, 22rem);
    margin: 0 auto .75rem;
    padding: .75rem 0 .75rem 2rem;
    border: 1px solid color-mix(in srgb, var(--acme-color-danger) 45%, transparent);
    border-radius: var(--acme-radius-md);
    color: color-mix(in srgb, var(--acme-color-danger) 55%, white);
    background: color-mix(in srgb, var(--acme-color-danger) 12%, transparent);
    font-size: .875rem;
}

#acme-login .biometric-login {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin-top: .75rem;
    border: 1px solid var(--login-border);
    border-radius: 50%;
    color: var(--login-accent);
    background: color-mix(in srgb, white 6%, transparent);
    font-size: 1.5rem;
    transition: color var(--acme-transition-fast), background-color var(--acme-transition-fast), border-color var(--acme-transition-fast);
}

#acme-login .biometric-login:hover,
#acme-login .biometric-login:focus-visible {
    border-color: var(--login-accent);
    color: white;
    background: color-mix(in srgb, var(--login-accent) 18%, transparent);
}

#acme-login .biometric-login:disabled {
    cursor: not-allowed;
    opacity: .45;
}

#acme-login .signup-prompt {
    display: flex;
    min-height: var(--login-touch-target);
    align-items: center;
    justify-content: center;
    gap: .375rem;
    color: var(--login-muted);
}

#acme-login .login-links {
    display: flex;
    min-height: var(--login-touch-target);
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: .75rem;
    color: var(--login-muted);
}

#acme-login .login-footer {
    min-height: 1.5rem;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .375rem .75rem;
    margin-top: auto;
    color: var(--login-muted);
    text-align: center;
}

#acme-login .mobile-label {
    padding: .125rem .5rem;
    border: 1px solid var(--login-border);
    border-radius: var(--acme-radius-pill);
    font-size: .75rem;
}

#acme-login .company-link {
    margin-inline: .25rem;
    color: var(--login-text);
    font-weight: 600;
    text-decoration: none;
}

#acme-login .company-link:hover,
#acme-login .company-link:focus-visible {
    color: white;
    text-decoration: underline;
}

@media (max-width: 768px) {
    #acme-login.login-page {
        height: auto;
        overflow-y: auto;
        padding-inline: max(.75rem, env(safe-area-inset-left)) max(.75rem, env(safe-area-inset-right));
    }

    #acme-login .login-header {
        min-height: 3.75rem;
        padding: .75rem 1rem;
    }

    #acme-login .header-brand-word {
        font-size: 1.125rem;
    }

    #acme-login .login-card {
        border-radius: .875rem;
    }

    #acme-login .login-content {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    #acme-login .left-panel {
        min-height: 10rem;
        padding: 1.25rem;
        clip-path: none;
    }

    #acme-login .illustration-frame {
        width: min(100%, 16rem);
        padding: .5rem;
    }

    #acme-login .left-panel-copy {
        display: none;
    }

    #acme-login .login-form-panel {
        padding: 2rem clamp(1rem, 6vw, 2rem);
    }

    #acme-login .login-heading-accent {
        margin-block: 1.25rem 1rem;
    }
}

@media (max-width: 420px) {
    #acme-login .login-header {
        padding-inline: 1rem;
    }

    #acme-login .left-panel {
        min-height: 8rem;
    }

    #acme-login .illustration-frame {
        width: min(100%, 14rem);
    }

    #acme-login .login-links {
        flex-direction: column;
        gap: 0;
    }
}

@media (max-height: 640px) and (orientation: landscape) {
    #acme-login .login-shell {
        margin-top: 0;
    }

    #acme-login .login-content {
        min-height: 0;
    }

    #acme-login .left-panel,
    #acme-login .login-form-panel {
        padding-block: 1.5rem;
    }

    #acme-login .left-panel-copy p {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #acme-login .biometric-login {
        transition: none;
    }
}

/* Form controls (Blazor used FloatingLabel, PasswordInput and Bootstrap buttons; these are their static equivalents). */
#acme-login .login-card {
    display: block;
}

#acme-login .floating-label-wrapper {
    position: relative;
    width: 100%;
    padding-inline: .25rem !important;
}

#acme-login .floating-label {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

#acme-login .floating-input {
    display: block;
    width: 100%;
    flex: 1 1 auto;
    border: 1px solid;
    appearance: none;
    transition: border-color var(--acme-transition-fast);
}

#acme-login .floating-input::placeholder {
    color: transparent;
}

#acme-login .floating-label-text {
    position: absolute;
    margin: 0;
    padding: 0 .5rem;
    border-radius: var(--acme-radius-sm);
    pointer-events: none;
}

#acme-login .floating-input:focus + .floating-label-text,
#acme-login .floating-input:not(:placeholder-shown) + .floating-label-text {
    top: 50%;
    left: .75rem;
    transform: translateY(-50%);
    color: var(--login-accent);
    opacity: 0;
}

#acme-login .toggle-password {
    position: absolute;
    right: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

#acme-login .toggle-password:hover {
    color: var(--login-accent);
}

#acme-login .login-check-input {
    accent-color: var(--login-accent);
}

#acme-login .login-options {
    justify-content: space-between;
}

#acme-login .login-check-label {
    color: var(--login-muted);
}

#acme-login .login-link {
    display: inline-flex;
    align-items: center;
    border: 0;
    background: none;
    font-size: inherit;
}

#acme-login .login-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .25rem .75rem;
    color: #fff;
    cursor: pointer;
    transition: filter var(--acme-transition-fast);
}

#acme-login .login-submit:hover:not(:disabled) {
    filter: brightness(1.08);
}

#acme-login .login-submit:focus-visible,
#acme-login .login-link:focus-visible,
#acme-login .company-link:focus-visible,
#acme-login .login-check-input:focus-visible {
    outline: 2px solid var(--login-accent-soft);
    outline-offset: 2px;
}

#acme-login .login-submit:disabled {
    cursor: progress;
    opacity: .8;
}

#acme-login .login-spinner {
    display: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: acme-login-spin .7s linear infinite;
}

#acme-login .login-submit[aria-busy="true"] .login-spinner {
    display: inline-block;
}

#acme-login .login-error {
    padding-inline: 1rem;
}

#acme-login .login-error[hidden],
#acme-login .biometric-login[hidden] {
    display: none;
}

#acme-login .illustration-frame svg {
    display: block;
    width: 100%;
    height: auto;
}

#acme-login .acme-logo-img {
    display: block;
    width: 60px;
    height: 34px;
}

@keyframes acme-login-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    #acme-login .login-spinner {
        animation-duration: 2s;
    }
}

/* Illustration (was Component/Common/AnimateSVG.razor.css). */
.acme-erp-illustration {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    color: color-mix(in srgb, var(--acme-color-info-action) 66%, white);
    filter: drop-shadow(0 12px 24px color-mix(in srgb, var(--brand-dark) 42%, transparent));
}

.acme-erp-illustration line,
.acme-erp-illustration path,
.acme-erp-illustration polyline,
.acme-erp-illustration rect,
.acme-erp-illustration circle {
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#acme-login .gear-large,
#acme-login .gear-small-top,
#acme-login .gear-small-bottom,
#acme-login .chart-bars rect {
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
}

#acme-login .gear-large {
    animation: gear-clockwise 14s linear infinite;
}

#acme-login .gear-small-top {
    animation: gear-counter-clockwise 9s linear infinite;
}

#acme-login .gear-small-bottom {
    animation: gear-counter-clockwise 11s linear infinite;
}

#acme-login .chart-bars rect {
    transform-origin: bottom;
    animation: chart-breathe 3.6s ease-in-out infinite;
}

#acme-login .chart-bars .bar-2 { animation-delay: .35s; }
#acme-login .chart-bars .bar-3 { animation-delay: .7s; }

#acme-login .receipt-printing {
    animation: receipt-feed 4s cubic-bezier(.4, 0, .2, 1) infinite;
}

#acme-login .status-light {
    fill: var(--acme-color-success);
    animation: status-pulse 2.4s ease-in-out infinite;
}

#acme-login .processing-line,
#acme-login .flow-path {
    stroke-dasharray: 5 5;
    animation: data-flow 2.4s linear infinite;
}

#acme-login .button-pulse {
    fill: color-mix(in srgb, white 72%, transparent);
    animation: indicator-pulse 2.4s ease-in-out infinite;
}

#acme-login .line-dash {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: draw-line 1.2s ease-out forwards;
}

#acme-login .line-dot {
    animation: dot-float 3s ease-in-out infinite;
}

#acme-login .flow-path {
    fill: none;
    stroke: color-mix(in srgb, var(--acme-color-info-action) 65%, transparent);
    stroke-width: 1.5;
}

#acme-login .delay-200 { animation-delay: .2s !important; }

#acme-login .delay-400 { animation-delay: .4s !important; }

#acme-login .delay-500 { animation-delay: .5s !important; }

#acme-login .delay-600 { animation-delay: .6s !important; }

@keyframes gear-clockwise {
    to { transform: rotate(360deg); }
}

@keyframes gear-counter-clockwise {
    to { transform: rotate(-360deg); }
}

@keyframes chart-breathe {
    0%, 100% { transform: scaleY(.82); opacity: .72; }
    50% { transform: scaleY(1); opacity: 1; }
}

@keyframes receipt-feed {
    0%, 14% { transform: translateY(-4px); opacity: 0; }
    28%, 72% { opacity: 1; }
    86%, 100% { transform: translateY(10px); opacity: 0; }
}

@keyframes status-pulse {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

@keyframes data-flow {
    to { stroke-dashoffset: -20; }
}

@keyframes indicator-pulse {
    0%, 100% { opacity: .45; }
    50% { opacity: 1; }
}

@keyframes draw-line {
    to { stroke-dashoffset: 0; }
}

@keyframes dot-float {
    0%, 100% { transform: translateY(0); opacity: .68; }
    50% { transform: translateY(-2px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .acme-erp-illustration *,
    .acme-erp-illustration *::before,
    .acme-erp-illustration *::after {
        animation: none !important;
        transition: none !important;
    }

    #acme-login .line-dash {
        stroke-dashoffset: 0;
    }

    #acme-login .receipt-printing,
    #acme-login .line-dot,
    #acme-login .status-light,
    #acme-login .button-pulse {
        opacity: 1;
    }
}