/* =============================================
   Login Animated Background + Brand Theme
   MS TECHNOLOGY BD · Invoice Management System

   Every colour here is derived from the company logo
   (uploads/logos/*.jpeg), sampled with GD:
       orange  #F59324  rgb(245,147,36)   — 73% of the mark
       blue    #1877BB  rgb( 24,119,187)  — 27% of the mark
   The deep navies are the logo blue darkened; the ambers are the logo
   orange lightened. Nothing off-brand (no teal, no purple).

   Loaded by pages/login.php AFTER its inline <style>, so the overrides
   below win on equal specificity without needing !important.

   The artwork lives in <div class="login-bg">, injected as the first
   child of <body> by assets/js/login-bg.js. z-index:0 keeps it above the
   page canvas background and below the auth card (z-index:1).
   ============================================= */

:root {
    /* logo palette */
    --brand-orange: #F59324;
    --brand-orange-rgb: 245, 147, 36;
    --brand-blue: #1877BB;
    --brand-blue-rgb: 24, 119, 187;
    --brand-amber: #FFB55C;
    --brand-sky: #4FA3DC;

    /* re-point the page's own tokens at the logo blues so the button,
       focus rings and icons all rebrand in one place */
    --p:  #0C4E80;
    --p2: #1877BB;
    --accent: #F59324;
    --orange: #F59324;
}

/* Let the page scroll vertically on short screens. The artwork is fixed and
   clipped on its own, so nothing can bleed sideways.
   The centring moves from align/justify-content to `margin: auto` on the card
   wrapper: auto margins never go negative, so when the card is taller than the
   viewport its top stays reachable instead of being clipped off-screen. */
body {
    overflow-x: hidden;
    overflow-y: auto;
    background: #04121E;
    align-items: flex-start;
    justify-content: flex-start;
}

.auth-stage { margin: auto; }

.login-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    contain: layout paint;
}

/* ---------- Layer 1: deep base (logo blue, darkened) ---------- */
.login-bg__base {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 120% 80% at 15% -12%, rgba(24, 119, 187, 0.48) 0%, rgba(24, 119, 187, 0) 55%),
        radial-gradient(ellipse 110% 90% at 92% 110%, rgba(245, 147, 36, 0.30) 0%, rgba(245, 147, 36, 0) 58%),
        linear-gradient(158deg, #04121E 0%, #082941 45%, #0C4368 100%);
}

/* ---------- Layer 2: aurora curtains ---------- */
.login-bg__beams {
    position: absolute;
    inset: -25% -35%;
    background: repeating-linear-gradient(78deg,
        rgba(24, 119, 187, 0) 0px,
        rgba(24, 119, 187, 0.13) 60px,
        rgba(79, 163, 220, 0.10) 120px,
        rgba(245, 147, 36, 0.07) 180px,
        rgba(24, 119, 187, 0) 250px,
        rgba(24, 119, 187, 0) 380px);
    -webkit-mask-image: radial-gradient(ellipse 72% 95% at 50% 18%, #000 8%, transparent 72%);
            mask-image: radial-gradient(ellipse 72% 95% at 50% 18%, #000 8%, transparent 72%);
    mix-blend-mode: screen;
    will-change: transform;
    animation: loginBeams 30s ease-in-out infinite alternate;
}

@keyframes loginBeams {
    0%   { transform: translate3d(0, 0, 0) skewX(0deg); }
    50%  { transform: translate3d(6%, -3%, 0) skewX(-3deg); }
    100% { transform: translate3d(-5%, 2%, 0) skewX(2deg); }
}

/* ---------- Layer 3: drifting aurora orbs ----------
   Soft radial gradients (no filter: blur) so only transforms animate —
   the compositor handles those on the GPU. */
.login-bg__orb {
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: screen;
    will-change: transform;
    animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* logo blue */
.login-bg__orb--1 {
    width: 52vmax; height: 52vmax;
    top: -18vmax; left: -12vmax;
    background: radial-gradient(circle at 50% 50%,
        rgba(24, 119, 187, 0.62) 0%,
        rgba(24, 119, 187, 0.22) 40%,
        rgba(24, 119, 187, 0) 70%);
    animation-name: loginDrift1;
    animation-duration: 30s;
}

/* logo orange */
.login-bg__orb--2 {
    width: 46vmax; height: 46vmax;
    bottom: -20vmax; right: -14vmax;
    background: radial-gradient(circle at 50% 50%,
        rgba(245, 147, 36, 0.42) 0%,
        rgba(245, 147, 36, 0.15) 42%,
        rgba(245, 147, 36, 0) 70%);
    animation-name: loginDrift2;
    animation-duration: 37s;
}

/* logo blue, lightened */
.login-bg__orb--3 {
    width: 38vmax; height: 38vmax;
    top: 22vmax; right: 4vmax;
    background: radial-gradient(circle at 50% 50%,
        rgba(79, 163, 220, 0.34) 0%,
        rgba(79, 163, 220, 0.12) 44%,
        rgba(79, 163, 220, 0) 72%);
    animation-name: loginDrift3;
    animation-duration: 44s;
}

/* logo orange, lightened */
.login-bg__orb--4 {
    width: 26vmax; height: 26vmax;
    bottom: 8vmax; left: 12vmax;
    background: radial-gradient(circle at 50% 50%,
        rgba(255, 181, 92, 0.28) 0%,
        rgba(255, 181, 92, 0.10) 44%,
        rgba(255, 181, 92, 0) 72%);
    animation-name: loginDrift4;
    animation-duration: 26s;
}

@keyframes loginDrift1 {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(8vmax, 6vmax, 0) scale(1.12); }
    100% { transform: translate3d(2vmax, 12vmax, 0) scale(0.95); }
}
@keyframes loginDrift2 {
    0%   { transform: translate3d(0, 0, 0) scale(1.05); }
    50%  { transform: translate3d(-9vmax, -7vmax, 0) scale(0.93); }
    100% { transform: translate3d(-3vmax, -14vmax, 0) scale(1.14); }
}
@keyframes loginDrift3 {
    0%   { transform: translate3d(0, 0, 0) scale(0.96); }
    50%  { transform: translate3d(-11vmax, 8vmax, 0) scale(1.16); }
    100% { transform: translate3d(5vmax, -5vmax, 0) scale(1); }
}
@keyframes loginDrift4 {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(13vmax, -7vmax, 0) scale(1.20); }
    100% { transform: translate3d(-7vmax, 5vmax, 0) scale(0.90); }
}

/* ---------- Layer 4: fine dot grid ---------- */
.login-bg__grid {
    position: absolute;
    inset: -8%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
    background-size: 30px 30px;
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 18%, transparent 74%);
            mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 18%, transparent 74%);
    opacity: 0.55;
    animation: loginGridPan 40s linear infinite;
}

@keyframes loginGridPan {
    from { background-position: 0 0; }
    to   { background-position: 30px 30px; }
}

/* ---------- Layer 5: constellation mesh (canvas, see login-bg.js) ---------- */
.login-bg__canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

/* ---------- Layer 6: slow light sweep ---------- */
.login-bg__sheen {
    position: absolute;
    top: -50%;
    left: -55%;
    width: 34%;
    height: 200%;
    background: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(180, 215, 250, 0.10) 45%,
        rgba(255, 226, 190, 0.15) 50%,
        rgba(180, 215, 250, 0.10) 55%,
        rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    mix-blend-mode: screen;
    will-change: transform, opacity;
    animation: loginSheen 18s ease-in-out infinite;
}

@keyframes loginSheen {
    0%   { transform: translateX(0) rotate(14deg); opacity: 0; }
    12%  { opacity: 1; }
    52%  { opacity: 1; }
    64%  { opacity: 0; }
    100% { transform: translateX(360%) rotate(14deg); opacity: 0; }
}

/* ---------- Layer 7: film grain (adds depth, hides gradient banding) ---------- */
.login-bg__noise {
    position: absolute;
    inset: 0;
    opacity: 0.045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layer 8: vignette ---------- */
.login-bg__vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 85% 75% at 50% 45%,
        rgba(0, 0, 0, 0) 35%,
        rgba(2, 10, 18, 0.58) 100%);
}

/* =============================================
   The card
   ============================================= */
.auth-stage {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 960px;
}

/* The halo must never change size. An earlier version spun a conic gradient
   with transform: rotate() — because this box is a wide rectangle, rotating it
   grew its bounding rect, which grew the document's scrollHeight, which made
   the vertical scrollbar flicker on and off and shifted the whole card
   sideways every few seconds. Geometry is now fixed and only opacity (a
   compositor-only property) animates, so the layout is perfectly still. */
.auth-stage::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 28px;
    z-index: -1;
    background: linear-gradient(118deg,
        #1877BB 0%, #4FA3DC 26%, #F59324 58%, #FFB55C 78%, #1877BB 100%);
    filter: blur(20px);
    opacity: 0.42;
    will-change: opacity;
    animation: loginHalo 9s ease-in-out infinite;
}

@keyframes loginHalo {
    0%   { opacity: 0.30; }
    50%  { opacity: 0.50; }
    100% { opacity: 0.30; }
}

.auth-card {
    border-radius: 24px;
    box-shadow: 0 30px 80px rgba(2, 12, 22, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.10);
}

/* brand rule across the top, tying both logo colours together */
.auth-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        #1877BB 0%, #4FA3DC 30%, #F59324 66%, #FFB55C 100%);
    z-index: 2;
}

/* ---------- Brand panel ---------- */
.auth-brand {
    background: linear-gradient(150deg, #072B45 0%, #0B3A5C 32%, #10527F 64%, #0A3355 100%);
    background-size: 260% 260%;
    animation: loginBrandFlow 24s ease-in-out infinite;
}

@keyframes loginBrandFlow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* the two decorative blobs become rotated squares — a quiet echo of the
   cube in the logo instead of generic circles */
.auth-brand::before {
    top: -72px;
    right: -74px;
    width: 232px;
    height: 232px;
    border-radius: 30px;
    background: none;
    border: 1.5px solid rgba(245, 147, 36, 0.26);
    transform: rotate(22deg);
}

.auth-brand::after {
    bottom: -84px;
    left: -62px;
    width: 214px;
    height: 214px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(24, 119, 187, 0.34) 0%, rgba(245, 147, 36, 0.10) 100%);
    transform: rotate(-16deg);
}

.brand-logo {
    box-shadow: 0 14px 30px rgba(2, 12, 22, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.55);
}

/* accent rule under the company name, in the logo orange */
.auth-brand h1::after {
    content: '';
    display: block;
    width: 54px;
    height: 3px;
    border-radius: 2px;
    margin-top: 13px;
    background: linear-gradient(90deg, #F59324 0%, #FFB55C 100%);
}

.auth-brand .tag {
    margin-top: 12px;
    letter-spacing: 0.2px;
}

.feature-list li .fico {
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #FBB360;
    box-shadow: 0 3px 10px rgba(2, 12, 22, 0.22);
}

.brand-foot {
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ---------- Form panel ---------- */
.auth-form .welcome {
    font-size: 26px;
    letter-spacing: -0.3px;
}

.field label {
    letter-spacing: 0.2px;
    color: #46586A;
}

.input-wrap input {
    height: 50px;
    border-radius: 12px;
    background: #F7FAFC;
}

.input-wrap input:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 4px rgba(24, 119, 187, 0.14);
}

.input-wrap > i.lead { color: #94A5B3; }

.btn-signin {
    position: relative;
    overflow: hidden;
    height: 52px;
    letter-spacing: 0.3px;
    background: linear-gradient(135deg, #0C4E80 0%, #1877BB 55%, #2E93D6 100%);
    box-shadow: 0 10px 24px rgba(24, 119, 187, 0.34);
}

.btn-signin:hover {
    box-shadow: 0 14px 30px rgba(24, 119, 187, 0.44);
}

/* warm sheen on hover — the logo orange passing over the logo blue */
.btn-signin::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 214, 160, 0.42) 50%,
        rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    transition: left 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
}
.btn-signin:hover::after { left: 140%; }

/* =============================================
   Entrance — staggered, one-shot
   ============================================= */
@keyframes loginFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.feature-list li {
    animation: loginFadeUp 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.feature-list li:nth-child(1) { animation-delay: 0.38s; }
.feature-list li:nth-child(2) { animation-delay: 0.46s; }
.feature-list li:nth-child(3) { animation-delay: 0.54s; }
.feature-list li:nth-child(4) { animation-delay: 0.62s; }

.auth-form .welcome,
.auth-form .welcome-sub,
.auth-form .field,
.auth-form .btn-signin {
    animation: loginFadeUp 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.auth-form .welcome     { animation-delay: 0.30s; }
.auth-form .welcome-sub { animation-delay: 0.36s; }
.auth-form .field:nth-of-type(1) { animation-delay: 0.44s; }
.auth-form .field:nth-of-type(2) { animation-delay: 0.52s; }
.auth-form .btn-signin  { animation-delay: 0.60s; }

/* =============================================
   Accessibility — honour reduced-motion
   Keeps the artwork, drops the movement.
   ============================================= */
@media (prefers-reduced-motion: reduce) {
    .login-bg__orb,
    .login-bg__beams,
    .login-bg__grid,
    .login-bg__sheen,
    .auth-stage::before,
    .auth-brand,
    .auth-card {
        animation: none !important;
    }
    .login-bg__sheen { display: none; }
    .auth-brand { background-position: 30% 50%; }

    .feature-list li,
    .auth-form .welcome,
    .auth-form .welcome-sub,
    .auth-form .field,
    .auth-form .btn-signin,
    .btn-signin::after {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =============================================
   Small screens — lighter, calmer
   (.login-bg is fixed + overflow:hidden, so it can
   never introduce horizontal scroll)
   ============================================= */
@media (max-width: 820px) {
    .auth-stage { max-width: 440px; }
    .auth-stage::before { filter: blur(14px); opacity: 0.34; }
    .login-bg__sheen { display: none; }
    .login-bg__orb--4 { display: none; }
    .login-bg__grid { background-size: 24px 24px; opacity: 0.4; }
    .login-bg__noise { display: none; }

    /* the accent rule sits under the mobile logo block instead */
    .mobile-brand h1::after {
        content: '';
        display: block;
        width: 46px;
        height: 3px;
        border-radius: 2px;
        margin: 10px auto 0;
        background: linear-gradient(90deg, #F59324 0%, #FFB55C 100%);
    }
}
