/* =========================================================
   PA413 WORKBOOK — SECURE ACCESS
   Dark classified / restricted archive login interface.
   ========================================================= */


/* ---------- Page Environment ---------- */

.loginPage {
    min-height: 100vh;
    margin: 0;
    display: block;
    overflow: hidden;
    color: var(--main-text);
    background:
        linear-gradient(rgba(3, 3, 3, 0.50), rgba(3, 3, 3, 0.68)),
        url("../../images/backgrounds/login-background-desktop.png") center center / cover no-repeat fixed;
}


/* Dark desaturation layer: the environment starts almost lifeless until login interaction begins. */
.loginPage::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.34)),
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.012) 0,
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px,
            transparent 4px
        );
    backdrop-filter: grayscale(0.94) saturate(0.20) brightness(0.68);
    transition: backdrop-filter 1.2s ease, background 1.2s ease;
}


    .loginPage.loginEngaged::before {
        background:
            linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.16)),
            repeating-linear-gradient(
                0deg,
                rgba(255, 255, 255, 0.008) 0,
                rgba(255, 255, 255, 0.008) 1px,
                transparent 1px,
                transparent 4px
            );
        backdrop-filter: grayscale(0.05) saturate(0.95) brightness(0.86);
    }



/* Simulated beam from the overhead lamp built into the background artwork. */
.loginPage::after {
    content: "";
    position: fixed;
    z-index: 0;
    width: 1200px;
    height: 1050px;
    left: 50%;
    top: 48px;
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0.04;
    mix-blend-mode: screen;

    background:
        radial-gradient(
            ellipse at 50% 1%,
            rgba(246, 241, 232, 0.95) 0%,
            rgba(255, 231, 208, 0.58) 9%,
            rgba(255, 231, 208, 0.18) 22%,
            transparent 38%
        ),
        conic-gradient(
            from 0deg at 50% 0%,
            transparent 0deg,
            transparent 145deg,
            rgba(221, 229, 207, 0.08) 158deg,
            rgba(244, 239, 230, 0.48) 172deg,
            rgba(246, 241, 232, 0.70) 180deg,
            rgba(244, 239, 230, 0.48) 188deg,
            rgba(221, 229, 207, 0.08) 202deg,
            transparent 215deg,
            transparent 360deg
        );

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.25) 5%,
        rgba(0, 0, 0, 0.75) 10%,
        black 16%,
        black 58%,
        rgba(0, 0, 0, 0.72) 76%,
        transparent 100%
    );

    filter: blur(72px);
    transition: opacity 1.1s ease, filter 1.1s ease;
}

    .loginPage.loginEngaged::after {
        opacity: 0.82;
        filter: blur(90px);
    }



/* ---------- Main Layout ---------- */

.loginAccessShell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px;
    box-sizing: border-box;
}


/* ---------- Secure Access Panel ---------- */

.loginAccessPanel {
    position: relative;
    width: min(460px, 100%);
    overflow: hidden;
    padding: 32px;
    border: 1px solid rgba(144, 156, 145, 0.18);
    border-radius: 14px;
    background:
        linear-gradient(145deg, rgba(13, 17, 16, 0.97), rgba(5, 5, 5, 0.98));
    box-shadow:
        0 32px 90px rgba(0, 0, 0, 0.72),
        0 0 0 1px rgba(255, 255, 255, 0.025) inset;
    transition: border-color 0.8s ease, box-shadow 0.8s ease, background 0.8s ease;
}

    .loginPage.loginEngaged .loginAccessPanel {
        border-color: rgba(80, 42, 48, 0.46);
        background:
            linear-gradient(145deg, rgba(13, 17, 16, 0.98), rgba(6, 7, 6, 0.98));
        box-shadow:
            0 32px 90px rgba(0, 0, 0, 0.78),
            0 0 28px rgba(80, 42, 48, 0.10),
            0 0 0 1px rgba(116, 136, 84, 0.06) inset;
    }


/* Thin classified-terminal highlight around the inner edge. */
.loginAccessPanel::before {
    content: "";
    position: absolute;
    inset: 7px;
    pointer-events: none;
    border: 1px solid rgba(145, 161, 122, 0.055);
    border-radius: 9px;
}


/* Very faint scanning line across the terminal. */
.loginAccessPanel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -25%;
    height: 90px;
    pointer-events: none;
    opacity: 0.18;
    background: linear-gradient(to bottom, transparent, rgba(137, 152, 123, 0.10), transparent);
    animation: loginScan 8s linear infinite;
}


/* ---------- Classification Label ---------- */

.loginClassification {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 25px;
    color: #9eaa91;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.loginClassificationMark {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #777166;
    box-shadow: 0 0 7px rgba(157, 168, 157, 0.30);
    animation: loginStatusPulse 2.6s ease-in-out infinite;
}

    .loginPage.loginEngaged .loginClassificationMark {
        background: #a0555b;
        box-shadow:
            0 0 7px rgba(160, 85, 91, 0.90),
            0 0 18px rgba(80, 42, 48, 0.55);
    }


/* ---------- Header ---------- */

.loginHeader {
    position: relative;
    z-index: 1;
    margin-bottom: 28px;
}

.loginEyebrow {
    margin: 0 0 8px;
    color: #9eaa91;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.loginHeader h1 {
    margin: 0;
    color: #f4efe6;
    font-size: clamp(2rem, 5vw, 2.65rem);
    font-weight: 600;
    letter-spacing: -0.035em;
}

.loginDescription {
    max-width: 390px;
    margin: 12px 0 0;
    color: #909c91;
    font-size: 0.91rem;
    line-height: 1.65;
}


/* ---------- Login Form ---------- */

.loginForm {
    position: relative;
    z-index: 1;
}

.loginForm .formGroup {
    margin-bottom: 18px;
}

.loginForm label {
    color: #9da89d;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.loginForm input {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    border: 1px solid rgba(144, 156, 145, 0.22);
    border-radius: 8px;
    outline: none;
    color: #f4efe6;
    background: rgba(4, 5, 4, 0.55);
    box-shadow: 0 0 0 transparent;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.loginForm input:hover {
    border-color: rgba(158, 170, 145, 0.34);
}

.loginForm input:focus {
    border-color: rgba(118, 145, 76, 0.72);
    background: rgba(13, 17, 16, 0.74);
    box-shadow:
        0 0 0 3px rgba(83, 106, 70, 0.10),
        0 0 22px rgba(66, 89, 57, 0.08);
}







/* ---------- Authentication Message ---------- */

#loginFormMessage {
    min-height: 22px;
    margin: 3px 0 12px;
    font-size: 0.82rem;
}

#loginFormMessage.formMessageError {
    color: #e9b5ab;
}

#loginFormMessage.formMessageSuccess {
    color: #a9b98a;
}



/* ---------- Login Sequence ---------- */

.loginSequence {
    display: grid;
    text-align: center;
    align-content: center;
    gap: 6px;
    min-height: 70px;
    margin: 12px 0 18px;
    padding: 14px 16px;
    border: 1px solid rgba(184, 175, 162, 0.18);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(16, 20, 18, 0.78), rgba(13, 17, 16, 0.92));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 10px 24px rgba(0, 0, 0, 0.28);
}

    .loginSequence[hidden] {
        display: none;
    }

.loginSequencePrimary {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #effcff;
}

.loginSequenceSecondary {
    margin: 0;
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(213, 185, 137, 0.78);
}

.loginSequencePrimary,
.loginSequenceSecondary {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.28s ease, transform 0.28s ease, color 0.28s ease, text-shadow 0.28s ease;
}

.loginSequenceTextVisible {
    opacity: 1;
    transform: translateY(0);
}

.loginPage.loginGranted .loginSequencePrimary {
    color: #effcff;
    text-shadow: 0 0 10px rgba(127, 178, 188, 0.55), 0 0 24px rgba(77, 160, 180, 0.28);
}

.loginPage.loginGranted .loginSequenceSecondary {
    color: rgba(200, 219, 167, 0.86);
}

/* ---------- Access Granted State ---------- */

.loginPage.loginGranted .loginAccessPanel {
    border-color: rgba(128, 167, 66, 0.72);
    box-shadow:
        0 32px 90px rgba(0, 0, 0, 0.78),
        0 0 18px rgba(77, 159, 115, 0.28),
        0 0 42px rgba(87, 143, 91, 0.16),
        0 0 0 1px rgba(151, 188, 88, 0.10) inset;
    animation: loginGrantedPulse 0.75s ease;
}

.loginPage.loginGranted .loginClassificationMark {
    background: #8caa5a;
    box-shadow:
        0 0 8px rgba(142, 189, 72, 0.95),
        0 0 22px rgba(128, 170, 60, 0.65);
}

.loginPage.loginGranted .loginSubmitButton {
    border-color: rgba(77, 160, 180, 0.70);
    background: linear-gradient(135deg, rgba(23, 61, 75, 0.96), rgba(23, 61, 75, 0.98));
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.32),
        0 0 24px rgba(77, 160, 180, 0.22);
}

@keyframes loginGrantedPulse {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.012);
    }

    100% {
        transform: scale(1);
    }
}





/* ---------- Authenticate Button ---------- */

.loginSubmitButton {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 13px 16px;
    border: 1px solid rgba(77, 160, 180, 0.50);
    border-radius: 8px;
    color: #effcff;
    background:
        linear-gradient(135deg, rgba(23, 61, 75, 0.94), rgba(23, 61, 75, 0.96));
    font: inherit;
    font-size: 0.82rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.24),
        0 0 18px rgba(46, 113, 133, 0.08);
    transition: transform 0.13s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.loginSubmitButton:hover {
    border-color: rgba(77, 160, 180, 0.76);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.32),
        0 0 24px rgba(46, 113, 133, 0.14);
    transform: translateY(-1px);
}

.loginSubmitButton:active {
    transform: scale(0.985);
}

.loginSubmitButton:disabled {
    cursor: wait;
    opacity: 0.72;
    transform: none;
}


/* Subtle light movement across the authentication button. */
/* ---------- Authentication Button Light Effect ---------- */

.loginSubmitButton::after {
    content: "";
    position: absolute;
    top: 0;
    left: -45%;
    width: 35%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
    transition: left 0.5s ease, opacity 0.25s ease;
}

.loginSubmitButton:hover:not(:disabled)::after {
    left: 115%;
    opacity: 1;
}

.loginPage:not(.loginGranted) .loginSubmitButton:disabled::after {
    opacity: 1;
    animation: loginButtonScan 1.4s linear infinite;
}


.loginPage:not(.loginGranted) .loginSubmitButton:disabled::after {
    opacity: 1;
    animation: loginButtonScan 1.4s linear infinite;
}

.loginPage:not(.loginGranted) .loginSubmitButton:disabled {
    cursor: wait;
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.32),
        0 0 16px rgba(23, 52, 58, 0.18);
}

@keyframes loginButtonScan {
    from {
        left: -45%;
    }

    to {
        left: 115%;
    }
}



/* ---------- Login Exit Transition ---------- */
/* ---------- Login Exit Transition ---------- */

.loginAccessShell::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    background: #000;
    transition: opacity 0.9s ease;
}

.loginPage.loginLeaving .loginAccessShell::after {
    opacity: 1;
}

.loginPage.loginLeaving .loginAccessPanel {
    transform: scale(1.01);
    filter: brightness(1.08);
    transition: transform 0.75s ease, filter 0.75s ease;
}







/* ---------- Security Footer ---------- */

.loginSecurityFooter {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 25px;
    padding-top: 18px;
    border-top: 1px solid rgba(158, 170, 145, 0.11);
    color: #718064;
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.loginSecurityIndicator {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #667a4b;
    box-shadow: 0 0 8px rgba(102, 122, 75, 0.65);
}


/* ---------- Animation ---------- */

@keyframes loginAmbientPulse {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.96); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes loginScan {
    from { top: -25%; }
    to { top: 115%; }
}

@keyframes loginStatusPulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}


/* Respect users who request reduced interface motion. */
@media (prefers-reduced-motion: reduce) {
    .loginPage::after,
    .loginAccessPanel::after,
    .loginClassificationMark {
        animation: none;
    }

    .loginSubmitButton,
    .loginSubmitButton::after {
        transition: none;
    }
}


/* ---------- Small Screens ---------- */

@media (max-width: 560px) {
    .loginAccessShell {
        padding: 18px;
    }

    .loginAccessPanel {
        padding: 26px 22px;
    }
}




/*   BACKGROUND Images for the login screen  */
@media (max-width: 1100px) {
    .loginPage {
        background:
            linear-gradient(rgba(3, 3, 3, 0.50), rgba(3, 3, 3, 0.68)),
            url("../../images/backgrounds/login-background-tablet.png") center center / cover no-repeat fixed;
    }
}

@media (max-width: 600px) {
    .loginPage {
        background:
            linear-gradient(rgba(3, 3, 3, 0.52), rgba(3, 3, 3, 0.72)),
            url("../../images/backgrounds/login-background-mobile.png") center center / cover no-repeat fixed;
    }
}