/* Live Projects — buildings (v1.0.0). Each project is a building, each task a floor. */
.lb-scene {
    position: relative; isolation: isolate; overflow: hidden;
    padding: 90px 28px 64px;
    border-radius: 28px;
    background:
        radial-gradient(ellipse at 50% 120%, rgba(var(--lp-gold, 248, 184, 78), .16), transparent 60%),
        linear-gradient(180deg, rgba(var(--lp-purple, 169, 112, 255), .07), transparent 55%),
        var(--lp-panel, rgba(13, 13, 20, .8));
    border: 1px solid var(--lp-line, rgba(255, 255, 255, .08));
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.lb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lb-canvas--back { z-index: 0; }
.lb-canvas--front { z-index: 3; }
.lb-row { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 40px 34px; }
.lb-cell { display: grid; justify-items: center; gap: 12px; flex: 0 1 150px; min-width: 92px; }
.lb-scene--solo .lb-cell { flex-basis: 280px; }
.lb-name { max-width: 100%; color: var(--lp-text, #f6f4ef); font-weight: 700; font-size: 13.5px; text-align: center; text-decoration: none; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lb-name:hover { color: rgb(var(--lp-gold, 248, 184, 78)); }

/* ---------- the building ---------- */
.lb-bld { --fh: clamp(7px, calc(300px / var(--n)), 18px); --gap: clamp(1px, calc(var(--fh) * .14), 3px); position: relative; width: 100%; display: grid; }
.lb-scene--solo .lb-bld { --fh: clamp(12px, calc(470px / var(--n)), 30px); }
.lb-floors { display: flex; flex-direction: column-reverse; gap: var(--gap); padding: 0 6px; }
.lb-floor {
    position: relative; display: block; width: 100%; height: var(--fh);
    padding: 0; border: 0; border-radius: 3px; cursor: pointer; font: inherit;
    opacity: 0; transform: translateY(-40px) scaleY(.4);
    transition: opacity .5s, transform .7s cubic-bezier(.2, 1.3, .4, 1), filter .3s, box-shadow .3s;
    transition-delay: calc(var(--i) * 55ms + 150ms);
}
.lb-scene.is-built .lb-floor { opacity: 1; transform: none; }
.lb-floor i { position: absolute; inset: 22% 9%; border-radius: 1px; }

/* delivered: solid, warm windows that flicker now and then */
.lb-floor.is-done { background: linear-gradient(90deg, rgba(var(--acc), .32), rgba(var(--acc), .16)), #12121b; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .4); }
.lb-floor.is-done i { background: repeating-linear-gradient(90deg, rgba(255, 226, 160, .9) 0 7px, transparent 7px 12px); opacity: .75; animation: lbWin 7s steps(1) infinite; animation-delay: calc(var(--i) * -.83s); }
@keyframes lbWin { 0%, 100% { opacity: .75; } 31% { opacity: .35; } 34% { opacity: .9; } 67% { opacity: .55; } }

/* being built: scaffold stripes, glow, half-lit windows */
.lb-floor.is-active { background: repeating-linear-gradient(-45deg, rgba(var(--lp-cyan, 56, 217, 255), .38) 0 5px, rgba(var(--lp-cyan, 56, 217, 255), .1) 5px 10px), #0f1620; box-shadow: 0 0 0 1px rgba(var(--lp-cyan, 56, 217, 255), .6), 0 0 22px rgba(var(--lp-cyan, 56, 217, 255), .35); background-size: 14px 14px; animation: lbScaffold 1.2s linear infinite; }
.lb-floor.is-active i { inset: 24% 9% 24% 9%; background: repeating-linear-gradient(90deg, rgba(var(--lp-cyan, 56, 217, 255), .95) 0 7px, transparent 7px 12px); clip-path: inset(0 var(--cut, 55%) 0 0); animation: lbFill 3.2s ease-in-out infinite; }
html[dir="rtl"] .lb-floor.is-active i { clip-path: inset(0 0 0 var(--cut, 55%)); }
@keyframes lbScaffold { to { background-position: 14px 0; } }
@keyframes lbFill { 0% { --cut: 90%; } 70%, 100% { --cut: 20%; } }
@property --cut { syntax: "<percentage>"; inherits: false; initial-value: 55%; }
.lb-floor.is-working { box-shadow: 0 0 0 1px rgba(var(--lp-green, 83, 233, 164), .8), 0 0 26px rgba(var(--lp-green, 83, 233, 164), .45); }
.lb-floor.is-weld { filter: brightness(1.8); }

/* still to come: wireframe ghosts */
.lb-floor.is-planned { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); background-image: linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px); background-size: 20% 100%; }
.lb-floor.is-planned i { display: none; }
.lb-scene.is-built .lb-floor.is-planned { opacity: .7; }

.lb-floor:hover, .lb-floor:focus-visible { filter: brightness(1.45); outline: none; box-shadow: 0 0 0 2px rgb(var(--acc)), 0 0 18px rgba(var(--acc), .5); z-index: 1; }

.lb-roof { position: relative; display: grid; justify-items: center; padding-bottom: 6px; opacity: 0; transition: opacity .6s; transition-delay: calc(var(--n) * 55ms + 300ms); }
.lb-scene.is-built .lb-roof { opacity: 1; }
.lb-roof b { padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: rgb(var(--acc)); background: rgba(var(--acc), .1); border: 1px solid rgba(var(--acc), .35); direction: ltr; }
.lb-beacon { width: 2px; height: 16px; background: rgba(255, 255, 255, .35); position: relative; margin-bottom: 4px; }
.lb-beacon::after { content: ""; position: absolute; top: -4px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--lp-red, 255, 97, 94)); box-shadow: 0 0 10px rgb(var(--lp-red, 255, 97, 94)); animation: lbBeacon 1.6s steps(1) infinite; }
.lb-bld.is-complete .lb-beacon::after { background: rgb(var(--lp-green, 83, 233, 164)); box-shadow: 0 0 12px rgb(var(--lp-green, 83, 233, 164)); }
@keyframes lbBeacon { 50% { opacity: .15; } }
.lb-base { height: 8px; margin: 2px -4px 0; border-radius: 3px; background: linear-gradient(90deg, rgba(var(--acc), .5), rgba(var(--acc), .2)); box-shadow: 0 6px 22px rgba(var(--acc), .35); }

.lb-legend { position: absolute; z-index: 4; inset-inline-start: 22px; top: 20px; display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--lp-muted, #a9a6b1); }
.lb-legend span { display: inline-flex; align-items: center; gap: 7px; }
.lb-legend i { width: 18px; height: 9px; border-radius: 2px; }
.lb-legend i.is-done { background: rgba(255, 226, 160, .85); }
.lb-legend i.is-active { background: repeating-linear-gradient(-45deg, rgba(var(--lp-cyan, 56, 217, 255), .9) 0 3px, rgba(var(--lp-cyan, 56, 217, 255), .3) 3px 6px); }
.lb-legend i.is-planned { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }

@media (max-width: 700px) {
    .lb-scene { padding: 70px 14px 48px; border-radius: 22px; }
    .lb-row { gap: 30px 16px; }
    .lb-cell { flex-basis: 96px; min-width: 76px; }
    .lb-scene--solo .lb-cell { flex-basis: 210px; }
    .lb-bld { --fh: clamp(6px, calc(220px / var(--n)), 14px); }
    .lb-scene--solo .lb-bld { --fh: clamp(10px, calc(360px / var(--n)), 24px); }
    .lb-legend { inset-inline-start: 14px; top: 16px; gap: 10px; font-size: 11px; }
    .lb-name { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .lb-floor { transition: none; opacity: 1; transform: none; }
    .lb-floor.is-done i, .lb-floor.is-active, .lb-floor.is-active i, .lb-beacon::after { animation: none !important; }
}
html[data-lp-motion="off"] .lb-floor { transition: none; opacity: 1; transform: none; }