/* ==========================================================================
   Swiss Fleet — authentication stage
   --------------------------------------------------------------------------
   Loaded after site.css and effects.css, and only by _LoginLayout. This is the
   first screen anyone sees of the product, so it earns more than the console's
   restraint: a full-bleed navy stage, a drifting aurora, telemetry route lines
   that draw themselves, and a card that lifts off the background.

   Rules it keeps to:
     · every colour resolves through a brand token, so a tenant accent still
       tints the whole stage;
     · the navy stage stands in both themes (it is the brand), while the card
       follows the light/dark choice, so the theme toggle still does something;
     · every animation is decorative and switched off under reduced motion;
     · nothing here is required to read, fill in or submit the form.

     01  Stage
     02  Aurora, grid, routes, grain
     03  Layout overrides
     04  Pitch column
     05  Card
     06  Form polish inside the card
     07  Topline and foot
     08  Entrance choreography
     09  Responsive
     10  Motion preferences
   ========================================================================== */


/* ==========================================================================
   01  Stage
   ========================================================================== */

.sf-auth-body {
    /* The stage is the brand navy whatever the theme, so the selection,
       scrollbar and overscroll colours have to follow it rather than --c-bg. */
    background: var(--ink);
    overscroll-behavior: none;
}

/* Fixed rather than absolute: on a short phone viewport the form scrolls and
   the background should not scroll with it. */
.sf-auth__stage {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background:
        radial-gradient(1200px 760px at 14% 6%, color-mix(in srgb, var(--sf-accent) 26%, transparent), transparent 58%),
        radial-gradient(900px 620px at 88% 92%, color-mix(in srgb, var(--ink-3) 70%, transparent), transparent 62%),
        linear-gradient(158deg, var(--ink-2) 0%, var(--ink) 58%, #000c1f 100%);
    pointer-events: none;
}


/* ==========================================================================
   02  Aurora, grid, routes, grain
   ========================================================================== */

/* Three blurred blobs on long, offset drifts. The blur is what makes them read
   as light rather than as shapes, so the whole effect rests on one filter. */
.sf-auth__aurora {
    position: absolute;
    inset: -20%;
    filter: blur(70px);
    opacity: .62;
}

.sf-auth__aurora span {
    position: absolute;
    display: block;
    border-radius: 50%;
    mix-blend-mode: screen;
}

.sf-auth__aurora span:nth-child(1) {
    width: 46vw;
    height: 46vw;
    top: 4%;
    left: 2%;
    background: radial-gradient(circle, color-mix(in srgb, var(--sf-accent) 78%, transparent), transparent 66%);
    animation: sf-auth-drift-a 26s var(--ease-in-out, ease-in-out) infinite alternate;
}

.sf-auth__aurora span:nth-child(2) {
    width: 38vw;
    height: 38vw;
    top: 42%;
    left: 34%;
    background: radial-gradient(circle, color-mix(in srgb, var(--ink-3) 92%, transparent), transparent 66%);
    animation: sf-auth-drift-b 32s var(--ease-in-out, ease-in-out) infinite alternate;
}

.sf-auth__aurora span:nth-child(3) {
    width: 30vw;
    height: 30vw;
    top: 8%;
    right: 6%;
    background: radial-gradient(circle, color-mix(in srgb, var(--amber) 34%, transparent), transparent 68%);
    animation: sf-auth-drift-c 38s var(--ease-in-out, ease-in-out) infinite alternate;
}

@keyframes sf-auth-drift-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(9vw, 7vh, 0) scale(1.18); }
}

@keyframes sf-auth-drift-b {
    from { transform: translate3d(0, 0, 0) scale(1.1); }
    to   { transform: translate3d(-11vw, -6vh, 0) scale(.92); }
}

@keyframes sf-auth-drift-c {
    from { transform: translate3d(0, 0, 0) scale(.95); }
    to   { transform: translate3d(-6vw, 9vh, 0) scale(1.22); }
}

/* The map grid. The mask keeps it dense behind the pitch and gone behind the
   card, so the form never competes with it. */
.sf-auth__stage .sf-auth__grid {
    position: absolute;
    inset: -10%;
    background-image:
        linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(1100px 800px at 24% 40%, #000 12%, transparent 74%);
    -webkit-mask-image: radial-gradient(1100px 800px at 24% 40%, #000 12%, transparent 74%);
}

/* Telemetry traces. Each path is dashed and its offset animated, so the lines
   appear to travel the way a breadcrumb trail does on the live map. */
.sf-auth__routes {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
}

.sf-auth__routes path {
    fill: none;
    stroke: color-mix(in srgb, var(--sf-accent) 55%, transparent);
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-dasharray: 14 240;
    animation: sf-auth-trace 9s linear infinite;
}

.sf-auth__routes path:nth-child(2) {
    stroke: color-mix(in srgb, var(--text-on-navy) 34%, transparent);
    animation-duration: 13s;
    animation-delay: -4s;
}

.sf-auth__routes path:nth-child(3) {
    stroke: color-mix(in srgb, var(--amber) 48%, transparent);
    animation-duration: 16s;
    animation-delay: -9s;
}

.sf-auth__routes path:nth-child(4) {
    stroke: color-mix(in srgb, var(--sf-accent) 34%, transparent);
    animation-duration: 21s;
    animation-delay: -2s;
}

/* The faint full-length rail each trace runs along. */
.sf-auth__routes .sf-auth__rail {
    stroke: rgba(255, 255, 255, .07);
    stroke-width: 1;
    stroke-dasharray: none;
    animation: none;
}

@keyframes sf-auth-trace {
    from { stroke-dashoffset: 254; }
    to   { stroke-dashoffset: 0; }
}

/* A little grain so the large flat gradients do not band on cheap panels. */
.sf-auth__noise {
    position: absolute;
    inset: 0;
    opacity: .5;
    background-image: repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, .012) 0 1px,
        transparent 1px 3px);
}

/* A soft vignette pulls the eye to the middle of the screen. */
.sf-auth__stage::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(0, 6, 18, .62) 100%);
}


/* ==========================================================================
   03  Layout overrides
   ========================================================================== */

.sf-auth--hero {
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: stretch;
}

/* The stage now paints the whole page, so the aside drops its own background,
   border and centring in favour of a reading column. */
.sf-auth--hero .sf-auth__aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-5);
    background: none;
    border-right: 0;
    padding: var(--space-6) clamp(var(--space-5), 5vw, 72px);
    overflow: visible;
}

.sf-auth--hero .sf-auth__main {
    justify-content: center;
    padding: var(--space-5) clamp(var(--space-4), 4vw, 56px) var(--space-6);
}


/* ==========================================================================
   04  Pitch column
   ========================================================================== */

.sf-auth__pitch { max-width: 520px; }

.sf-auth__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 11px 5px 7px;
    border: 1px solid color-mix(in srgb, var(--sf-accent) 34%, transparent);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--sf-accent) 12%, transparent);
    color: color-mix(in srgb, var(--sf-accent) 60%, var(--text-on-navy));
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sf-auth__eyebrow .sf-auth__pulse {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sf-accent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--sf-accent) 70%, transparent);
    animation: sf-auth-pulse 2.4s var(--ease-out, ease-out) infinite;
}

@keyframes sf-auth-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sf-accent) 60%, transparent); }
    70%  { box-shadow: 0 0 0 9px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* The one piece of display type in the product. Two weights of the same line:
   the plain half states the scope, the gradient half states the promise. */
.sf-auth__display {
    margin: 0;
    font-size: clamp(34px, 4.6vw, 58px);
    line-height: 1.04;
    font-weight: 720;
    letter-spacing: -.035em;
    color: var(--text-on-navy);
    text-wrap: balance;
}

.sf-auth__display em {
    display: block;
    font-style: normal;
    background: linear-gradient(
        96deg,
        color-mix(in srgb, var(--sf-accent) 92%, white) 0%,
        var(--sf-accent) 38%,
        color-mix(in srgb, var(--amber) 76%, var(--sf-accent)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sf-auth--hero .sf-auth__pitch-text {
    max-width: 44ch;
    margin: var(--space-4) 0 0;
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.6;
    color: color-mix(in srgb, var(--text-on-navy-2) 92%, transparent);
}

/* --- the four capability lines ----------------------------------------- */

.sf-auth--hero .sf-auth__pitch-list {
    margin-top: var(--space-6);
    gap: var(--space-2);
}

.sf-auth--hero .sf-auth__pitch-list li {
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    color: var(--text-on-navy);
    transition:
        background var(--dur-mid, 180ms) var(--ease-out, ease),
        border-color var(--dur-mid, 180ms) var(--ease-out, ease),
        transform var(--dur-mid, 180ms) var(--ease-out, ease);
}

.sf-auth--hero .sf-auth__pitch-list li:hover {
    background: rgba(255, 255, 255, .045);
    border-color: var(--line-on-navy);
    transform: translateX(3px);
}

.sf-auth__feature-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius);
    border: 1px solid color-mix(in srgb, var(--tone, var(--sf-accent)) 38%, transparent);
    background: color-mix(in srgb, var(--tone, var(--sf-accent)) 17%, transparent);
    /* Mixed toward white rather than toward the on-navy grey: a 15%-opacity
       tone over navy is already dark, and a dim glyph on it reads as disabled. */
    color: color-mix(in srgb, var(--tone, var(--sf-accent)) 62%, white);
    font-size: 1.05rem;
    transition:
        transform var(--dur-mid, 180ms) var(--ease-spring, ease),
        background var(--dur-mid, 180ms) var(--ease-out, ease);
}

.sf-auth--hero .sf-auth__pitch-list li:hover .sf-auth__feature-icon {
    transform: translateY(-2px) scale(1.05);
    background: color-mix(in srgb, var(--tone, var(--sf-accent)) 24%, transparent);
}

.sf-auth__feature-text { display: grid; gap: 2px; min-width: 0; }

.sf-auth__feature-title {
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--text-on-navy);
}

.sf-auth__feature-sub {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: color-mix(in srgb, var(--text-on-navy-2) 86%, transparent);
}

/* --- the numbers strip -------------------------------------------------- */

.sf-auth__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line-on-navy);
}

.sf-auth__stat { display: grid; gap: 2px; }

.sf-auth__stat-value {
    font-family: var(--font-mono);
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text-on-navy);
    font-variant-numeric: tabular-nums;
}

.sf-auth__stat-label {
    font-size: var(--fs-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text-on-navy-2) 78%, transparent);
}


/* ==========================================================================
   05  Card
   ========================================================================== */

.sf-auth--hero .sf-auth__card {
    position: relative;
    max-width: 452px;
    padding: clamp(var(--space-5), 3vw, 34px);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--c-surface) 94%, transparent),
            color-mix(in srgb, var(--c-surface) 99%, transparent));
    box-shadow:
        0 40px 90px -30px rgba(0, 6, 20, .72),
        0 2px 0 0 rgba(255, 255, 255, .06) inset;
    backdrop-filter: blur(14px) saturate(115%);
    -webkit-backdrop-filter: blur(14px) saturate(115%);
}

.sf-auth--hero .sf-auth__card--wide { max-width: 640px; }

/* Gradient hairline along the top edge — the accent signature, drawn as a
   pseudo-element so the card keeps one honest border all the way round. */
.sf-auth--hero .sf-auth__card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 12%;
    right: 12%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--sf-accent) 60%, white) 28%,
        color-mix(in srgb, var(--sf-accent) 60%, white) 72%,
        transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--sf-accent) 60%, transparent);
}

/* The glow beneath. Sits outside the card so the blur is not clipped. */
.sf-auth--hero .sf-auth__card::after {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(60% 40% at 50% 0%, color-mix(in srgb, var(--sf-accent) 30%, transparent), transparent 70%);
    filter: blur(22px);
    opacity: .75;
    pointer-events: none;
}

.sf-auth--hero .sf-auth__header {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--c-border-faint);
}

.sf-auth--hero .sf-auth__title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
}

.sf-auth--hero .sf-auth__lead {
    margin-top: 6px;
    font-size: var(--fs-md);
    line-height: 1.55;
    color: var(--c-text-dim);
}

/* Optional seal in the card header: a small tinted mark that names the page. */
.sf-auth__seal {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--space-3);
    border-radius: 13px;
    border: 1px solid var(--c-accent-line);
    background: var(--c-accent-soft);
    color: var(--c-accent-text);
    font-size: 1.3rem;
    box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--sf-accent) 60%, transparent);
}


/* ==========================================================================
   06  Form polish inside the card
   ========================================================================== */

.sf-auth--hero .sf-form { display: grid; gap: var(--space-4); }

.sf-auth--hero .sf-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .01em;
}

.sf-auth--hero .sf-input {
    height: 46px;
    font-size: var(--fs-md);
    border-radius: var(--radius-lg);
    background: var(--c-surface-2);
    transition:
        border-color var(--dur-fast, 130ms) var(--ease-out, ease),
        box-shadow var(--dur-fast, 130ms) var(--ease-out, ease),
        background var(--dur-fast, 130ms) var(--ease-out, ease);
}

.sf-auth--hero .sf-input:focus,
.sf-auth--hero .sf-input:focus-visible {
    background: var(--c-surface);
    border-color: color-mix(in srgb, var(--sf-accent) 62%, transparent);
    box-shadow: 0 0 0 4px var(--c-accent-soft);
    outline: none;
}

/* The leading icon lights up with the field it belongs to. */
.sf-auth--hero .sf-input-group__icon {
    transition: color var(--dur-fast, 130ms) var(--ease-out, ease);
}

.sf-auth--hero .sf-input-group:focus-within .sf-input-group__icon {
    color: var(--c-accent-text);
}

.sf-auth--hero .sf-btn--block {
    height: 48px;
    margin-top: var(--space-1);
    font-size: var(--fs-md);
    font-weight: 620;
    letter-spacing: .01em;
    border-radius: var(--radius-lg);
    box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--sf-accent) 82%, transparent);
}

.sf-auth--hero .sf-btn--block:hover {
    box-shadow: 0 18px 38px -14px color-mix(in srgb, var(--sf-accent) 90%, transparent);
}

.sf-auth--hero .sf-auth__switch {
    margin-top: var(--space-2);
    padding-top: var(--space-4);
    font-size: var(--fs-base);
}

/* A quiet line of reassurance under the button. */
.sf-auth__assure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    color: var(--c-text-faint);
    font-size: var(--fs-xs);
}

.sf-auth__assure i { color: var(--c-accent-text); }


/* ==========================================================================
   07  Topline and foot
   ========================================================================== */

.sf-auth--hero .sf-auth__topline {
    max-width: 452px;
    margin-bottom: var(--space-5);
    padding-bottom: 0;
}

/* Brand and toggle sit on the navy, not on the card, so they take the
   on-navy text colours rather than the theme ones. */
.sf-auth--hero .sf-auth__topline .sf-brand__name { color: var(--text-on-navy); }
.sf-auth--hero .sf-auth__topline .sf-brand__product { color: var(--text-on-navy-2); }

.sf-brand--auth { text-decoration: none; }
.sf-brand--auth:hover .sf-brand__name { color: #fff; }

.sf-auth--hero .sf-auth__topline .sf-icon-btn {
    color: var(--text-on-navy-2);
    border-color: var(--line-on-navy);
    background: rgba(255, 255, 255, .04);
}

.sf-auth--hero .sf-auth__topline .sf-icon-btn:hover {
    color: var(--text-on-navy);
    background: rgba(255, 255, 255, .1);
}

.sf-auth--hero .sf-brand__mark {
    background: linear-gradient(140deg, var(--sf-accent), color-mix(in srgb, var(--sf-accent) 40%, var(--ink-3)));
    color: #fff;
    box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--sf-accent) 90%, transparent);
}

.sf-auth--hero .sf-auth__foot {
    justify-content: center;
    max-width: 452px;
    width: 100%;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    color: color-mix(in srgb, var(--text-on-navy-2) 66%, transparent);
}

.sf-auth--hero .sf-auth__foot a { color: inherit; text-decoration: none; }
.sf-auth--hero .sf-auth__foot a:hover { color: var(--text-on-navy); text-decoration: underline; }


/* ==========================================================================
   08  Entrance choreography
   ========================================================================== */

.sf-auth--hero .sf-auth__card,
.sf-auth--hero .sf-auth__topline,
.sf-auth--hero .sf-auth__foot,
.sf-auth--hero .sf-auth__pitch > * {
    animation: sf-auth-rise 640ms var(--ease-out, cubic-bezier(.22, 1, .36, 1)) both;
}

.sf-auth--hero .sf-auth__pitch > *:nth-child(1) { animation-delay: 40ms; }
.sf-auth--hero .sf-auth__pitch > *:nth-child(2) { animation-delay: 100ms; }
.sf-auth--hero .sf-auth__pitch > *:nth-child(3) { animation-delay: 160ms; }
.sf-auth--hero .sf-auth__pitch > *:nth-child(4) { animation-delay: 220ms; }
.sf-auth--hero .sf-auth__pitch > *:nth-child(5) { animation-delay: 280ms; }

.sf-auth--hero .sf-auth__topline { animation-delay: 60ms; }
.sf-auth--hero .sf-auth__card { animation-delay: 140ms; }
.sf-auth--hero .sf-auth__foot { animation-delay: 300ms; }

@keyframes sf-auth-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}


/* ==========================================================================
   09  Responsive
   ========================================================================== */

@media (max-width: 1199.98px) {
    .sf-auth--hero { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
    .sf-auth__display { font-size: clamp(30px, 4vw, 44px); }
    .sf-auth__stats { gap: var(--space-4); }
}

@media (max-width: 991.98px) {
    /* site.css hides the pitch column here, but the hero rules above are more
       specific and would override it — so the hide is restated. Below a tablet
       the form has to be the first thing on screen, not four feature cards.
       The stage keeps the drama on its own. */
    .sf-auth--hero .sf-auth__aside { display: none; }
    .sf-auth--hero { grid-template-columns: minmax(0, 1fr); }
    .sf-auth--hero .sf-auth__main { justify-content: center; }
    .sf-auth--hero .sf-auth__card,
    .sf-auth--hero .sf-auth__topline,
    .sf-auth--hero .sf-auth__foot { margin-inline: auto; }
}

@media (max-width: 575.98px) {
    .sf-auth--hero .sf-auth__card {
        padding: var(--space-4);
        border-radius: var(--radius-lg);
    }
    .sf-auth--hero .sf-auth__title { font-size: 22px; }
    .sf-auth__aurora { opacity: .5; }
}

/* Very short viewports: drop the decoration budget, keep the form reachable. */
@media (max-height: 620px) {
    .sf-auth--hero .sf-auth__main { justify-content: flex-start; }
    .sf-auth__seal { display: none; }
}


/* ==========================================================================
   10  Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .sf-auth__aurora span,
    .sf-auth__routes path,
    .sf-auth__eyebrow .sf-auth__pulse,
    .sf-auth--hero .sf-auth__card,
    .sf-auth--hero .sf-auth__topline,
    .sf-auth--hero .sf-auth__foot,
    .sf-auth--hero .sf-auth__pitch > * {
        animation: none !important;
    }

    .sf-auth--hero .sf-auth__card,
    .sf-auth--hero .sf-auth__topline,
    .sf-auth--hero .sf-auth__foot,
    .sf-auth--hero .sf-auth__pitch > * {
        opacity: 1;
        transform: none;
    }

    .sf-auth--hero .sf-auth__pitch-list li:hover { transform: none; }
    .sf-auth--hero .sf-auth__pitch-list li:hover .sf-auth__feature-icon { transform: none; }
}