/* Constellation login backdrop — scoped to the auth screen only.
   Ported from the React <ConstellationGrid> canvas component to vanilla JS
   (see static/js/constellation-grid.js) and restyled to sit behind the
   FTERO sign-in card. */

.constellation-page {
    --cg-accent: 56, 189, 248;      /* sky-cyan */
    --cg-ink: 226, 232, 240;        /* slate-200 */
}

/* Full-viewport canvas, painted behind the card. Never eats pointer events —
   the JS listens on window, so cursor shockwaves still work over the form. */
.constellation-canvas {
    position: fixed;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: #030407;
    cursor: crosshair;
}

/* The auth wrapper from style.css sets its own gradient background — kill it
   on this page so the canvas shows through, and lift the content above. */
.constellation-page .auth-wrapper {
    position: relative;
    z-index: 1;
    background: transparent;
    padding: 24px;
}

/* Re-skin the card as a dark glass panel over the animation. */
.constellation-page .auth-card {
    background: rgba(9, 12, 20, 0.72);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(var(--cg-accent), 0.16);
    border-radius: 16px;
    box-shadow:
        0 24px 70px -20px rgba(0, 0, 0, 0.75),
        0 0 0 1px rgba(255, 255, 255, 0.02) inset,
        0 1px 0 0 rgba(255, 255, 255, 0.05) inset;
    color: rgb(var(--cg-ink));
    animation: cg-card-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cg-card-in {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

/* ── Brand wordmark: piecewise clip-path fill (see js/brand-fill.js) ── */
.constellation-page .auth-card .brand-fill {
    position: relative;
    display: inline-block;
    margin: 10px 0 2px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
    font-weight: 800;
    font-size: 30px;
    line-height: 1;
    letter-spacing: 0.42em;
    text-indent: 0.42em;            /* balance the trailing letter-spacing */
    -webkit-user-select: none;
    user-select: none;
}

.constellation-page .auth-card .brand-fill__bg,
.constellation-page .auth-card .brand-fill__fill {
    display: block;
    white-space: pre;
}

/* Dim base layer that the bright layer wipes across. */
.constellation-page .auth-card .brand-fill__bg {
    color: rgba(var(--cg-ink), 0.18);
}

/* Bright layer, exact overlay, revealed left→right by the JS-driven clip-path. */
.constellation-page .auth-card .brand-fill__fill {
    position: absolute;
    inset: 0;
    color: #fff;
    text-shadow: 0 0 22px rgba(var(--cg-accent), 0.45);
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
    will-change: clip-path;
}

/* Settle glow once the fill completes. */
.constellation-page .auth-card .brand-fill.is-filled .brand-fill__fill {
    animation: cg-brand-settle 0.5s ease-out;
}
@keyframes cg-brand-settle {
    0%   { text-shadow: 0 0 34px rgba(var(--cg-accent), 0.8); }
    100% { text-shadow: 0 0 22px rgba(var(--cg-accent), 0.45); }
}

.constellation-page .auth-card .subtitle {
    color: rgba(var(--cg-ink), 0.6);
    font-size: 13px;
    letter-spacing: 0.02em;
    margin-bottom: 0;
}

.constellation-page .auth-card .bi-lightning-charge-fill {
    color: rgb(var(--cg-accent)) !important;
    filter: drop-shadow(0 0 14px rgba(var(--cg-accent), 0.55));
}

/* Form controls on dark glass */
.constellation-page .auth-card .form-label {
    color: rgba(var(--cg-ink), 0.72);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
}

.constellation-page .auth-card .form-control {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #fff;
    border-radius: 10px;
    padding: 10px 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.constellation-page .auth-card .form-control::placeholder { color: rgba(var(--cg-ink), 0.35); }
.constellation-page .auth-card .form-control:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(var(--cg-accent), 0.65);
    box-shadow: 0 0 0 3px rgba(var(--cg-accent), 0.18);
    color: #fff;
}

.constellation-page .auth-card .form-check-input {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
}
.constellation-page .auth-card .form-check-input:checked {
    background-color: rgb(var(--cg-accent));
    border-color: rgb(var(--cg-accent));
}
.constellation-page .auth-card .form-check-label { color: rgba(var(--cg-ink), 0.7); font-size: 13px; }

.constellation-page .auth-card .btn-primary {
    background: linear-gradient(180deg, rgb(56, 189, 248) 0%, rgb(14, 165, 233) 100%);
    border: none;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 11px 16px;
    color: #05141f;
    box-shadow: 0 10px 30px -10px rgba(var(--cg-accent), 0.6);
    transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.constellation-page .auth-card .btn-primary:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 16px 40px -12px rgba(var(--cg-accent), 0.75);
    color: #05141f;
}
.constellation-page .auth-card .btn-primary:active { transform: translateY(0); }

/* Cloudflare Turnstile sits under the sign-in button. */
.constellation-page .auth-card .turnstile-slot {
    min-height: 65px;
}
.constellation-page .auth-card .turnstile-slot .cf-turnstile {
    color-scheme: dark;
}

.constellation-page .auth-card .alert {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgb(var(--cg-ink));
    border-radius: 10px;
}
.constellation-page .auth-card .alert-danger { border-color: rgba(244, 63, 94, 0.4); }
.constellation-page .auth-card .alert-info { border-color: rgba(var(--cg-accent), 0.35); }

/* Honour reduced-motion: the JS also checks this and renders a still grid. */
@media (prefers-reduced-motion: reduce) {
    .constellation-page .auth-card { animation: none; }
}