/* ============================================================
   Scorpius sky — sign-in background
   Loaded after site.css, so these rules intentionally override
   the login page's original teal gradient. Remove the <link>
   in _LoginLayout.cshtml to fall back to it.
   ============================================================ */

.login-body {
    /* Two nebular washes over a deep-sky gradient. The warm one sits behind
       Antares so the star reads as the source of the glow. */
    background:
        radial-gradient(760px 520px at 32% 42%, rgba(196, 92, 48, 0.16), transparent 62%),
        radial-gradient(1100px 680px at 76% 14%, rgba(64, 96, 178, 0.26), transparent 64%),
        radial-gradient(820px 560px at 14% 88%, rgba(108, 62, 148, 0.20), transparent 66%),
        linear-gradient(163deg, #04070f 0%, #081127 42%, #0b1a3c 68%, #060d1e 100%);
    background-color: #04070f;
}

/* The original decorative circles become the Milky Way band Scorpius lies in. */
.login-body::before {
    width: 150vw;
    height: 44vh;
    top: 26%;
    right: -25vw;
    border-radius: 50%;
    background: linear-gradient(93deg, transparent 0%, rgba(150, 176, 226, 0.10) 28%, rgba(206, 186, 236, 0.13) 52%, rgba(150, 176, 226, 0.09) 74%, transparent 100%);
    filter: blur(46px);
    transform: rotate(-19deg);
    pointer-events: none;
}

.login-body::after {
    width: 42vw;
    height: 42vw;
    bottom: -14vw;
    left: -12vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(94, 132, 210, 0.13), transparent 68%);
    filter: blur(24px);
    pointer-events: none;
}

/* ---- Sky canvas ---------------------------------------------------- */

.sky {
    position: fixed;
    inset: 0;
    z-index: 0;
    /* Transparent to the form; individual stars opt back in below. */
    pointer-events: none;
    overflow: hidden;
}

.sky-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.sky-layer {
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

/* ---- Figure lines -------------------------------------------------- */

.sky-line {
    fill: none;
    stroke: url(#skyLineFill);
    stroke-width: 1.15;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* pathLength="1" on the element normalises this regardless of real length. */
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: skyDraw 2.6s cubic-bezier(0.65, 0, 0.35, 1) 0.35s forwards;
}

/* The three claw lines radiating from sigma, as drawn in the logo. */
.sky-line--fan {
    stroke-width: 1.25;
    animation-duration: 2.2s;
    animation-delay: 0.8s;
}

.sky-line--body {
    stroke-width: 1.35;
    animation-duration: 3.4s;
    animation-delay: 0.9s;
}

@keyframes skyDraw {
    to { stroke-dashoffset: 0; }
}

/* ---- Stars --------------------------------------------------------- */

.sky-star {
    /* Scale/ripple transforms need the star's own box, not the SVG root. */
    transform-box: fill-box;
    transform-origin: center;
}

.sky-core {
    /* Rays are drawn as a unit glint centred on 0,0; the parent .sky-mount holds
       the placing transform, so this transform is free to animate.
       fill-box is required — without it the rotation origin would resolve against
       the whole viewBox and fling the star across the screen. */
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0.9;
    animation: skyTwinkle 5.5s ease-in-out infinite;
    transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 260ms ease;
}

.sky-glow {
    transform-box: fill-box;
    transform-origin: center;
    animation: skyBreathe 6.5s ease-in-out infinite;
}

/* Staggered so the field doesn't pulse in unison. */
.sky-star:nth-child(3n)   .sky-core { animation-delay: -1.4s; animation-duration: 6.4s; }
.sky-star:nth-child(3n+1) .sky-core { animation-delay: -3.1s; animation-duration: 4.9s; }
.sky-star:nth-child(4n)   .sky-core { animation-delay: -2.2s; animation-duration: 7.1s; }
.sky-star:nth-child(3n)   .sky-glow { animation-delay: -2.6s; }
.sky-star:nth-child(4n+1) .sky-glow { animation-delay: -4.3s; }

/* A twinkle is the rays flaring and shrinking, not just a fade. */
@keyframes skyTwinkle {
    0%, 100% { opacity: 0.6;  transform: scale(0.82) rotate(0deg); }
    30%      { opacity: 1;    transform: scale(1.18) rotate(7deg); }
    55%      { opacity: 0.74; transform: scale(0.94) rotate(-4deg); }
    78%      { opacity: 0.95; transform: scale(1.06) rotate(2deg); }
}

@keyframes skyBreathe {
    0%, 100% { opacity: 0.65; transform: scale(0.9); }
    50%      { opacity: 1;    transform: scale(1.1); }
}

/* Antares — the scorpion's heart. Always the brightest thing on the page. */
.sky-star--antares .sky-core {
    opacity: 1;
    animation: skyAntares 4.2s ease-in-out infinite;
}

@keyframes skyAntares {
    0%, 100% { opacity: 0.95; transform: scale(0.97) rotate(0deg); }
    50%      { opacity: 1;    transform: scale(1.12) rotate(5deg); }
}

.sky-star--antares .sky-label {
    /* Named permanently — it's the anchor of the whole figure. */
    opacity: 0.72;
    font-weight: 600;
    letter-spacing: 0.06em;
}

/* ---- Hover: the star wrinkles and sends out ripples ----------------- */

.sky-hit {
    fill: transparent;
    pointer-events: auto;
    cursor: crosshair;
}

.sky-ripple {
    fill: none;
    stroke: rgba(255, 226, 170, 0.75);
    stroke-width: 1.1;
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
}

.sky-star:hover .sky-ripple {
    animation: skyRipple 1.5s cubic-bezier(0.16, 0.84, 0.44, 1) infinite;
}

.sky-star:hover .sky-ripple--2 {
    animation-delay: 0.5s;
}

.sky-star:hover .sky-core {
    transform: scale(1.5);
    opacity: 1;
    animation: skyWrinkle 1.5s ease-in-out infinite;
}

.sky-star--antares:hover .sky-core {
    transform: scale(1.28);
}

@keyframes skyRipple {
    0%   { transform: scale(1);   opacity: 0.7; stroke-width: 1.4; }
    70%  { opacity: 0.12; }
    100% { transform: scale(4.6); opacity: 0;   stroke-width: 0.5; }
}

/* The "wrinkle" itself: a fast, tight shimmer on top of the scale-up. */
@keyframes skyWrinkle {
    0%, 100% { transform: scale(1.5)  rotate(0deg); }
    25%      { transform: scale(1.62) rotate(-4deg); }
    50%      { transform: scale(1.44) rotate(3deg); }
    75%      { transform: scale(1.58) rotate(-2deg); }
}

/* ---- Star names ---------------------------------------------------- */

.sky-label {
    fill: rgba(246, 226, 188, 0.92);
    font-family: 'Cairo', system-ui, sans-serif;
    font-size: 11px;
    text-anchor: middle;
    direction: ltr;               /* keeps Greek/Latin names LTR inside the RTL page */
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
    paint-order: stroke;
    stroke: rgba(4, 7, 15, 0.75);
    stroke-width: 2.5px;
    stroke-linejoin: round;
}

.sky-star:hover .sky-label {
    opacity: 1;
}

/* ---- Ambient field stars (built in login-sky.js) -------------------- */

.dust-star {
    fill: #dce6ff;
    opacity: 0.5;
    transform-box: fill-box;
    transform-origin: center;
    animation: skyTwinkle 6s ease-in-out infinite;
}

/* ---- Card, lifted to read against the night sky --------------------- */

.login-card {
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(226, 190, 124, 0.22);
    box-shadow:
        0 28px 70px rgba(2, 5, 14, 0.62),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 0 46px rgba(96, 132, 210, 0.10);
}

.login-logo {
    box-shadow:
        0 12px 34px rgba(2, 5, 14, 0.5),
        0 0 0 1px rgba(226, 190, 124, 0.28);
}

/* ---- reCAPTCHA ------------------------------------------------------- */

.recaptcha-wrap {
    display: flex;
    justify-content: center;
}

/* The widget is a fixed 304px iframe. The card's inner width drops below that
   on small phones, so scale it down rather than let it overflow the card. */
@media (max-width: 420px) {
    .recaptcha-wrap {
        transform: scale(0.86);
        transform-origin: center;
        /* Reclaim the space the scale leaves behind. */
        margin-bottom: -0.5rem;
    }
}

/* ---- Back to the landing page --------------------------------------- */

.btn-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.65rem 1rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #475569;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    text-decoration: none;
    transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, transform 180ms ease;
}

.btn-home:hover,
.btn-home:focus {
    color: var(--primary-dark);
    background: var(--primary-bg);
    border-color: rgba(13, 148, 136, 0.35);
    text-decoration: none;
    transform: translateY(-1px);
}

.btn-home:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.25);
}

/* ---- Motion and small screens --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .sky-line {
        animation: none;
        stroke-dashoffset: 0;
    }
    .sky-core,
    .sky-glow,
    .dust-star,
    .sky-star--antares .sky-core {
        animation: none;
    }
    .sky-star:hover .sky-core {
        animation: none;
        transform: scale(1.4);
    }
    .sky-star:hover .sky-ripple {
        animation-iteration-count: 1;
    }
    .sky-layer {
        transition: none;
    }
}

@media (max-width: 768px) {
    /* Labels and hover are pointer affordances; on touch they only add noise. */
    .sky-label { display: none; }
    .sky-star--antares .sky-label { display: block; opacity: 0.6; font-size: 13px; }
    .sky-line { stroke-width: 1.4; }
}