/* ============================================================
   Glass Login — Liquid Glass overlay for the auth screen.
   Loads AFTER the inline <style> in login.html and re-skins
   the card, inputs and buttons as frosted glass over an
   animated ambient background.
   ============================================================ */

:root {
    --g-card:    rgba(23, 33, 43, 0.55);
    --g-input:   rgba(36, 47, 61, 0.45);
    --g-border:  rgba(255, 255, 255, 0.14);
    --g-hl:      rgba(255, 255, 255, 0.18);
}

/* Richer ambient scene */
body {
    background:
        radial-gradient(900px 900px at 12% -10%, rgba(82,136,193,.45) 0%, transparent 55%),
        radial-gradient(800px 800px at 110% 20%, rgba(120,90,220,.38) 0%, transparent 55%),
        radial-gradient(700px 700px at 50% 120%, rgba(40,180,160,.28) 0%, transparent 55%),
        #0b121b !important;
}

body::before {
    width: 560px !important; height: 560px !important;
    background: radial-gradient(circle, rgba(82,136,193,.35) 0%, transparent 70%) !important;
}
body::after {
    width: 460px !important; height: 460px !important;
    background: radial-gradient(circle, rgba(120,90,220,.30) 0%, transparent 70%) !important;
}

/* Frosted card */
.card {
    background: var(--g-card) !important;
    -webkit-backdrop-filter: blur(34px) saturate(1.7);
    backdrop-filter: blur(34px) saturate(1.7);
    border: 1px solid var(--g-border) !important;
    box-shadow:
        0 24px 70px rgba(0,0,0,.55),
        inset 0 1px 0 var(--g-hl) !important;
}

/* Glass inputs */
.input-wrap input {
    background: var(--g-input) !important;
    border: 1.5px solid var(--g-border) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.input-wrap input:focus {
    background: rgba(36, 47, 61, 0.6) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(82,136,193,.22);
}

/* Glass logo orb */
.logo-circle {
    background: linear-gradient(135deg, rgba(82,136,193,.9), rgba(120,90,220,.75)) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--g-hl);
    box-shadow: 0 10px 30px rgba(82,136,193,.45), inset 0 1px 0 var(--g-hl) !important;
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--accent), #6a73d6) !important;
    box-shadow: 0 8px 24px rgba(82,136,193,.4), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.btn-ghost {
    background: var(--g-input) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--g-border) !important;
}
.btn-ghost:hover:not(:disabled) {
    background: rgba(36, 47, 61, 0.65) !important;
}

.phone-badge {
    background: var(--g-input) !important;
    border: 1px solid var(--g-border) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}


/* ── Signature polish ──────────────────────────────────── */

/* Moving light sweep across the card */
.card { position: relative; overflow: hidden; }
.card::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -30%;
    width: 60%;
    height: 220%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,.10), transparent);
    transform: rotate(8deg);
    animation: cardSweep 7s ease-in-out infinite;
    pointer-events: none;
}
@keyframes cardSweep {
    0%   { left: -40%; }
    60%, 100% { left: 130%; }
}

/* Breathing glow on the logo orb */
.logo-circle {
    animation: orbPulse 3.6s ease-in-out infinite;
}
@keyframes orbPulse {
    0%, 100% { box-shadow: 0 10px 30px rgba(82,136,193,.4), inset 0 1px 0 var(--g-hl); }
    50%      { box-shadow: 0 14px 44px rgba(120,90,220,.55), inset 0 1px 0 var(--g-hl); }
}

/* Gradient brand text */
.logo h1 {
    background: linear-gradient(110deg, #8fb6e8, #b79bff, #6fe0cf);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: titleShimmer 6s linear infinite;
}
@keyframes titleShimmer { to { background-position: 220% center; } }

/* Buttons lift */
.btn-primary { transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, background .2s; }
.btn-primary:hover:not(:disabled) { transform: translateY(-2px) scale(1.01); }

/* Active step dot gradient */
.step-dot.active {
    background: linear-gradient(135deg, var(--accent), #7a5ad6) !important;
    box-shadow: 0 0 10px rgba(122,90,214,.6);
}

@media (prefers-reduced-motion: reduce) {
    .card::after, .logo-circle, .logo h1 { animation: none !important; }
}