/* Analistul: portretul viu de deasupra laboratorului (js/analist.js).
   Fonturile vin din pagină (Barlow, Barlow Condensed, Instrument Serif, Martian Mono); aici sunt doar rezervele. */
.an-root{
  --an-cyan:#7fe3ff; --an-ink:#e7f6fd; --an-muted:#8fb0bf; --an-num:#ffd6ad;
  --an-f-label:var(--f-label,"Barlow Condensed","Arial Narrow",Arial,sans-serif);
  --an-f-body:var(--f-body,"Barlow","Segoe UI",system-ui,sans-serif);
  --an-f-voice:var(--f-display,"Instrument Serif","Iowan Old Style",Georgia,serif);
  --an-f-mono:var(--f-mono,"Martian Mono",ui-monospace,Consolas,monospace);
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
  font-family:var(--an-f-body); color:var(--an-ink);
  transition:opacity .45s ease;
}
.an-root.an-hidden{opacity:0}
.an-root.an-loading .an-fig{opacity:0}

/* ---------- portretul (canvas: baza, gura, creierul și ochii se compun în js) ---------- */
.an-fig{position:absolute; display:block; transform-origin:50% 100%; will-change:transform; transition:opacity .8s ease; user-select:none}

/* ---------- cablurile (canvas pe toată suprafața gazdei) ---------- */
.an-cables{position:absolute; inset:0; width:100%; height:100%; display:block}
.an-tags{position:absolute; inset:0; z-index:1}
/* etichetele și barele undei se mută în fiecare cadru: fiecare pe stratul ei, ca subtitrarea (cu umbra ei mare) să nu
   se repicteze la fiecare cadru */
.an-tag{position:absolute; left:0; top:0; will-change:transform,opacity; font-family:var(--an-f-mono); font-size:11px; font-weight:500; letter-spacing:-.01em;
  color:var(--an-num); white-space:nowrap; font-variant-numeric:tabular-nums; opacity:0;
  text-shadow:0 0 10px rgba(255,150,70,.85),0 0 2px rgba(0,0,0,.9)}

/* ---------- subtitrarea ---------- */
/* --an-cap-max: limita pusă de gazdă (laboratorul: până la marginea capsulei de pe ecran) */
.an-cap{position:absolute; z-index:2; isolation:isolate; left:var(--an-cap-left,clamp(16px,4vw,64px)); bottom:var(--an-cap-bottom,56px);
  width:min(640px, calc(var(--an-fig-left,60vw) + 2vw - var(--an-cap-left,clamp(16px,4vw,64px))), var(--an-cap-max,640px));
  opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease;
  text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 22px rgba(0,0,0,.7)}
/* fundal opac, fără backdrop-filter: peste scena WebGL animată, estomparea se recalcula în fiecare cadru */
.an-cap::before{content:""; position:absolute; inset:-12px -18px -10px -18px; z-index:-1; pointer-events:none; border-radius:14px;
  background:rgba(2,6,10,.82); border:1px solid rgba(127,227,255,.1);
  box-shadow:0 0 40px 18px rgba(2,6,10,.35)}
.an-cap.an-on{opacity:1; transform:none}
.an-cap.an-idle{opacity:.55}
.an-head{display:flex; align-items:center; gap:10px; min-height:28px;
  font-family:var(--an-f-label); font-weight:600; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--an-muted)}
.an-who{color:var(--an-cyan)}
.an-stage{color:var(--an-muted)}
.an-wave{display:inline-flex; gap:2px; align-items:center; height:14px; width:18px}
.an-wave i{display:block; width:2px; height:100%; border-radius:1px; background:var(--an-cyan); transform:scaleY(.14); will-change:transform; box-shadow:0 0 6px rgba(127,227,255,.6)}
.an-voice{pointer-events:auto; margin-left:auto; display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:3px 10px;
  border:1px solid rgba(127,227,255,.28); border-radius:999px; background:rgba(4,12,18,.55); color:var(--an-muted);
  font:600 11.5px/1 var(--an-f-label); letter-spacing:.12em; text-transform:uppercase; cursor:pointer; text-shadow:none;
  transition:color .2s, border-color .2s, background .2s}
.an-voice svg{width:14px; height:14px}
.an-voice .an-vw{opacity:.35}
.an-voice:hover{color:var(--an-ink); border-color:rgba(127,227,255,.6)}
.an-voice:focus-visible{outline:2px solid var(--an-cyan); outline-offset:2px}
.an-voice[aria-pressed="true"]{color:var(--an-cyan); border-color:var(--an-cyan); background:rgba(127,227,255,.08)}
.an-voice[aria-pressed="true"] .an-vw{opacity:1}
.an-voice.an-off{color:#6f8a96; border-style:dashed}
.an-line-wrap{position:relative; margin-top:8px}
.an-line{margin:0; font-family:var(--an-f-voice); font-weight:400; font-size:clamp(22px,1.85vw,31px); line-height:1.24; letter-spacing:.004em; text-wrap:pretty}
.an-line.an-in{animation:an-in .32s ease-out both}
@keyframes an-in{from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none}}
.an-w{color:#a9c3cf; transition:color .16s ease, text-shadow .16s ease}
.an-w.p{color:#f4fbff}
.an-w.n{color:#fff; text-shadow:0 0 16px rgba(127,227,255,.85),0 0 2px rgba(127,227,255,.9),0 1px 2px rgba(0,0,0,.9)}
.an-w.num{font-variant-numeric:lining-nums tabular-nums}
.an-w.num.p, .an-w.num.n{color:var(--an-num)}
.an-w.num.n{text-shadow:0 0 16px rgba(255,160,80,.8),0 1px 2px rgba(0,0,0,.9)}
.an-cur{position:absolute; left:0; top:0; height:2px; width:0; opacity:0; border-radius:2px; pointer-events:none;
  background:linear-gradient(90deg,rgba(127,227,255,0),var(--an-cyan) 20%,var(--an-cyan) 80%,rgba(127,227,255,0));
  box-shadow:0 0 10px rgba(127,227,255,.9); transition:transform .14s ease-out, width .14s ease-out, opacity .25s}
.an-chips{display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:12px; font-family:var(--an-f-mono); font-size:10.5px; color:var(--an-muted); text-shadow:none}
.an-chips[hidden]{display:none}
.an-chip{display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.an-chip::before{content:""; width:8px; height:8px; border-radius:2px; background:var(--c); box-shadow:0 0 6px var(--c)}
.an-chip b{color:var(--an-ink); font-weight:500}
.an-src{margin-top:10px; font-family:var(--an-f-mono); font-size:10px; letter-spacing:.02em; color:rgba(143,176,191,.85); text-shadow:none}
.an-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- ecran îngust: portretul devine bandă jos ---------- */
.an-bandbg{display:none}
.an-band .an-bandbg{display:block; position:absolute; left:0; right:0; bottom:0; height:calc(var(--an-band-h,240px) + 40px);
  background:linear-gradient(to top,rgba(2,6,10,.94) 0,rgba(2,6,10,.82) 55%,rgba(2,6,10,0) 100%)}
/* pe ecran îngust, subtitrarea e un panou: cablurile trec pe sub el, spre capsulă */
.an-band .an-cap{left:12px; right:12px; width:auto; bottom:calc(var(--an-band-h,240px) + 4px); padding:10px 12px 10px}
.an-band .an-cap::before{inset:0; border-radius:12px; border:1px solid rgba(127,227,255,.16); background:rgba(3,9,13,.86)}
.an-band .an-line{font-size:clamp(17px,4.6vw,21px); line-height:1.26}
.an-band .an-head{font-size:11px; letter-spacing:.14em}
.an-band .an-chips{gap:3px 10px; font-size:10px}
.an-band .an-src{font-size:9.5px}

/* ---------- ecran scund (telefon în peisaj): subtitrarea e o fâșie de două rânduri, fără sursă și fără etichete ---------- */
@media (max-height:500px) and (min-aspect-ratio:23/20){
  .an-root:not(.an-band) .an-cap{bottom:var(--an-cap-bottom,56px); width:min(560px, calc(var(--an-fig-left,60vw) - var(--an-cap-left,clamp(16px,4vw,64px)) - 8px))}
  .an-root:not(.an-band) .an-cap::before{inset:-6px -10px -6px -10px; border-radius:10px}
  .an-root:not(.an-band) .an-head{min-height:18px; font-size:10px; letter-spacing:.14em}
  .an-root:not(.an-band) .an-line-wrap{margin-top:2px}
  .an-root:not(.an-band) .an-line{font-size:14.5px; line-height:1.2}
  .an-root:not(.an-band) .an-chips, .an-root:not(.an-band) .an-src{display:none}
}

/* ---------- mișcare redusă: o stare statică ---------- */
.an-still .an-line.an-in{animation:none}
.an-still .an-cap{transition:none}
@media (prefers-reduced-motion: reduce){
  .an-line.an-in{animation:none}
  .an-cap, .an-cur, .an-w{transition:none}
}
