/* InvestoXpert login city: developer badges + a rotating live site-visit spotlight. Loaded after login.css. */
.lx-tags{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.lx-tag{position:absolute;left:0;top:0;opacity:0;transition:transform .35s ease-out}
.lx-tags.is-on .lx-name{opacity:1}
.lx-tags.is-on .lx-visit.is-spot,.lx-tags.is-on .lx-crew.is-spot{opacity:1}
.lx-tag.is-spot{z-index:2}

/* always-on: compact monogram badge, so every building reads as "this one" without crowding its neighbours */
.lx-pl{position:relative;transform:translate(-50%,-100%);display:flex;align-items:center;gap:0;white-space:nowrap;
  border-radius:10px;background:rgb(8 16 32/.7);border:1px solid rgb(255 255 255/.16);box-shadow:0 8px 18px -10px rgb(0 0 0/.7);
  transition:gap .35s,padding .35s,scale .35s,border-color .35s,box-shadow .35s;padding:.2rem}
.lx-pl::after{content:"";position:absolute;left:50%;bottom:-7px;width:1.5px;height:7px;background:linear-gradient(var(--ac),transparent)}
.lx-mono{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:7px;font:700 .6rem/1 Inter,sans-serif;font-style:normal;color:#fff;
  background:linear-gradient(135deg,var(--ac),color-mix(in srgb,var(--ac) 40%,#000))}
.lx-pl span{display:grid;width:0;overflow:hidden;opacity:0;transition:width .35s,opacity .25s}
.lx-pl b{display:block;font:600 .74rem/1.2 Inter,sans-serif;white-space:nowrap}
.lx-pl small{display:block;font:500 .6rem/1.2 Inter,sans-serif;color:rgb(255 255 255/.66);white-space:nowrap}
/* spotlighted: badge relaxes open to show developer, project and city */
.is-spot .lx-pl{gap:.5rem;padding:.26rem .7rem .26rem .26rem;scale:1.05;border-color:color-mix(in srgb,var(--ac) 70%,#fff 10%);
  box-shadow:0 14px 30px -10px color-mix(in srgb,var(--ac) 60%,transparent)}
.is-spot .lx-pl span{width:auto;opacity:1}

/* spotlighted only: live site-visit caption under the building */
.lx-vc{transform:translateX(-50%) translateY(-4px);width:196px;padding:.5rem .7rem .7rem;border-radius:12px;
  background:rgb(8 16 32/.8);border:1px solid rgb(255 255 255/.16);box-shadow:0 12px 28px -12px rgb(0 0 0/.75);
  transition:transform .35s}
.is-spot .lx-vc{transform:translateX(-50%) translateY(0)}
.lx-vt{position:relative;display:block;height:2.05rem}
.lx-vt b{display:block;font:600 .7rem/1.25 Inter,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lx-vt em{position:absolute;left:0;top:1.1rem;font:500 .62rem/1.25 Inter,sans-serif;font-style:normal;color:rgb(255 255 255/.72);white-space:nowrap}
.lx-vt .s2{opacity:0;color:#8be3a1}
.lx-pr{position:absolute;left:.7rem;right:.7rem;bottom:.4rem;height:2px;border-radius:2px;background:rgb(255 255 255/.16)}
.lx-pr::before{content:"";position:absolute;left:0;top:-2px;z-index:1;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 45%,transparent)}
.lx-pr::after{content:"";position:absolute;inset:0;border-radius:2px;background:var(--ac);transform-origin:left;transform:scaleX(0)}
.is-spot .lx-pr::before{animation:lx-dot 5.5s ease-in-out both}
.is-spot .lx-pr::after{animation:lx-fill 5.5s ease-in-out both}
.is-spot .s1{animation:lx-s1 5.5s both}
.is-spot .s2{animation:lx-s2 5.5s both}
@keyframes lx-dot{to{left:calc(100% - 6px)}70%,100%{left:calc(100% - 6px)}}
@keyframes lx-fill{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
@keyframes lx-s1{0%,60%{opacity:1}72%,100%{opacity:0}}
@keyframes lx-s2{0%,66%{opacity:0}78%,100%{opacity:1}}

/* spotlighted only: agent (our logo on his chest) and client, standing at the building's foot */
.lx-crew{display:flex;align-items:flex-end;justify-content:center;gap:3px;transform:translate(-50%,-100%) scale(.34);transform-origin:bottom center}
.lx-crew .lx-p{width:40px;height:92px;overflow:visible;filter:drop-shadow(0 6px 6px rgb(0 0 0/.45))}
.lx-crew .lx-p:first-child{animation:lx-idle 2.6s ease-in-out infinite alternate}
.lx-crew .lx-p:last-child{animation:lx-idle 3.1s ease-in-out infinite alternate;animation-delay:-1.4s}
.is-spot.lx-crew{animation:lx-walkin .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes lx-walkin{from{opacity:0;transform:translate(-50%,-84%) scale(.34)}}
@keyframes lx-idle{to{transform:translateY(-3px)}}

.lx-exit .lx-tags{opacity:0;transition:opacity .4s}
@media (max-width:900px){.lx-tags{display:none}}