:root {
    /* Updated sky gradient colors */
    --sky-top: #e8f1fb;
    --sky-mid: #78b3e5;
    --sky-bot: #73addf;
    --brand: #00a0df;
    --glass-bg: rgba(255,255,255,.35);
    --glass-bd: rgba(255,255,255,.55);
    --panel-sh: 0 18px 40px rgba(0,0,0,.25);
}

* {
    box-sizing: border-box
}

html, body {
    height: 100%
}

body {
    margin: 0;
    background: linear-gradient(180deg, var(--sky-top), var(--sky-mid) 55%, var(--sky-bot));
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    color: #0f172a;
    overflow: hidden;
}

/* ===== LOGIN ===== */
.wrap {
    position: relative;
    z-index: 100;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.card {
    width: 340px;
    padding: 28px;
    border-radius: 16px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-bd);
    backdrop-filter: blur(10px) saturate(120%);
    box-shadow: var(--panel-sh);
    opacity: 0.90;
}

.brand {
    display: flex;
    justify-content: center;
    margin-bottom: 12px
}

    .brand img {
        height: 24px
    }

.title {
    color: #fff;
    text-align: center;
    margin-bottom: 12px;
    font-weight: 700;
    font-size: 1.25rem
}

label {
    display: block;
    margin: 10px 0 6px;
    color: #ffffffcc;
    font-size: .9rem
}

#oauth-text {
    text-align: center;
}

input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
    font-size: 1rem
}

.actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    color: #fff;
    font-size: .85rem
}

.btn {
    width: 100%;
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer
}

    .btn:hover {
        background: #028ac0
    }

@media (max-width:420px) {
    .card {
        width: 92vw;
        padding: 22px
    }
}

/* ===== CLOUDS ===== */
.sky {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* height can just be the viewport now */
    height: 100%;
}
/* ===== Smooth clouds v3: independent X (drift) + Y (bob) ===== */

/* Same tunable dials as before */
:root{
  --drift-front: 60px; --drift-mid: 40px; --drift-back: 20px;
  --bob-front: 12px;    --bob-mid: 10px;   --bob-back: 8px;
  --cloud-padding: 28px;
}

/* Register animatable custom properties for transform parts */
@property --tx { syntax: "<length>"; initial-value: 0px; inherits: false; }
@property --ty { syntax: "<length>"; initial-value: 0px; inherits: false; }

.cloud-layer {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 200px; background: none; overflow: visible; will-change: transform;
}

/* Painter element (same as your previous v2) */
.cloud-layer::before{
  content:"";
  position:absolute; left:0; right:0;
  top: calc(var(--cloud-padding) * -1);
  bottom: calc(var(--cloud-padding) * -1);
  left:-100px;
  background-repeat: repeat-x;
  background-position: center top;
  background-size: auto 130%;
  pointer-events:none;
  /* Compose X and Y into a single transform */
  transform: translate(var(--tx), var(--ty));
  will-change: transform;
  width:120%
}

/* Images + z-order unchanged */
.layer-back::before   { background-image: url("/img/clouds-back.svg"); }
.layer-middle::before { background-image: url("/img/clouds-middle.svg"); }
.layer-front::before  { background-image: url("/img/clouds-front.svg"); }
.layer-back  { z-index:10; }
.layer-middle{ z-index:20; }
.layer-front { z-index:30; filter: drop-shadow(0 4px 6px rgba(0,0,0,.06)); }

/* Keyframes now set custom properties, not transform */
@keyframes driftFront { from { --tx: calc(var(--drift-front) * -1); } 50% { --tx: var(--drift-front); } to { --tx: calc(var(--drift-front) * -1); } }
@keyframes driftMid   { from { --tx: calc(var(--drift-mid)   * -1); } 50% { --tx: var(--drift-mid);   } to { --tx: calc(var(--drift-mid)   * -1); } }
@keyframes driftBack  { from { --tx: calc(var(--drift-back)  * -1); } 50% { --tx: var(--drift-back);  } to { --tx: calc(var(--drift-back)  * -1); } }

@keyframes bobFront   { 0% { --ty: 0px; } 50% { --ty: calc(var(--bob-front) * -1); } 100% { --ty: 0px; } }
@keyframes bobMid     { 0% { --ty: 0px; } 50% { --ty: calc(var(--bob-mid)   * -1); } 100% { --ty: 0px; } }
@keyframes bobBack    { 0% { --ty: 0px; } 50% { --ty: calc(var(--bob-back)  * -1); } 100% { --ty: 0px; } }

/* Apply both animations; they no longer fight each other */
.layer-front::before  { animation: driftFront 48s linear -4s infinite,  bobFront 22s ease-in-out -11s infinite; }
.layer-middle::before { animation: driftMid   58s linear -12s infinite, bobMid   28s ease-in-out  -5s infinite; }
.layer-back::before   { animation: driftBack  68s linear -7s  infinite, bobBack  34s ease-in-out -16s infinite; }

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .cloud-layer::before { animation: none !important; }
}


/* Portrait safety */
/*@media (max-aspect-ratio:3/4),(max-width:480px){
    .cloud-layer{ width:160vw; background-size:170% auto; top:12% }
    .layer-back{ top:100px }
  }*/

/* ===== FLOATER LANES (viewport-fixed, between clouds) ===== */
.floaters {
    position: fixed;
    inset: 0;
    pointer-events: none
}

.lane-back-middle {
    z-index: 15
}

.lane-middle-front {
    z-index: 25
}

.lane-front {
    z-index: 35
}

/* viewport-anchored container; opacity fades via CSS (not WAAPI) */
.balloon {
    position: fixed;
    left: 0;
    top: 0;
    width: clamp(56px, 7vw, 110px);
    height: clamp(80px,10vw,150px);
    opacity: 0; /* default hidden */
    transition: opacity 420ms ease; /* fade in/out */
    pointer-events: none;
    will-change: transform, opacity;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,.12));
    z-index: inherit; /* lane controls stacking */
}

/* allow clicking & show intent */
.balloon {
    cursor: pointer;
    pointer-events: auto;
}

    /* quick burst ring (visual pop) */
    .balloon::after {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 3px solid rgba(255,255,255,.9);
        opacity: 0;
        transform: scale(.2);
        pointer-events: none;
    }

/* lanes must accept pointer events so children can be clicked */
.floaters {
    pointer-events: auto;
}

/* make the balloon and its inner nodes clickable */
.balloon,
.balloon-flight,
.balloon-art {
    pointer-events: auto;
    cursor: pointer;
}

@keyframes burstRing {
    0% {
        opacity: 0;
        transform: scale(.2);
    }

    20% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.8);
    }
}


/* this element gets the flight (translate X/Y) */
.balloon-flight {
    position: absolute;
    inset: 0;
    will-change: transform;
}

/* this child gets the bob (translateY only) */
.balloon-art {
    position: absolute;
    inset: 0;
    background: no-repeat center/contain;
    will-change: transform;
}

/* gentle bob keyframes (used on .balloon-art) */
@keyframes bobY {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-8px)
    }

    100% {
        transform: translateY(0)
    }
}

/* --- Login card readability & alignment fixes --- */
.card {
    color: #334155; /* default text color in the card */
    background: rgba(255,255,255,.88); /* a touch more solid for contrast */
}

    /* keep the big title white if you like */
    .card .title {
        color: #475569;
    }

    /* form labels (Username/Password + "Stay logged in") */
    .card label {
        color: #475569; /* darker, readable slate */
        font-weight: 600;
        display: block;
        margin: 10px 0 6px;
    }

    /* inputs & placeholders */
    .card input::placeholder {
        color: #94a3b8;
    }
    /* softer placeholder */
    .card input[type="text"],
    .card input[type="password"] {
        color: #0f172a;
    }

    /* row that holds the checkbox + "Forgot?" link */
    .card .actions {
        display: flex;
        align-items: center; /* vertical alignment fix */
        gap: 12px;
        margin-top: 10px;
    }

        /* make the checkbox + its text sit on one baseline */
        .card .actions label {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0; /* remove extra line height gap */
            color: #475569; /* readable */
        }

    /* checkbox sizing + brand accent */
    .card input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin: 0; /* kill default offset */
        accent-color: #00a0df; /* modern browsers */
        vertical-align: middle;
    }

    /* "Forgot?" link: pull to the right and make it readable */
    .card .actions a {
        margin-left: auto;
        color: #0ea5e9 !important; /* override inline white */
        text-decoration: none;
        font-weight: 600;
        line-height: 1;
    }

        .card .actions a:hover {
            text-decoration: underline;
        }

button .spinner {
    border: 2px solid #f3f3f3; /* Light grey */
    border-top: 2px solid #007bff; /* Blue */
    border-radius: 50%;
    width: 10px; /* Smaller size for inside the button */
    height: 10px;
    margin-right: 10px; /* Space between spinner and text */
    animation: spin 1s linear infinite;
    display: inline-block;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.login-error {
    display: none; /* hidden by default */
    margin: 0.75rem 0 1rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid #fca5a5; /* soft red border */
    border-radius: 6px;
    background-color: #fee2e2; /* light red background */
    color: #b91c1c; /* dark red text */
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Sky Writing --- */
#sky-writing {
    position: fixed;
    top: 12%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.2rem; /* bigger space between the 2 lines */
    pointer-events: none;
    opacity: .7; /* start at 0.7 */
    animation: skyDissipate 60s ease-out forwards; /* fade & grow over 60s */
}

    /* enforce no wrapping inside each line; you control line-breaks */
    #sky-writing .sky-line {
        white-space: nowrap;
        text-align: center;
        line-height: 1.12;
    }

/* animatable numeric vars for smooth, no-snap letter drift */
@property --ox {
    syntax: "<number>";
    initial-value: 0;
    inherits: false;
}

@property --oy {
    syntax: "<number>";
    initial-value: 0;
    inherits: false;
}

/* a word is an inline-block so it doesn’t break internally */
#sky-writing .word {
    display: inline-block;
    white-space: nowrap;
    margin-right: 0.6em;
}
/* extra word spacing */

/* each visible character */
#sky-writing .char {
    display: inline-block;
    font-family: 'Comic Sans MS', 'Fredoka One', 'Baloo 2', sans-serif;
    font-weight: 800;
    font-size: clamp(1.15rem, 3vw, 2.4rem); /* slightly smaller by default */
    letter-spacing: 0.12em; /* a bit more spaced apart */
    color: #fff;
    /* puffy glow */
    text-shadow: 0 0 3px rgba(255,255,255,.95), 0 0 8px rgba(255,255,255,.80), 0 0 16px rgba(230,240,255,.70), 0 0 28px rgba(210,230,255,.55);
    /* baseline offset + independent drift via animatable vars */
    transform: translateY(calc(var(--y0, 0px) + var(--oy, 0) * var(--ampY, 0px))) translateX(calc(var(--ox, 0) * var(--ampX, 0px)));
    /* start mid-cycle using negative delays (set in JS) → no “lock” */
    animation: oscX var(--durX, 3800ms) ease-in-out var(--delayX, -500ms) infinite alternate, oscY var(--durY, 4200ms) ease-in-out var(--delayY, -500ms) infinite alternate;
    will-change: transform;
}

/* oscillators for numeric custom properties */
@keyframes oscX {
    from {
        --ox: -1
    }

    to {
        --ox: 1
    }
}

@keyframes oscY {
    from {
        --oy: -1
    }

    to {
        --oy: 1
    }
}

/* whole sign fades & grows (stronger growth for “vapor dispersing”) */
@keyframes skyDissipate {
    0% {
        opacity: .7;
        transform: translateX(-50%) scale(1);
        filter: blur(0px);
    }

    70% {
        opacity: .25;
        transform: translateX(-50%) scale(1.25);
        filter: blur(1.5px);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) scale(1.4);
        filter: blur(3px);
    }
}

@media (max-width: 480px) {
    #sky-writing {
        top: 9%;
        gap: 1.5rem;
    }

        #sky-writing .char {
            font-size: clamp(1.05rem, 4vw, 2rem);
        }

        #sky-writing .word {
            margin-right: 0.5em;
        }
}

@media (prefers-reduced-motion: reduce) {
    .layer-front, .layer-middle, .layer-back {
        animation: none !important
    }
}

/* ===== Bottom-right environment dialog (desktop/tablet only) ===== */
.sys-info{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;                        /* above cloud layers/front floaters */
  min-width: 260px;
  max-width: 360px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--glass-bg, rgba(255,255,255,.35));
  border: 1px solid var(--glass-bd, rgba(255,255,255,.55));
  box-shadow: var(--panel-sh, 0 18px 40px rgba(0,0,0,.25));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* “technical” feel */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .9rem;
  line-height: 1.25;
  color: #0b2239;
}

.sys-info__title{
  font-weight: 700;
  letter-spacing: .25px;
  margin-bottom: 8px;
  color: var(--brand, #00a0df);
  text-transform: uppercase;
  font-size: .78rem;
}

.sys-info__list{
  margin: 0;
  padding: 0;
}

.sys-info__row{
  display: grid;
  grid-template-columns: 120px 1fr;
  column-gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  border-top: 1px solid rgba(0,0,0,.06);
}
.sys-info__row:first-child{ border-top: 0 }

.sys-info dt{
  margin: 0;
  opacity: .75;
}
.sys-info dd{
  margin: 0;
  font-weight: 700;
  letter-spacing: .2px;
  color: #053459;
  word-break: break-word;
}

/* Subtle hover focus for desktop */
.sys-info:focus-within,
.sys-info:hover{ box-shadow: 0 18px 44px rgba(0,0,0,.28) }

/* Hide on mobile screens */
@media (max-width: 640px), (max-aspect-ratio: 3/4){
  .sys-info{ display: none; }
}