/* InvestoXpert login — v2 layer (loads after login.css + login_city.css).
   Sky life · traffic · glass-card polish · live ticker · sky-time switcher */

/* ---------- sky life ---------- */
.lx-stars,.lx-shoot,.lx-cloud,.lx-plane{position:absolute;pointer-events:none;opacity:0;transition:opacity 1.2s}
.lx-stars{inset:0}
.lx-stars i{position:absolute;width:var(--z);height:var(--z);border-radius:50%;background:#fff;box-shadow:0 0 6px 1px rgb(255 255 255/.7);animation:lx-twinkle var(--d) ease-in-out var(--o) infinite}
@keyframes lx-twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.2)}}
.lx[data-phase=night] .lx-stars,.lx[data-phase=dusk] .lx-stars,.lx[data-phase=dawn] .lx-stars{opacity:1}
.lx[data-phase=dusk] .lx-stars,.lx[data-phase=dawn] .lx-stars{opacity:.45}

.lx-shoot{left:70%;top:8%;width:120px;height:2px;border-radius:2px;background:linear-gradient(90deg,#fff,transparent);transform:rotate(-28deg);}
.lx[data-phase=night] .lx-shoot{opacity:1;animation:lx-shoot 7s ease-in 2.5s infinite}
@keyframes lx-shoot{0%{transform:translate(0,0) rotate(-28deg);opacity:0}2%{opacity:1}12%{transform:translate(-340px,180px) rotate(-28deg);opacity:0}100%{opacity:0}}

.lx-cloud{height:34px;border-radius:40px;background:rgb(255 255 255/.75);filter:blur(.4px);box-shadow:0 10px 30px rgb(255 255 255/.25)}
.lx-cloud::before,.lx-cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.lx-cloud::before{width:44px;height:44px;left:16px;top:-20px}.lx-cloud::after{width:58px;height:58px;left:52px;top:-28px}
.lx-cl1{top:12%;width:150px;left:-200px;animation:lx-drift 70s linear infinite}
.lx-cl2{top:26%;width:110px;left:-200px;transform:scale(.8);animation:lx-drift 95s linear -30s infinite}
.lx-cl3{top:6%;width:190px;left:-200px;transform:scale(1.2);opacity:.6;animation:lx-drift 120s linear -70s infinite}
.lx[data-phase=day] .lx-cloud{opacity:.85}
.lx[data-phase=dawn] .lx-cloud,.lx[data-phase=dusk] .lx-cloud{opacity:.35;filter:sepia(1) hue-rotate(-20deg) saturate(3)}
@keyframes lx-drift{to{left:110%}}

.lx-plane{top:19%;left:-40%;display:flex;align-items:center;gap:0;animation:lx-fly 34s linear 4s infinite;opacity:1;transition:none}
.lx-plane svg{width:44px;height:20px;filter:drop-shadow(0 4px 6px rgb(0 0 0/.35));order:2}
.lx-banner{order:1;position:relative;padding:.18rem .7rem;font:700 .68rem/1 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:#0b1220;
  background:linear-gradient(90deg,#F5A623,#ffd58a);border-radius:3px 0 0 3px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,6px 50%);margin-right:-3px}
.lx[data-phase=night] .lx-banner{background:linear-gradient(90deg,#2B7DE9,#7fb5ff);color:#fff}
@keyframes lx-fly{0%{transform:translate(0,10px)}50%{transform:translate(90vw,-14px)}100%{transform:translate(190vw,6px)}}

/* ---------- traffic on the city roads ---------- */
.lx-car{position:absolute;width:16px;height:9px;border-radius:3px;background:var(--cc,#fff);transform:translateZ(3px);
  box-shadow:0 0 12px 2px var(--cg,rgb(255 213 138/.65));z-index:2}
.lx-car::before{content:"";position:absolute;right:-16px;top:1px;width:18px;height:7px;background:linear-gradient(90deg,var(--cg,rgb(255 213 138/.65)),transparent);clip-path:polygon(0 30%,100% 0,100% 100%,0 70%)}
.lx-k1{top:233px;--cc:#fff3d1;animation:lx-car-x 9s linear infinite}
.lx-k2{top:240px;--cc:#ffd58a;animation:lx-car-x 13s linear -5s infinite}
.lx-k3{top:563px;--cc:#ff9fc0;--cg:rgb(255 106 156/.6);animation:lx-car-nx 11s linear -2s infinite}
.lx-k4{left:303px;--cc:#bcd8ff;--cg:rgb(127 181 255/.65);animation:lx-car-y 12s linear -4s infinite}
.lx-k3::before{right:auto;left:-16px;transform:scaleX(-1)}
.lx-k4::before{right:auto;left:1px;top:9px;width:7px;height:18px;clip-path:polygon(30% 0,100% 0,70% 100%,0 100%);transform:none;background:linear-gradient(180deg,var(--cg),transparent)}
.lx-k4{width:9px;height:16px}
@keyframes lx-car-x{from{left:-30px}to{left:900px}}
@keyframes lx-car-nx{from{left:900px}to{left:-30px}}
@keyframes lx-car-y{from{top:-30px}to{top:770px}}

/* ---------- hero stats ---------- */
.lx-stats{display:flex;gap:1.6rem;margin:1.4rem 0 0;padding:0;list-style:none;animation:lx-in 1s 1.5s both}
.lx-stats li{display:flex;flex-direction:column;padding-left:.8rem;border-left:2px solid rgb(255 255 255/.28)}
.lx-stats li:nth-child(1){border-color:#2B7DE9}.lx-stats li:nth-child(2){border-color:#2EAF4F}.lx-stats li:nth-child(3){border-color:#F5A623}
.lx-stats b{font:900 2rem/1 "Big Shoulders Display",Impact,sans-serif;font-variant-numeric:tabular-nums;text-shadow:0 2px 14px rgb(0 0 0/.5)}
.lx-stats span{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:rgb(255 255 255/.75)}

/* ---------- card polish ---------- */
.lx-card{--mx:50%;--my:0%;overflow:hidden}
.lx-glow{position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .3s;
  background:radial-gradient(360px circle at var(--mx) var(--my),rgb(255 255 255/.13),transparent 60%)}
.lx-card:hover .lx-glow{opacity:1}
.lx-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--lx-a,0deg),transparent 0 62%,rgb(43 125 233/.9) 72%,rgb(225 75 138/.9) 82%,rgb(245 166 35/.9) 92%,transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:lx-orbit 7s linear infinite;opacity:.9}
@property --lx-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes lx-orbit{to{--lx-a:360deg}}
.lx-secure{position:absolute;right:1.4rem;top:1.15rem;display:inline-flex;align-items:center;gap:.3rem;font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#7ee2a4;
  padding:.18rem .5rem;border-radius:999px;background:rgb(46 175 79/.14);border:1px solid rgb(126 226 164/.3)}
.lx-secure svg{width:11px;height:11px}

.lx-f--ico input{padding-left:2.9rem}
.lx-f--ico label{left:2.9rem}
.lx-fi{position:absolute;left:.95rem;top:50%;width:19px;height:19px;transform:translateY(-50%);color:rgb(255 255 255/.55);pointer-events:none;transition:color .2s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.lx-f--ico:focus-within .lx-fi{color:#8fbcff;transform:translateY(-50%) scale(1.15) rotate(-6deg)}

.lx-caps{display:flex;align-items:center;gap:.4rem;margin:-.55rem 0 .9rem;padding:.35rem .65rem;border-radius:9px;font-size:.78rem;font-weight:600;color:#ffd08a;background:rgb(245 166 35/.14);border:1px solid rgb(245 166 35/.4);animation:lx-in .3s both}
.lx-caps[hidden]{display:none}
.lx-caps svg{width:14px;height:14px}

/* live ticker */
.lx-ticker{display:flex;align-items:center;gap:.7rem;margin-top:1.1rem;padding:.55rem .75rem;border-radius:12px;background:rgb(255 255 255/.05);border:1px solid rgb(255 255 255/.1)}
.lx-live{display:inline-flex;align-items:center;gap:.35rem;font-size:.6rem;font-weight:800;letter-spacing:.12em;color:#ff8fb5}
.lx-live i{width:7px;height:7px;border-radius:50%;background:#e14b8a;animation:lx-ping 1.6s infinite;box-shadow:0 0 0 0 #e14b8a}
.lx-tick-win{position:relative;flex:1;height:1.25rem;overflow:hidden}
.lx-tick{position:absolute;inset:0;display:flex;align-items:center;gap:.45rem;font-size:.78rem;white-space:nowrap;animation:lx-tick-in .5s cubic-bezier(.22,1,.36,1) both}
.lx-tick.is-out{animation:lx-tick-out .45s ease-in both}
.lx-tick i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--c)}
.lx-tick b{font-weight:650;color:#fff}
.lx-tick em{font-style:normal;color:rgb(255 255 255/.6);overflow:hidden;text-overflow:ellipsis}
@keyframes lx-tick-in{from{opacity:0;transform:translateY(100%)}}
@keyframes lx-tick-out{to{opacity:0;transform:translateY(-100%)}}

/* sky-time switcher — pinned to the bottom-centre of the viewport, clear of the card */
.lx-shell{padding-bottom:calc(clamp(1.25rem,4vw,3.5rem) + 3.6rem)}
.lx-phases{position:fixed;left:50%;right:auto;bottom:.9rem;transform:translateX(-50%);z-index:3;display:inline-flex;gap:.25rem;padding:.25rem;border-radius:999px;
  background:rgb(8 16 32/.6);backdrop-filter:blur(14px);border:1px solid rgb(255 255 255/.16);box-shadow:0 12px 30px -12px rgb(0 0 0/.6)}
.lx-phases button{position:relative;display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .85rem;border:0;border-radius:999px;background:none;color:rgb(255 255 255/.72);font:600 .74rem Inter,system-ui,sans-serif;cursor:pointer;transition:background .25s,color .25s}
.lx-phases button i{width:9px;height:9px;border-radius:50%;background:var(--pc,#fff);box-shadow:0 0 8px var(--pc,#fff)}
.lx-phases button[data-phase=dawn]{--pc:#F5A623}.lx-phases button[data-phase=day]{--pc:#ffe66d}.lx-phases button[data-phase=dusk]{--pc:#E14B8A}.lx-phases button[data-phase=night]{--pc:#7fb5ff}
.lx-phases button:hover{color:#fff;background:rgb(255 255 255/.1)}
.lx-phases button.is-on{color:#0b1220;background:#fff}
.lx-phases button.is-on::after{content:"";position:absolute;left:14%;right:14%;bottom:2px;height:2px;border-radius:2px;background:var(--pc);transform-origin:left;animation:lx-phase-bar 3s linear both}
@keyframes lx-phase-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.lx-phases button:focus-visible{outline:2px solid #2B7DE9;outline-offset:1px}

/* smooth sky: colours and sun position glide between phases instead of snapping */
@property --s1{syntax:"<color>";inherits:true;initial-value:#050a16}
@property --s2{syntax:"<color>";inherits:true;initial-value:#10244a}
@property --glow{syntax:"<color>";inherits:true;initial-value:#E14B8A}
@property --fog{syntax:"<color>";inherits:true;initial-value:#0b1730}
@property --oc{syntax:"<color>";inherits:true;initial-value:#e9f0ff}
@property --ox{syntax:"<percentage>";inherits:true;initial-value:78%}
@property --oy{syntax:"<percentage>";inherits:true;initial-value:14%}
.lx{transition:--s1 1.4s ease,--s2 1.4s ease,--glow 1.4s ease,--fog 1.4s ease,--oc 1.4s ease,--ox 1.4s ease,--oy 1.4s ease}

/* builder name badges: full name, never on top of each other */
.lx-pl{padding:.28rem .7rem .28rem .5rem;gap:.5rem;max-width:210px}
.lx-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 28%,transparent)}
.lx-pl span.lx-nm{display:grid;width:auto;opacity:1;overflow:hidden}
.lx-pl b{font:650 .74rem/1.2 Inter,sans-serif}
.lx-pl small{font-size:.58rem}
.lx-pl small .lx-proj{display:inline;width:auto;opacity:1}
.lx-pl small .lx-city{display:inline;width:auto;opacity:1;color:color-mix(in srgb,var(--ac) 60%,#fff)}
.lx-pl::after{height:var(--lead,7px);bottom:calc(-1 * var(--lead,7px));left:calc(50% - var(--lead-x,0px)*0);transform:none}
.lx-tags.is-on .lx-name.is-hidden{opacity:0}
.lx-tag.lx-name{transition:opacity .3s,transform .35s ease-out}
.is-spot .lx-pl{scale:1.06}

@media (max-width:900px){
  .lx-stats{display:none}
  .lx-phases{bottom:.6rem}
  .lx-plane{display:none}
}
@media (prefers-reduced-motion:reduce){
  .lx-stars i,.lx-shoot,.lx-cloud,.lx-plane,.lx-car,.lx-card::after,.lx-live i,.lx-tick{animation:none!important}
  .lx-plane{display:none}
  .lx-tick{opacity:1}
}
.lx-sky{overflow:hidden}