/* login.css — the sign-in page: a landscape of what we build fills the page, in silhouette
   layers that scroll at their own speeds; the form floats on it. login_horizon.js sets the
   colours (--sky-*, --c1 to --c5, --cloud), --night, --stars, --glint, --low, the weather's --veil,
   --fog and --aurora, and lamps-on, is-dark, is-raining, flashing and energize on #horizon. */

.ceg-logo {
    display: inline-flex;
    gap: var(--logo-gap, 4px);
}
.ceg-logo span {
    width: var(--logo-size, 40px);
    height: var(--logo-size, 40px);
    display: grid;
    place-items: center;
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: calc(var(--logo-size, 40px) * 0.6);
    font-weight: 700;
    line-height: 1;
    color: var(--logo-fg, #fff);
    background: var(--logo-bg, #0f172a);
}

.lv-horizon {
    --sky-top: #4a9df5;
    --sky-mid: #8cc4ff;
    --sky-bot: #d9eeff;
    --c1: #a7c9e8; --c2: #86b0d6; --c3: #6497b8; --c4: #3f7a86; --c5: #255a5e;
    --cloud: #fff;
    --night: 0;
    --glint: 0.5;
    --low: 0;
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 45%, var(--sky-bot) 70%);
}

/* ---- the scenery ----------------------------------------------------- */
.h-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.h-scroll {
    animation: h-scroll linear infinite;
    will-change: transform;
}
@keyframes h-scroll { to { transform: translateX(-3200px); } }
.h-l1 { color: var(--c1); } .h-l1 .h-scroll { animation-duration: 900s; }
.h-lc { color: var(--cloud); opacity: calc(0.9 - 0.55 * var(--night)); } .h-lc .h-scroll { animation-duration: 600s; }
.h-l2 { color: var(--c2); } .h-l2 .h-scroll { animation-duration: 420s; }
.h-l3 { color: var(--c3); } .h-l3 .h-scroll { animation-duration: 240s; }
.h-l4 { color: var(--c4); } .h-l4 .h-scroll { animation-duration: 140s; }
.h-l5 { color: var(--c5); } .h-l5 .h-scroll { animation-duration: 75s; }
.sil { fill: currentColor; }
.sil .lattice,
.sil .fence,
.sil .post,
.sil .rail { fill: none; stroke: currentColor; stroke-width: 2.4; }
.sil .lattice.thick { stroke-width: 4; }
.sil .wire { fill: none; stroke: currentColor; stroke-width: 1.2; }
.h-l5 .sil .post { stroke-width: 6; }
.h-l5 .sil .rail { stroke-width: 3.5; }
.h-l5 .sil path:nth-child(2) { fill: none; stroke: currentColor; stroke-width: 2.5; }
.blades { animation: h-spin 6s linear infinite; }
@keyframes h-spin { to { transform: rotate(360deg); } }

.h-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    border-radius: 50%;
    opacity: var(--stars, var(--night));
}
.h-sun,
.h-moon {
    position: absolute;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border-radius: 50%;
    transition: opacity 1s;
}
.h-sun {
    background: radial-gradient(circle, #fffbe6 0 40%, #ffe08a 70%);
    box-shadow: 0 0 calc(60px + 80px * var(--low)) calc(14px + 30px * var(--low)) rgba(255, 196, 120, calc(0.35 + 0.35 * var(--low)));
}
.h-moon {
    overflow: visible;
    filter: drop-shadow(0 0 12px rgba(241, 243, 245, 0.45));
}
.moon-dark { fill: rgba(220, 228, 255, 0.08); }
.moon-lit { fill: #f1f3f5; }

/* the lights: current along the lines, windows, lamps, tower and turbine lights */
.lit { pointer-events: none; }
.glint {
    fill: none;
    stroke: #fff1b8;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 2 46;
    opacity: calc(0.35 + 0.4 * var(--night));
    filter: drop-shadow(0 0 3px #ffd43b);
    animation: h-flow 1.6s linear infinite;
}
.glint-near { stroke-dasharray: 2 34; animation-duration: 1.2s; }
@keyframes h-flow { to { stroke-dashoffset: -48; } }
.aviation {
    fill: #ff4d4d;
    opacity: var(--night);
    animation: h-blink 2.4s steps(2) infinite;
}
@keyframes h-blink { 50% { fill: transparent; } }
.yard { fill: #fff3bf; opacity: var(--night); filter: drop-shadow(0 0 6px #fff3bf); }
.bess-led { fill: #69db7c; animation: h-blink 1.8s steps(2) infinite; }
.pv-edge { fill: none; stroke: #fff; stroke-width: 1.6; opacity: var(--glint); }
.win { fill: #ffd27a; opacity: 0; transition: opacity 0.8s; }
.win.on { opacity: 1; }
.lamp { fill: currentColor; transition: fill 0.8s; }
.lamp-glow { display: none; }
.lamps-on .lamp { fill: #fff3bf; filter: drop-shadow(0 0 5px #ffe8a3) drop-shadow(0 0 12px rgba(255, 220, 140, 0.6)); }

/* ---- the page over the scenery --------------------------------------- */
.h-brand {
    position: absolute;
    top: 28px;
    left: 28px;
    z-index: 2;
}
.h-brand .ceg-logo {
    --logo-size: 40px;
    --logo-bg: #fff;
    --logo-fg: #1d2650;
    filter: drop-shadow(0 4px 14px rgba(10, 14, 40, 0.25));
}
.h-ui {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 96px 16px 140px;
}
@media (min-width: 960px) {
    .h-ui {
        align-items: flex-end;
        justify-content: flex-start;
        padding: 16vh 9vw 140px;
    }
}
.lv-horizon #login-form,
.lv-horizon .acct-dev {
    max-width: 370px;
}
.lv-horizon #login-form {
    gap: 15px;
    padding: 28px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(10, 14, 40, 0.28);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
}
.lv-horizon .acct-title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1d2650;
}
.lv-horizon .acct-input {
    padding: 10px 13px;
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(29, 38, 80, 0.18);
    border-radius: 11px;
}
.lv-horizon .acct-input:focus {
    border-color: #4c5fd5;
    box-shadow: 0 0 0 4px rgba(76, 95, 213, 0.16);
}
.lv-horizon .acct-check input { accent-color: #4c5fd5; }
.lv-horizon .acct-button {
    padding: 11px;
    background: #1d2650;
    border-radius: 11px;
    transition: background-color 0.15s, transform 0.15s;
}
.lv-horizon .acct-button:hover {
    background: #4c5fd5;
    transform: translateY(-1px);
}
.lv-horizon .acct-links a { color: #4c5fd5; }
.lv-horizon .acct-dev { border-radius: 16px; }

/* after dark the card is dark glass */
.is-dark #login-form {
    background: rgba(14, 20, 50, 0.72);
    border-color: rgba(255, 255, 255, 0.12);
}
.is-dark .acct-title { color: #f1f3ff; }
.is-dark #login-form .acct-text,
.is-dark #login-form .acct-check,
.is-dark #login-form .acct-label { color: #b8bfe6; }
.is-dark #login-form .acct-hint { color: #6d76a8; }
.is-dark #login-form .acct-input {
    color: #f1f3ff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
}
.is-dark #login-form .acct-input:focus { border-color: #8d9bff; box-shadow: 0 0 0 4px rgba(141, 155, 255, 0.2); }
.is-dark #login-form .acct-button { background: #5c6ff0; }
.is-dark #login-form .acct-button:hover { background: #7584ff; }
.is-dark #login-form .acct-links a { color: #a9b4ff; }

.h-status {
    position: absolute;
    left: 28px;
    bottom: 22px;
    z-index: 2;
    margin: 0;
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* ---- weather (horizon_sky.js) ---------------------------------------- */
.h-overcast {
    position: absolute;
    inset: 0 0 30% 0;
    pointer-events: none;
    opacity: calc(var(--veil, 0) * 0.85);
    background:
        radial-gradient(ellipse 40% 18% at 15% 22%, var(--cloud) 0 40%, transparent 70%),
        radial-gradient(ellipse 45% 20% at 55% 14%, var(--cloud) 0 40%, transparent 70%),
        radial-gradient(ellipse 40% 16% at 88% 28%, var(--cloud) 0 40%, transparent 70%),
        radial-gradient(ellipse 50% 18% at 35% 42%, var(--cloud) 0 35%, transparent 70%),
        radial-gradient(ellipse 45% 16% at 75% 50%, var(--cloud) 0 35%, transparent 70%),
        linear-gradient(var(--cloud), transparent);
    animation: h-deck 90s ease-in-out infinite alternate;
}
@keyframes h-deck { to { background-position: 60px 0, -80px 0, 40px 0, -50px 0, 70px 0, 0 0; } }
.h-fog {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    opacity: var(--fog, 0);
    background: linear-gradient(transparent, color-mix(in srgb, var(--sky-bot) 70%, #fff) 50%, transparent);
}
.h-fog-far { bottom: 22%; height: 22%; }
.h-fog-near { bottom: 8%; height: 20%; opacity: calc(var(--fog, 0) * 0.8); }
.h-aurora {
    position: absolute;
    inset: 0 0 35% 0;
    pointer-events: none;
    opacity: var(--aurora, 0);
    mix-blend-mode: screen;
}
.h-aurora i {
    position: absolute;
    top: 8%;
    width: 44%;
    height: 52%;
    background:
        repeating-linear-gradient(90deg, transparent 0 9px, rgba(4, 8, 30, 0.6) 9px 15px, transparent 15px 22px, rgba(4, 8, 30, 0.3) 22px 26px),
        linear-gradient(180deg, transparent, rgba(150, 110, 255, 0.3) 25%, rgba(110, 255, 185, 0.55) 70%, transparent);
    filter: blur(3.5px);
    opacity: 0.8;
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 55%, #000 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 55%, #000 35%, transparent 100%);
    animation: h-sway 14s ease-in-out infinite alternate;
}
.h-aurora i:nth-child(1) { left: 2%; transform: skewX(-18deg); }
.h-aurora i:nth-child(2) { left: 30%; top: 2%; animation-duration: 19s; animation-delay: -6s; }
.h-aurora i:nth-child(3) { left: 56%; transform: skewX(14deg); animation-duration: 23s; animation-delay: -11s; }
@keyframes h-sway {
    50% { translate: 40px 10px; scale: 1.08 0.92; }
    100% { translate: -30px -6px; scale: 0.95 1.06; }
}
.h-rain {
    position: absolute;
    inset: 0;
    display: none;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(104deg, transparent 0 22px, rgba(210, 220, 240, 0.32) 22px 23px),
        repeating-linear-gradient(100deg, transparent 0 37px, rgba(210, 220, 240, 0.22) 37px 38px);
    background-size: 100% 140px, 100% 230px;
    animation: h-rain 0.5s linear infinite;
}
.is-raining .h-rain { display: block; }
@keyframes h-rain { to { background-position: -30px 140px, -40px 230px; } }
.h-flash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: #e9efff;
    opacity: 0;
}
.flashing .h-flash { opacity: 0.4; }
.h-bolt path {
    fill: none;
    stroke: #f8faff;
    stroke-width: 3;
    stroke-linejoin: round;
    opacity: 0;
    filter: drop-shadow(0 0 8px #b8c8ff);
}
.flashing .h-bolt path { opacity: 1; }

/* ---- the sign-in worked: a surge down every line (login_horizon.js) --- */
.h-surge {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 240, 180, 0.32) 45%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 240, 180, 0.32) 55%, transparent);
    transform: translateX(-100%);
}
.energize .h-surge { animation: h-surge 0.7s ease-out forwards; }
@keyframes h-surge { to { transform: translateX(100%); } }
.energize .glint {
    stroke: #fff;
    stroke-width: 3.4;
    stroke-dasharray: 26 14;
    opacity: 1;
    filter: drop-shadow(0 0 5px #ffe066) drop-shadow(0 0 12px #ffd43b);
    animation-duration: 0.4s;
}
.energize .win { transition-duration: 0.2s; }
.energize .aviation,
.energize .yard { opacity: 1; }
.energize .lamp { fill: #fff3bf; filter: drop-shadow(0 0 6px #ffe8a3); }
.energize #login-form {
    box-shadow: 0 0 0 2px rgba(255, 224, 102, 0.85), 0 0 46px rgba(255, 212, 59, 0.5), 0 24px 60px rgba(10, 14, 40, 0.28);
    transition: box-shadow 0.3s;
}
.energize #login-form .acct-button { background: #f2b705; color: #1d2650; opacity: 1; }

/* ---- easter eggs (horizon_eggs.js) ----------------------------------- */
@keyframes h-cross {
    from { transform: translateX(-200px); }
    to { transform: translateX(1800px); }
}
.balloon { animation: h-cross 150s linear infinite; animation-delay: -40s; }
.bob { animation: h-bob 6s ease-in-out infinite alternate; }
@keyframes h-bob { to { translate: 0 -14px; } }
.env { fill: #ff6b6b; }
.env-stripe { fill: #ffd43b; }
.ropes { stroke: #5c4033; stroke-width: 1.2; }
.basket { fill: #8d6e63; }
.shooting {
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0;
    animation: h-shoot 11s ease-out infinite 2s;
}
@keyframes h-shoot {
    0% { opacity: 0; transform: translate(1200px, 90px); }
    2% { opacity: 1; }
    8% { opacity: 0; transform: translate(900px, 205px); }
    100% { opacity: 0; transform: translate(900px, 205px); }
}
.drone { fill: currentColor; animation: h-patrol 16s ease-in-out infinite alternate; }
.drone path { fill: none; stroke: currentColor; stroke-width: 1.6; }
.drone .rotor { animation: h-blink 0.12s steps(2) infinite; }
.drone-led { fill: #ff4d4d; animation: h-blink 0.8s steps(2) infinite; }
@keyframes h-patrol {
    0% { transform: translate(0, 0); }
    50% { transform: translate(140px, -18px); }
    100% { transform: translate(250px, 6px); }
}
.squirrel { fill: currentColor; }
.truck { fill: currentColor; }
.truck .tyre { fill: color-mix(in srgb, currentColor 60%, #000); }
.truck .boom { stroke: currentColor; stroke-width: 4; stroke-linecap: round; }
.truck .beacon { fill: #ffa94d; animation: h-blink 0.9s steps(2) infinite; }
.pumpkin { fill: #f76707; }
.stem { stroke: #2b8a3e; stroke-width: 2; stroke-linecap: round; }
.jack { fill: #ffd43b; opacity: var(--night); filter: drop-shadow(0 0 4px #ffa94d); }
.bulb { opacity: calc(0.4 + 0.6 * var(--night)); animation: h-twinkle 1.6s ease-in-out infinite alternate; }
.bulb-1 { animation-delay: 0.5s; }
.bulb-2 { animation-delay: 1s; }
@keyframes h-twinkle { to { opacity: 0.25; } }

.h-snow {
    position: absolute;
    inset: 0;
    display: none;
    pointer-events: none;
    background-image:
        radial-gradient(circle, #fff 1.8px, transparent 2.2px),
        radial-gradient(circle, rgba(255, 255, 255, 0.8) 1.2px, transparent 1.6px),
        radial-gradient(circle, rgba(255, 255, 255, 0.55) 0.9px, transparent 1.2px);
    background-size: 131px 97px, 71px 53px, 43px 37px;
    background-position: 0 0, 23px 41px, 11px 7px;
    animation: h-snow 18s linear infinite;
}
.is-snowy .h-snow { display: block; }
@keyframes h-snow { to { background-position: 60px 970px, -12px 1101px, 30px 1117px; } }

/* ---- held still (the corner button; reduced motion starts this way) ---- */
.is-still *,
.is-still *::before,
.is-still *::after {
    animation-play-state: paused !important;
}
.is-still .h-rain { display: none; } /* frozen rain is just stripes */
.h-motion {
    position: absolute;
    right: 22px;
    bottom: 16px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(10, 14, 40, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
    transition: background-color 0.15s;
}
.h-motion:hover { background: rgba(10, 14, 40, 0.55); }
.h-motion:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.h-motion svg { width: 10px; height: 10px; fill: currentColor; }
.h-motion .i-play,
.is-still .h-motion .i-pause { display: none; }
.is-still .h-motion .i-play { display: block; }
@media (max-width: 640px) {
    .h-status { display: none; }
}

/* ---- the go-live countdown (core/access/golive.py; countdown.js) ---- */
.golive-clock {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 4px 0;
}
.golive-clock > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0 8px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}
.golive-clock span {
    font-family: "IBM Plex Mono", monospace;
    font-size: 34px;
    font-weight: 600;
    line-height: 1;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}
.golive-clock small {
    margin-top: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}