/* The public welcome page (Views/Home/Index.cshtml, js/landing.js).

   A layered landscape fills the page behind a plain sign-in card. The wide layers (mountains, forest, foreground)
   and the SVG layers (light trails, knight) share the artwork's 1672x941 canvas and are fitted to the same box the
   same way, cover and anchored bottom centre (object-fit: cover / preserveAspectRatio xMidYMax slice), so they stay
   aligned with each other at any window shape. Each layer box is a little wider than the page so the parallax never
   shows an edge. */

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../lib/plus-jakarta-sans/files/plus-jakarta-sans-latin-600-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../lib/plus-jakarta-sans/files/plus-jakarta-sans-latin-800-normal.woff2") format("woff2");
}

.landing-body {
    --landing-ink: #0b1a4a;
    --landing-muted: #3f4f72;
    --landing-card-bg: rgba(255, 255, 255, 0.72);
    --landing-card-border: rgba(255, 255, 255, 0.85);
    --landing-nav-bg: rgba(255, 255, 255, 0.5);
    /* How far up the page the knight reaches, so the main content stops above it: its top is 40% of the scene's
       height up from the bottom, and the scene is the page's height, or 941/1672 of its width on wide screens. */
    --landing-stage: max(calc(40svh + 2px), calc(22.6vw + 2px));
    margin: 0;
    background: #eaf3ff;
    color: var(--landing-ink);
    overflow-x: hidden;
}

[data-bs-theme="dark"] .landing-body {
    --landing-ink: #eef4ff;
    --landing-muted: #b8c7e6;
    --landing-card-bg: rgba(10, 22, 48, 0.68);
    --landing-card-border: rgba(148, 182, 255, 0.22);
    --landing-nav-bg: rgba(8, 18, 40, 0.55);
    background: #08142c;
}

.landing {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
}

/* ---- The scene (decoration only) ---------------------------------------------------------------------------- */

.landing-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.landing-sky {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 75%;
}

.landing-layer {
    position: absolute;
    inset: -16px -16px 0;
    will-change: transform;
}

.landing-art,
.landing-svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 100%;
    overflow: visible;
}

.landing-particles {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 62%;
}

/* Dark mode: the same daylight scene, dimmed toward the top so the text stays bright and readable. */
[data-bs-theme="dark"] .landing-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 14, 34, 0.86) 0%, rgba(6, 14, 34, 0.62) 45%, rgba(6, 14, 34, 0.18) 80%, rgba(6, 14, 34, 0.3) 100%);
}

/* Light trails: a wide soft glow under a thin bright core. The flowing highlight and sparks are animated. */
.trail path {
    fill: none;
    stroke-linecap: round;
}

.trail-glow {
    stroke-width: 14;
    opacity: 0.55;
    filter: url(#trail-blur);
}

.trail-core {
    stroke-width: 2.6;
    opacity: 1;
}

.trail-flow {
    stroke: #ffffff;
    stroke-width: 3.4;
    opacity: 0;
}

.trail-sky .trail-glow {
    stroke-width: 6;
    opacity: 0.35;
}

.trail-sky .trail-core {
    stroke-width: 1.2;
    opacity: 0.7;
}

.trail-orbit .trail-glow {
    stroke-width: 10;
    opacity: 0.5;
}

.trail-orbit .trail-core {
    stroke-width: 2;
    opacity: 0.9;
}

.sparks circle {
    fill: #ecfeff;
}

.knight-aura {
    opacity: 0.85;
}

/* ---- Navigation --------------------------------------------------------------------------------------------- */

.landing-nav {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem max(1rem, calc((100% - 74rem) / 2));
    background: var(--landing-nav-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.landing-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: "Plus Jakarta Sans", var(--bs-font-sans-serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--landing-ink);
    text-decoration: none;
}

.landing-brand img {
    width: 2.25rem;
    height: auto;
}

.landing-actions {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 2vw, 1.5rem);
}

.landing-link {
    color: var(--landing-ink);
    text-decoration: none;
    font-weight: 500;
    opacity: 0.85;
}

.landing-link:hover,
.landing-link:focus-visible {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.landing-nav-login {
    padding: 0.35rem 1.35rem;
    border-radius: 0.6rem;
    font-weight: 600;
}

.landing-theme {
    color: var(--landing-ink);
}

/* ---- Headline and card -------------------------------------------------------------------------------------- */

.landing-main {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(1rem, 3.4vh, 2.5rem) 1rem var(--landing-stage);
    text-align: center;
}

.landing-eyebrow {
    margin: 0 0 clamp(0.25rem, 1.2vh, 0.75rem);
    font-size: clamp(0.7rem, 0.55rem + 0.35vw, 0.85rem);
    font-weight: 500;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--landing-muted);
    /* Letter spacing adds space after the last letter too; this keeps the line centred. */
    padding-left: 0.45em;
}

.landing-title {
    margin: 0;
    font-family: "Plus Jakarta Sans", var(--bs-font-sans-serif);
    font-size: clamp(2.5rem, min(4.9vw, 8.3vh), 5.5rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--landing-ink);
}

.landing-title-accent {
    background: linear-gradient(90deg, #0f2a7a 0%, #1d4ed8 34%, #2563eb 62%, #1e88f0 82%, #0ea5e9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Room for the descender inside the clipped background. */
    padding-bottom: 0.08em;
}

[data-bs-theme="dark"] .landing-title-accent {
    background-image: linear-gradient(90deg, #93c5fd 0%, #60a5fa 34%, #38bdf8 62%, #22d3ee 84%, #5eead4 100%);
}

.landing-tagline {
    margin: clamp(0.25rem, 1vh, 0.6rem) 0 0;
    font-size: clamp(1.1rem, 0.75rem + 0.95vw, 1.65rem);
    color: var(--landing-muted);
}

.landing-card {
    width: min(100%, 31rem);
    margin-top: clamp(0.9rem, 2.8vh, 1.75rem);
    padding: clamp(0.9rem, 2vh, 1.25rem) clamp(1.25rem, 3.5vw, 2.25rem);
    background: var(--landing-card-bg);
    border: 1px solid var(--landing-card-border);
    border-radius: 1.4rem;
    box-shadow: 0 24px 48px -28px rgba(30, 64, 175, 0.45), 0 2px 6px rgba(15, 23, 42, 0.05);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}

.landing-card-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin-bottom: 0.5rem;
    font-family: "Plus Jakarta Sans", var(--bs-font-sans-serif);
    font-size: 1.3rem;
    font-weight: 800;
}

.landing-card-brand img {
    width: 2.25rem;
    height: auto;
}

.landing-card-title {
    margin: 0 0 0.2rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--landing-ink);
}

.landing-card-text {
    margin: 0 0 0.9rem;
    color: var(--landing-muted);
}

.landing-login {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 2.75rem;
    border: 0;
    border-radius: 0.8rem;
    background: linear-gradient(180deg, #2f6df6 0%, #1d4ed8 100%);
    box-shadow: 0 10px 22px -12px rgba(37, 99, 235, 0.8);
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.landing-login:hover,
.landing-login:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 16px 28px -14px rgba(37, 99, 235, 0.85);
}

.landing-login:active {
    transform: translateY(0);
}

.landing-card-note {
    margin: 0.8rem 0 0;
    font-size: 0.9rem;
    color: var(--landing-muted);
}

.landing-card-note a {
    font-weight: 500;
}

/* A small frosted pill: readable over the pale mist and the blue ribbons alike. */
.landing-footer {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 0.6rem;
    transform: translateX(-50%);
    max-width: calc(100% - 2rem);
    padding: 0.15rem 0.8rem;
    border-radius: 999px;
    background: var(--landing-nav-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: 0.75rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--landing-muted);
}

/* ---- Entrance --------------------------------------------------------------------------------------------- */

/* js/landing.js fades these in. If it never runs, they appear on their own after a moment. */
.landing-motion [data-intro],
.landing-motion .landing-layer,
.landing-motion .landing-particles {
    opacity: 0;
    animation: landing-show 0.6s ease 2.5s forwards;
}

/* Once the script is running it brings them in itself. */
.landing-motion.landing-js [data-intro],
.landing-motion.landing-js .landing-layer,
.landing-motion.landing-js .landing-particles {
    animation: none;
}

@keyframes landing-show {
    to {
        opacity: 1;
    }
}

/* ---- Smaller screens --------------------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .landing-body {
        --landing-stage: max(34svh, 30vw);
    }
}

/* Phones and portrait tablets: the landscape sits at the bottom of the page, under the text. */
@media (max-aspect-ratio: 1/1) {
    .landing-body {
        --landing-stage: max(30svh, 58vw);
    }

    .landing-title {
        font-size: clamp(2.4rem, 8.6vw, 4.75rem);
    }

    .landing-layer {
        top: auto;
        height: min(calc(100% - 4rem), 132vw);
    }

    .landing-particles {
        height: min(100%, 120vw);
    }
}

@media (max-width: 575.98px) {
    .landing-link {
        display: none;
    }

    /* One line on a phone. */
    .landing-eyebrow {
        font-size: 0.66rem;
        letter-spacing: 0.24em;
        padding-left: 0.24em;
    }

    .landing-brand span {
        font-size: 1.1rem;
    }

    .landing-card {
        border-radius: 1.1rem;
    }

    .landing-login {
        width: 100%;
        justify-content: center;
    }
}

/* Less motion: everything simply shown, and the button doesn't move. */
@media (prefers-reduced-motion: reduce) {
    .landing-login {
        transition: none;
    }

    .landing-login:hover,
    .landing-login:focus-visible {
        transform: none;
    }
}