/* Laboratorul în Atelier (js/laborator_atelier.js): stratul întunecat de deasupra Atelierului, deschiderea (filmul de
   intro) și butonul „Laborator” din Atelier. Fonturile și marginile (--gut, --gut-r) vin din Atelier.html. */

/* pornirea în laborator: negru-cian de la primul cadru; încărcătorul luminos al Atelierului nu apare (progresul e în
   vălul laboratorului). Clasa o pune scriptul din <head> și o scoate laboratorul când intri în Atelier. */
html.lx-boot, html.lx-boot body{background:#02080c}
html.lx-boot #loader{visibility:hidden}
.lx{
  --lx-bg:#04070a; --lx-panel:rgba(6,14,20,.82); --lx-line:rgba(127,227,255,.22); --lx-ink:#e7f6fd; --lx-muted:#8fb0bf;
  --lx-cyan:#7fe3ff; --lx-amber:#ffb36b; --lx-deep:#02080c;
  position:fixed; inset:0; z-index:40; overflow:hidden; background:var(--lx-bg); color:var(--lx-ink);
  font-family:var(--f-body); color-scheme:dark; opacity:1; transition:opacity .5s ease; -webkit-font-smoothing:antialiased;
}
.lx[hidden]{display:none!important}
.lx.lx-out{opacity:0; pointer-events:none}
/* trecerile Atelier ↔ laborator: prin negru-cian (0,25 s spre întuneric, 0,4 s la ridicarea vălului) */
.lx.lx-fast{transition-duration:.25s}
.lx.lx-fast.lx-out{transition-duration:.4s}
/* spre Atelier: laboratorul se topește direct în Atelierul de dedesubt (fără negru), pe compozitor */
.lx.lx-xfade{transition:opacity .45s ease}
.lx button{font:inherit; color:inherit; cursor:pointer}
.lx :focus-visible{outline:2px solid var(--lx-cyan); outline-offset:2px}
.lx-scene{position:absolute; inset:0; z-index:0}
.lx-an{position:absolute; inset:0; z-index:2; pointer-events:none}

/* identitatea: sus, în stânga */
.lx-id{position:absolute; z-index:3; top:calc(16px + env(safe-area-inset-top,0px)); left:var(--gut); max-width:min(560px,48vw); pointer-events:none; text-shadow:0 1px 3px rgba(0,0,0,.9)}
.lx-id::before{content:""; position:absolute; left:calc(-1 * var(--gut)); top:-20px; width:min(760px,82vw); height:240px; z-index:-1; pointer-events:none;
  background:radial-gradient(115% 100% at 0 0,rgba(3,6,10,.92) 0,rgba(3,6,10,.8) 52%,rgba(3,6,10,.4) 76%,rgba(3,6,10,0) 100%)}
.lx-eye{font:600 12px/1.2 var(--f-label); letter-spacing:.16em; text-transform:uppercase; color:var(--lx-muted)}
.lx-eye b{color:var(--lx-cyan); font-weight:600}
.lx-id h1{margin:6px 0 0; font:400 clamp(24px,2.4vw,36px)/1.02 var(--f-display); letter-spacing:-.01em; color:var(--lx-ink); text-wrap:balance}
.lx-id h1 em{font-style:italic; color:var(--lx-muted)}
.lx-meta{margin-top:10px; font:400 11px/1.6 var(--f-mono); color:var(--lx-muted); font-variant-numeric:tabular-nums}
.lx-meta b{color:var(--lx-ink); font-weight:500}

/* bara de redare: aceeași redare ca a Atelierului (T, etape, final) */
/* fără backdrop-filter: peste scena WebGL animată, estomparea se recalcula în fiecare cadru (cost mare pe compozitor) */
.lx-bar{position:absolute; z-index:4; left:var(--gut); right:var(--gut-r); bottom:calc(14px + env(safe-area-inset-bottom,0px)); background:rgba(5,12,18,.92); border:1px solid var(--lx-line); border-radius:14px; padding:10px 12px 12px;
  box-shadow:0 18px 50px -26px #000}
.lx-row{display:flex; align-items:center; gap:10px; min-width:0}
.lx-play{flex:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--lx-cyan); background:transparent; color:var(--lx-cyan); display:grid; place-items:center; padding:0}
.lx-play:hover{background:rgba(127,227,255,.1)}
/* glisorul: zona de atingere de cel puțin 24 px (WCAG 2.5.8), pista rămâne subțire */
.lx-t{flex:1 1 auto; min-width:80px; min-height:28px; margin:0; accent-color:var(--lx-cyan); cursor:pointer}
.lx-clk{position:relative; flex:none; display:flex; flex-direction:column; align-items:flex-end; min-width:150px; max-width:280px; font:400 12px/1.3 var(--f-mono); font-variant-numeric:tabular-nums; color:var(--lx-ink); white-space:nowrap}
/* redarea îl așteaptă pe analist la capătul etapei (cel mult 2,5 s): semnul ia locul etichetei, fără să schimbe bara */
.lx-holdtx{position:absolute; right:0; bottom:0; display:none; font:400 10.5px/1.3 var(--f-mono); color:var(--lx-cyan); white-space:nowrap}
.lx-bar.lx-hold .lx-holdtx{display:block; animation:lx-blink 1.1s ease-in-out infinite}
.lx-bar.lx-hold #lxClkB{visibility:hidden}
.lx-bar.lx-hold .lx-tks button[aria-current="true"]{border-color:var(--lx-cyan); box-shadow:inset 0 0 0 1px rgba(127,227,255,.5)}
@keyframes lx-blink{0%,100%{opacity:.45} 50%{opacity:1}}
/* eticheta ceasului se rupe pe două rânduri, nu se taie */
.lx-clk small{font:400 10.5px/1.3 var(--f-mono); color:var(--lx-muted); max-width:270px; white-space:normal; text-align:right; text-wrap:balance}
.lx-clk small.warn{color:var(--lx-amber)}
/* vocea analistului: în bară, nu pe scenă */
.lx-voice{flex:none; display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 12px; border-radius:10px; border:1px solid var(--lx-line); background:rgba(2,8,12,.6); color:var(--lx-muted); font:600 12px/1 var(--f-label); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap}
.lx-voice .vw{opacity:.35}
.lx-voice:hover{color:var(--lx-ink); border-color:rgba(127,227,255,.6)}
.lx-voice[aria-pressed="true"]{color:var(--lx-cyan); border-color:var(--lx-cyan); background:rgba(127,227,255,.08)}
.lx-voice[aria-pressed="true"] .vw{opacity:1}
.lx-voice.off{border-style:dashed; color:#6f8a96}
.lx-cmd{flex:0 1 290px; min-width:150px; display:flex; align-items:center; gap:8px; height:40px; padding:0 12px; border:1px solid var(--lx-line); border-radius:10px; background:rgba(2,8,12,.6); color:var(--lx-muted)}
.lx-cmd:focus-within{border-color:var(--lx-cyan)}
.lx-cmd input{flex:1; min-width:0; border:0; background:transparent; outline:none; color:var(--lx-ink); font:400 14px var(--f-body)}
.lx-cmd input::placeholder{color:#6f8f9c}
.lx-go{flex:none; min-height:40px; padding:0 16px; border-radius:10px; border:1px solid rgba(127,227,255,.45); background:rgba(127,227,255,.06); color:var(--lx-ink); font:600 13px/1 var(--f-label); letter-spacing:.1em; text-transform:uppercase; display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.lx-go:hover{border-color:var(--lx-cyan); background:rgba(127,227,255,.12)}
.lx-go.lx-main{background:var(--lx-cyan); border-color:var(--lx-cyan); color:#03121a; animation:lx-pulse 2.4s ease-out infinite}
.lx-go.lx-busy{cursor:progress; opacity:.75}
@keyframes lx-pulse{0%{box-shadow:0 0 0 0 rgba(127,227,255,.55)} 70%{box-shadow:0 0 0 14px rgba(127,227,255,0)} 100%{box-shadow:0 0 0 0 rgba(127,227,255,0)}}
.lx-gs{display:none}
.lx-tks{display:flex; gap:4px; margin-top:8px; overflow-x:auto; scrollbar-width:none}
.lx-tks::-webkit-scrollbar{display:none}
.lx-tks button{flex:1 1 0; min-width:64px; border:1px solid var(--lx-line); background:transparent; color:var(--lx-muted); border-radius:8px; padding:6px; min-height:34px; font:600 12px/1.1 var(--f-label); letter-spacing:.07em; text-transform:uppercase; position:relative; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.lx-tks button i{position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--lx-cyan)}
.lx-tks button.prop i{background:var(--lx-amber)}
.lx-tks button:hover{color:var(--lx-ink)}
.lx-tks button[aria-current="true"]{color:var(--lx-ink); border-color:var(--lx-cyan)}
.lx-tks .lx-s{display:none}
@media (max-width:1399px){ .lx-tks .lx-l{display:none} .lx-tks .lx-s{display:inline} }
.lx-tks button.done{color:#b9dbe8}
.lx-toast{position:absolute; z-index:6; left:50%; bottom:calc(132px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); max-width:min(560px,86vw); padding:8px 14px; border-radius:999px; background:rgba(3,10,15,.92); border:1px solid var(--lx-line); color:var(--lx-ink); font-size:13px; opacity:0; transition:opacity .25s; pointer-events:none}
.lx-toast.on{opacity:1}

/* vălul negru-cian: din el apare laboratorul (și pe el se vede încărcarea) */
.lx-veil{position:absolute; inset:0; z-index:20; display:grid; place-items:center; opacity:1; transition:opacity 1.6s cubic-bezier(.2,.6,.2,1);
  background:radial-gradient(ellipse 55% 45% at 50% 56%,rgba(40,150,190,.22),rgba(2,8,12,0) 72%),var(--lx-deep)}
.lx-veil.off{opacity:0; pointer-events:none}
.lx-veil.fast{transition-duration:.4s}
.lx-veil.fast:not(.off){transition-duration:.25s}
.lx-veil.bare{background:var(--lx-deep)}
.lx-veil.bare .lx-veil-in{opacity:0}
.lx-veil-in{transition:opacity .35s ease}
.lx-veil.off .lx-veil-in{opacity:0}
.lx-veil-in{width:min(460px,calc(100% - 2 * var(--gut))); text-align:center}
.lx-veil p{margin:12px 0 0; font:400 clamp(20px,2vw,26px)/1.25 var(--f-display); color:var(--lx-ink)}
.lx-prog{display:block; margin:18px auto 0; width:min(260px,70%); height:2px; background:rgba(127,227,255,.14); overflow:hidden}
.lx-prog b{display:block; height:100%; width:0; background:var(--lx-cyan); box-shadow:0 0 8px var(--lx-cyan); transition:width .2s}
.lx-veil .lx-go{margin-top:18px}

/* deschiderea: filmul pe tot ecranul, cu ieșire discretă */
.lx-intro{position:fixed; inset:0; z-index:70; background:#02080c; opacity:1; transition:opacity .9s ease; color:#e7f6fd; font-family:var(--f-body)}
.lx-intro.off{opacity:0; pointer-events:none}
.lx-intro.off-fast{opacity:0; pointer-events:none; transition-duration:.35s}
.lx-intro video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#02080c}
/* pe ecran înalt (telefon în portret), filmul 16:9 nu se taie: încape întreg, pe fundalul negru-cian */
@media (max-aspect-ratio:1/1){ .lx-intro video{object-fit:contain; background:radial-gradient(ellipse 80% 40% at 50% 50%,rgba(40,150,190,.16),rgba(2,8,12,0) 70%),#02080c} }
.lx-intro.still video{object-fit:cover}
.lx-intro-brand{
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; pointer-events:none; padding:0 32px;
  background:radial-gradient(ellipse 68% 52% at 50% 50%, rgba(3,10,16,.18) 0%, rgba(2,8,12,.56) 100%);
  opacity:0; transform:translateY(8px) scale(.985);
  transition:opacity .75s cubic-bezier(.16,1,.3,1), transform .95s cubic-bezier(.16,1,.3,1), background .6s ease;
}
.lx-intro-brand.is-on{opacity:1; transform:translateY(0) scale(1)}
.lx-intro-brand.is-flare{
  background:radial-gradient(ellipse 64% 48% at 50% 50%, rgba(127,227,255,.16) 0%, rgba(3,10,16,.44) 68%, rgba(2,8,12,.76) 100%);
}
.lx-intro-kicker{
  font:600 12px/1.3 var(--f-label); letter-spacing:.34em; text-transform:uppercase;
  color:#7fe3ff; text-shadow:0 0 18px rgba(127,227,255,.72), 0 2px 10px rgba(0,0,0,.9); margin-bottom:12px;
}
.lx-intro-title{
  margin:0; font:400 clamp(44px,6.2vw,86px)/1.02 var(--f-display); letter-spacing:.16em; text-transform:uppercase;
  color:#f3fbff; text-shadow:0 0 42px rgba(127,227,255,.62), 0 10px 36px rgba(0,0,0,.92);
}
.lx-intro-title em{
  font-style:italic; color:#7fe3ff; text-shadow:0 0 48px rgba(127,227,255,.95);
}
.lx-intro-rule{
  width:min(540px,70vw); height:1px; margin:18px auto 16px;
  background:linear-gradient(90deg, transparent 0%, rgba(127,227,255,.9) 35%, rgba(255,179,107,.9) 65%, transparent 100%);
  box-shadow:0 0 22px rgba(127,227,255,.75);
}
.lx-intro-sub{
  margin:0; max-width:860px; font:500 clamp(11px,1.1vw,13.5px)/1.65 var(--f-mono);
  letter-spacing:.18em; text-transform:uppercase; color:rgba(235,247,253,.95);
  text-shadow:0 2px 18px rgba(0,0,0,.95), 0 0 24px rgba(127,227,255,.42);
}
.lx-skip{position:absolute; right:calc(var(--gut-r) + 6px); bottom:calc(22px + env(safe-area-inset-bottom,0px)); display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 14px; border-radius:999px; border:1px solid rgba(231,246,253,.28); background:rgba(2,8,12,.62); color:rgba(231,246,253,.82); font:600 12px/1 var(--f-label); letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:color .2s, border-color .2s}
.lx-skip:hover{color:#fff; border-color:rgba(127,227,255,.7)}
.lx-skip kbd{font:500 10px/1 var(--f-mono); letter-spacing:0; text-transform:none; padding:3px 5px; border-radius:4px; border:1px solid rgba(231,246,253,.25); color:rgba(231,246,253,.7)}
.lx-start{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); min-height:48px; padding:0 22px; border-radius:999px; border:1px solid #7fe3ff; background:rgba(2,8,12,.55); color:#e7f6fd; font:600 14px/1 var(--f-label); letter-spacing:.12em; text-transform:uppercase; cursor:pointer}
.lx-intro-bar{position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(127,227,255,.1)}
.lx-intro-bar b{display:block; height:100%; width:0; background:#7fe3ff; box-shadow:0 0 8px #7fe3ff; transition:width .25s linear}
.lx-intro :focus-visible{outline:2px solid #7fe3ff; outline-offset:2px}

/* butonul „Laborator” din Atelier, lângă vederile Clădire / Plan / Secțiune */
.labbtn{display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(11,20,25,.55); background:rgba(243,245,242,.62); color:#0b1419; border-radius:999px; padding:0 14px 0 12px; min-height:42px; cursor:pointer;
  font-family:var(--f-label); font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .2s, color .2s, border-color .2s}
.labbtn i{width:9px; height:9px; border-radius:50%; background:#ff9a4a; box-shadow:0 0 0 2px rgba(255,154,74,.22); animation:lx-dot 2.6s ease-in-out infinite}
@keyframes lx-dot{0%,100%{box-shadow:0 0 0 2px rgba(255,154,74,.22),0 0 4px rgba(255,154,74,.4)} 50%{box-shadow:0 0 0 4px rgba(255,154,74,.12),0 0 12px rgba(255,154,74,.85)}}
.labbtn:hover, .labbtn:focus-visible{background:#0b1419; color:#e7f6fd; border-color:#0b1419}
.labbtn:focus-visible{outline:2px solid var(--cobalt); outline-offset:2px}

/* ecran îngust sau aproape pătrat (lățime/înălțime sub 1,15, ca BAND_ASPECT din js): analistul devine bandă jos,
   deci bara de redare urcă sub titlu */
@media (max-width:759px), (max-aspect-ratio:23/20){
  .lx-id{max-width:calc(100% - 2 * var(--gut))}
  .lx-id::before{height:150px}
  .lx-id h1{font-size:22px}
  .lx-meta{display:none}
  /* bara restrânsă: un rând (redare, ceas, voce, Atelier) și glisorul dedesubt; fără rândul etapelor */
  .lx-bar{top:calc(92px + env(safe-area-inset-top,0px)); bottom:auto; padding:6px 8px 4px; background:rgba(5,12,18,.97)}
  .lx-row{flex-wrap:wrap; gap:6px 8px}
  .lx-play{width:36px; height:36px}
  .lx-t{order:5; flex:1 1 100%}
  .lx-clk{min-width:0; flex:1 1 auto; align-items:flex-start; font-size:11.5px}
  .lx-clk small{font-size:10px}
  .lx-holdtx{left:0; right:auto}
  .lx-cmd, .lx-tks{display:none}
  .lx-voice{min-height:36px; padding:0 10px}
  .lx-voice span{display:none}
  .lx-go{min-height:36px; padding:0 12px; font-size:12px}
  .lx-gl{display:none} .lx-gs{display:inline}
  .lx-toast{bottom:auto; top:calc(250px + env(safe-area-inset-top,0px))}
}
@media (max-width:1180px) and (min-width:760px){ .lx-cmd{flex-basis:200px} .lx-clk{min-width:120px; max-width:200px} }
/* ecran scund (telefon în peisaj): antet de un rând, bară pe un singur rând, fără rândul etapelor și fără caseta de
   comandă; subtitrarea analistului e o fâșie îngustă deasupra barei, iar capsula ocupă zona rămasă (viewOffset) */
@media (max-height:500px) and (min-aspect-ratio:23/20){
  .lx-id{top:calc(8px + env(safe-area-inset-top,0px)); max-width:min(440px,52vw)}
  .lx-id::before{height:84px; top:-12px}
  .lx-eye{font-size:10px; letter-spacing:.12em}
  .lx-id h1{margin-top:2px; font-size:19px}
  .lx-meta{display:none}
  .lx-bar{bottom:calc(6px + env(safe-area-inset-bottom,0px)); padding:5px 8px; border-radius:11px}
  .lx-row{gap:6px}
  .lx-play{width:34px; height:34px}
  .lx-tks, .lx-cmd{display:none}
  .lx-clk{min-width:0; max-width:190px; font-size:11px}
  .lx-clk small{font-size:9.5px; max-width:190px}
  .lx-voice{min-height:34px; padding:0 9px}
  .lx-voice span{display:none}
  .lx-go{min-height:34px; padding:0 10px; font-size:11.5px; letter-spacing:.06em}
  .lx-toast{bottom:auto; top:calc(70px + env(safe-area-inset-top,0px))}
}
@media (prefers-reduced-motion: reduce){
  .lx, .lx-veil, .lx-intro, .lx-toast, .lx-prog b, .lx-intro-bar b{transition:none}
  .lx-bar.lx-hold .lx-holdtx{animation:none; opacity:1}
  .labbtn i{animation:none}
  .lx-go.lx-main{animation:none; box-shadow:0 0 0 3px rgba(127,227,255,.35)}
}