.login-page {
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    user-select: none;
}

.login-page-left {
    background-image: url('/Images/6.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
}

.slideshow-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
}

.slide-active {
    z-index: 2;
    animation:
        slide-fade-in var(--fade-duration, 1s) ease-in-out forwards,
        slide-kenburns calc(var(--display-duration, 8s) + var(--fade-duration, 1s)) linear forwards;
}

.slide-active-static {
    z-index: 2;
    animation: slide-fade-in var(--fade-duration, 1s) ease-in-out forwards;
}

.slide-exiting {
    z-index: 1;
    /* Negative delay on kenburns resumes the zoom from where the active element
       left off (DisplaySeconds into a DisplaySeconds+FadeDuration animation),
       so the scale is continuous across the cross-fade. */
    animation:
        slide-fade-out var(--fade-duration, 1s) ease-in-out forwards,
        slide-kenburns calc(var(--display-duration, 8s) + var(--fade-duration, 1s)) linear forwards;
    animation-delay: 0s, calc(var(--display-duration, 8s) * -1);
}

@keyframes slide-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slide-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes slide-kenburns {
    from { transform: scale(var(--initial-zoom, 1.1)); }
    to   { transform: scale(var(--end-zoom, 1.0)); }
}

.slideshow-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
}

.overlay-logo-group {
    position: absolute;
    left: 0;
    right: 0;
    top: 67%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.overlay-cope-logo {
    max-width: 59%;
    height: auto;
    opacity: 0.9;
    display: block;
}

.overlay-tagline-container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Invisible copy of the white tagline — always in normal flow to hold the
   container height stable regardless of which version is currently visible. */
.overlay-tagline-spacer {
    max-width: 68%;
    height: auto;
    display: block;
    visibility: hidden;
    pointer-events: none;
}

/* Both tagline versions sit absolutely on top of the spacer and crossfade
   via a CSS transition. Neither is ever removed from the DOM, so the black
   version is preloaded as soon as Login.razor first renders. */
.overlay-tagline {
    position: absolute;
    max-width: 68%;
    height: auto;
    display: block;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity var(--fade-duration, 1s) ease-in-out;
}

.overlay-tagline-visible {
    opacity: 0.9;
}

.login-page-right {
    background-image: var(--background-gradient);
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 0;
    right: 0;
    width: 50%;
    min-width: 350px;
    height: 100%;
}

.codex-logo {
    font-family: Aleo, sans-serif;
    font-weight: 700;
    font-size: 26pt;
    color: var(--title-colour);
    margin-bottom: 10px;
}

.login-title {
    font-family: Aleo, sans-serif;
    font-weight: 700;
    font-size: 36pt;
    color: var(--title-colour);
    margin-bottom: 50px;
}

.login-box {
    display: flex;
    flex-direction: column;
    /*border: 1px grey solid;*/
    width: 50%;
    min-width: 200px;
    max-width: 340px;
    height: auto;
}

.username-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 22px;
}

.username-label {
    font-size: 12px;
    color: gray;
    margin-bottom: 3px;
}

.password-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

.password-label {
    font-size: 12px;
    color: gray;
    margin-bottom: 3px;
}

.sign-in-button {
    align-self: center;
    margin-bottom: 10px;
}

.forgotten-password-link {
    align-self: center;
    font-size: 12px;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.loading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.loading-label {
}

.loading-bar {
    width: 300px;
    height: 5px;
    background: rgba(0,64,128,0.6);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.loading-bar-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 20%, var(--hover-colour) 50%, transparent 80%);
    background-size: 200% 100%;
    animation: shimmer 1.8s ease-in-out infinite;
}

.bar-glow {
    box-shadow: 0 0 6px 1px color-mix(in srgb, var(--active-colour) 60%, transparent), 0 0 16px 2px color-mix(in srgb, var(--active-colour) 30%, transparent);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    50% {
        box-shadow: 0 0 10px 3px color-mix(in srgb, var(--active-colour) 80%, transparent), 0 0 28px 6px color-mix(in srgb, var(--active-colour) 45%, transparent);
    }
}

.logo-svg {
    overflow: visible;
}

.logo-svg-glow {
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.65))
            drop-shadow(0 0 18px rgba(192, 38, 211, 0.3));
    animation: logo-pulse 5.0s ease-in-out infinite;
}

@keyframes logo-pulse {
    50% {
        filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.95))
                drop-shadow(0 0 8px rgba(192, 38, 211, 0.55));
    }
}