/* LA FAIM - Homepage Specific Styles */



.spine{ position:fixed; left:0; top:0; bottom:0; width:34px; z-index:40; pointer-events:none; display:flex; align-items:center; justify-content:center; border-right:1px solid var(--color-border); background:rgba(6,9,13,.4); }
.spine span{ writing-mode:vertical-rl; transform:rotate(180deg); font-size:10px; letter-spacing:.4em; color:var(--color-text-muted); text-transform:uppercase; }
@media(max-width:640px){ .spine{ display:none; } }

/* COVER intro */
.cover{ position:fixed; inset:0; z-index:90; display:flex; }
/* Cele două canaturi. Cusătura dintre ele nu mai e o linie portocalie decorativă, ci
   LUMINA din camera de dincolo: se lărgește la 3px și devine alb-cald, pulsând sincron
   cu becul (6.5s) — o ușă întredeschisă cu lumina aprinsă înăuntru. */
/* z-index explicit: canaturile (și lumina dintre ele) stau SUB conținut. Animația de pe
   ele creează un stacking context propriu, iar fără asta cusătura trecea peste buton. */
.cover .half{ position:relative; z-index:1; flex:1; background:var(--color-void); border-right:1px solid var(--color-orange); transition:transform 1.1s cubic-bezier(.76,0,.24,1); }
/* A doua jumătate NU e :last-child (după ea vin .cover-rec, .door-no, .center) → selectorul vechi nu se aplica
   niciodată: jumătatea din dreapta păstra bordura portocalie pe marginea ecranului și nu se deschidea. */
.cover .half + .half{ border-right:0; }
/* Lumina e STATICĂ, deliberat. O animație pe canaturi le promovează într-un layer de
   compositing propriu, care se desenează peste butonul CTA chiar dacă z-index-ul spune
   altfel (verificat: fără animație, cusătura trece corect pe sub buton). Un pâlpâit
   subtil nu merită un artefact vizual peste elementul cel mai important din cadru. */
.cover.lit .half:first-child{ border-right-width:3px; border-right-color:#F0EEE5; }
.cover.lit .half:last-child{ border-left-width:3px; border-left-color:#F0EEE5; }

.cover .center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px; z-index:5; padding:0 22px; transition:opacity .4s ease; }
.cover .meta{ font-size:11px; letter-spacing:.35em; color:var(--color-text-muted); }
/* v2+: fanta de lumină dintre canaturi trecea PRIN litere („te-|am reținut", „d|osar").
   Fiecare rând de text primește o bandă opacă de culoarea ușii: lumina se vede între
   rânduri, ca printr-o crăpătură, dar nu mai taie textul. */
/* Regie 02.10: benzile pe fiecare rând lăsau lumina să treacă în fâșii PRINTRE rânduri
   (o linie albă de 8px între „reținut." și buton, încă una sub „se aude") — arăta a
   defect de randare. Acum blocul e o singură placă opacă: fanta se oprește curat
   deasupra și dedesubt, iar o dâră caldă abia vizibilă pe muchii spune că lumina e
   în spatele ei. */
.cover-box{ position:relative; display:flex; flex-direction:column; align-items:center; gap:16px; padding:22px 26px 20px; background:var(--color-void); box-shadow:0 -1px 0 rgba(240,238,229,.10), 0 1px 0 rgba(240,238,229,.10); }
.cover-box .transcript{ max-width:none; white-space:nowrap; }
@media (max-width:380px){ .cover-box{ padding:20px 14px 18px; } .cover-box .transcript{ white-space:normal; max-width:26ch; } }
.cover-box .cover-explain{ max-width:42ch; }

/* REC pe cortină — camera te înregistrează dinainte să intri. */
.cover-rec{ position:absolute; top:18px; right:20px; z-index:3; display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; color:var(--color-text-muted); }
.cover-rec .rec{ display:flex; align-items:center; gap:6px; color:var(--color-text-sub); }
.cover-rec .rec::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--color-orange); box-shadow:var(--glow-orange); animation:rec-blink 1.4s steps(1,end) infinite; }

/* Numărul de pe ușă: placă mică de metal, jos-stânga. Asimetric față de REC (sus-dreapta). */
.door-no{ position:absolute; left:20px; bottom:22px; z-index:3; font-family:var(--font-mono); font-size:13px; font-weight:700; letter-spacing:.22em; color:var(--color-text-muted); border:1px solid var(--color-border-mid); padding:6px 12px; background:rgba(6,9,13,.55); }

/* Procesul-verbal. min-height rezervă DOUĂ rânduri din start → butonul nu se mișcă (CLS 0). */
.transcript{ font-family:var(--font-mono); font-size:clamp(13px,3.4vw,15px); line-height:1.5; color:var(--color-text); letter-spacing:.01em; min-height:calc(2 * 1.5em); max-width:26ch; margin:0; display:flex; align-items:center; justify-content:center; gap:1px; }
.caret{ display:inline-block; width:7px; height:1.05em; background:var(--color-orange); opacity:0; }
.transcript.typing .caret{ opacity:1; animation:caretBlink .9s steps(1,end) infinite; }
@keyframes caretBlink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

.sound-hint{ margin:0; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--color-text-muted); }
/* Ținta de atingere trebuie să aibă cel puțin 24px (WCAG 2.2 — Target Size Minimum).
   Padding-ul vertical o duce la 24px fără să schimbe felul în care arată textul. */
.silent-link{ background:none; border:0; padding:4px 6px; margin:-4px -6px; min-height:24px; font:inherit; color:var(--color-text-sub); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.silent-link:hover{ color:var(--color-cyan); }

@media (prefers-reduced-motion: reduce){
  .cover-rec .rec::before{ animation:none; }
  .transcript.typing .caret{ animation:none; }
}
/* Plain-RO clarity (the "easy to understand for everyone" requirement) — tells a
   first-time visitor WHAT this is + WHAT to do, without breaking the dossier mood. */
/* Nu mai e argumentul principal — ăla e ușa. E nota de subsol care lămurește ce urmează. */
.cover-explain{ max-width:34ch; margin:2px auto 0; font-family:var(--font-mono); font-size:11px; line-height:1.6; color:var(--color-text-muted); letter-spacing:.01em; }
.cover-explain b{ color:var(--color-text); }
.hero-explain{ margin-top:14px; font-family:var(--font-mono); font-size:clamp(11px,1.5vw,13px); line-height:1.6; letter-spacing:.03em; color:var(--color-text-sub); }
.hero-explain span{ color:var(--color-orange); padding:0 .3em; font-weight:700; }
.cover .open-btn{ margin-top:8px; background:var(--color-orange); color:var(--color-void); border:0; font-family:var(--font-mono); font-weight:700; font-size:13px; letter-spacing:.2em; padding:16px 30px; cursor:pointer; box-shadow:var(--glow-orange-soft); transition: filter var(--dur-1) var(--ease-glide), transform var(--dur-1) var(--ease-snap), box-shadow var(--dur-2) var(--ease-glide); }
.cover .open-btn:hover{ filter:brightness(1.08); transform:translateY(-2px); }
.cover .open-btn:active{ transform: scale(0.98); filter: brightness(1.2); }
.cover.opening .half:first-child{ transform:translateX(-100%); }
.cover.opening .half + .half{ transform:translateX(100%); }
.cover.opening .center{ opacity:0; }
/* REC-ul și plăcuța 239 ale ușii plecau abia la .done (1,2 s): pe telefon REC-ul ușii stătea peste butonul
   DOSAR din antet, lângă REC-ul paginii — „sacadarea de sus” raportată pe 15.10.2026. Pleacă odată cu textul. */
.cover.opening .cover-rec, .cover.opening .door-no{ opacity:0; transition:opacity .25s ease; }
.cover.done{ display:none; }
.flash{ position:fixed; inset:0; z-index:95; background:#fff; opacity:0; pointer-events:none; }
.flash.go{ animation:flash .5s ease; }
@keyframes flash{ 0%{opacity:0} 8%{opacity:.95} 100%{opacity:0} }

/* SECTIONS full-bleed */
section{ position:relative; width:100%; }
.pad{ padding:0 46px; }
@media(max-width:640px){ .pad{ padding:0 22px; } }

/* HERO */
/* <main> are padding vertical din lafaim.css (var(--space-6) = 32px). Hero-ul cerea
   100svh PESTE acel padding, deci se termina 32px sub fold pe ORICE ecran — iar
   indicatorul „SCROLL ↓", ancorat la baza hero-ului, cadea in afara ecranului.
   Singurul semn ca mai e ceva dedesubt era invizibil. Hero-ul isi ia ecranul intreg. */
main:has(> .hero){ padding-top:0; }
.hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:7vh; overflow:hidden; }
/* Becul e încă o randare (Principiul 1 cere înlocuirea lui cu un cadru filmat real).
   Până vine cadrul, îl tratăm ca semnal CCTV: aproape alb-negru, contrast strivit,
   mai întunecat — așa citește a înregistrare de supraveghere, nu a imagine generată.
   Regula de culoare a camerei: totul e gri, singurul lucru cald e omul. */
.hero .bg{ position:absolute; inset:0; z-index:-2; background:var(--color-void) url("/img/bg-interrogation.webp") center/cover no-repeat; opacity:.42; filter:saturate(.18) contrast(1.28) brightness(.92); animation:kb 28s ease-in-out infinite alternate, heroBulb 6.5s steps(2,end) infinite; }
/* Art direction, nu doar redimensionare: pe ecran lat trece camera REALĂ (cadrul din
   filmare, extins lateral din aceeași fotografie), fiindcă acolo formatul 2.5:1 spune
   povestea — masa, cei doi oameni, distanța dintre ei. Pe mobil rămâne becul, a cărui
   compoziție verticală funcționează în portret. Becul e încă o randare; cadrul lat nu. */
@media (min-width:900px){
  .hero .bg{ background-image:url("/img/room-wide.webp"); background-position:center 42%; opacity:.5; }
}
/* The hanging interrogation bulb "buzzes" — subtle dim flickers, never a strobe. */
@keyframes heroBulb{ 0%,100%{opacity:.5} 48%{opacity:.5} 48.6%{opacity:.4} 49.2%{opacity:.5} 86%{opacity:.5} 86.5%{opacity:.43} 87%{opacity:.52} 87.5%{opacity:.5} }
@media (prefers-reduced-motion: reduce){ .hero .bg{ animation:none; } }
.hero::after{ content:""; position:absolute; inset:0; z-index:-1; background:var(--grad-ember), linear-gradient(180deg, rgba(6,9,13,.55) 0%, rgba(6,9,13,.34) 42%, var(--color-void) 100%); }
@keyframes kb{ from{transform:scale(1)} to{transform:scale(1.12)} }
.hero .wm{ position:absolute; right:2vw; top:8vh; z-index:-1; font-family:var(--font-disp); font-weight:700; font-size:46vh; color:#fff; opacity:.03; line-height:1; }
.kick{ font-size:11px; letter-spacing:.4em; color:var(--color-orange); text-transform:uppercase; margin-bottom:18px; }
.hero h1{ font-size:clamp(64px,17vw,260px); }
.hero h1 .x{ color:var(--color-orange); }
.hero .sub{ margin-top:14px; font-size:clamp(11px,1.4vw,14px); letter-spacing:.3em; color:var(--color-text-sub); text-transform:uppercase; }
.hero .acts{ margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
/* BECUL (OBIECTUL 1 din concept). Al doilea gest din cameră, după CTA: stinge curentul.
   Nu e un „dark mode" — Trana a tăiat curentul ȘI a deschis ușile, deci când se ia
   lumina rămân vizibile doar ieșirile. Adică e și cea mai rapidă navigare de pe site.
   Stă ÎN FLUX, sub butoane: nu se poate suprapune peste nimic și nu poate muta nimic.
   Gri, nu portocaliu — portocaliul de pe ecran e rezervat conversiei. */
.bulb-line{ margin-top:18px; margin-bottom:2px; font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; color:var(--color-text-muted); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bulb-btn{ min-height:34px; padding:8px 13px; border:1px solid var(--color-border-mid); background:none; color:var(--color-text-sub); font:700 10px/1 var(--font-mono); letter-spacing:.16em; text-transform:uppercase; cursor:pointer; transition:color var(--dur-2) var(--ease-glide), border-color var(--dur-2) var(--ease-glide); }
.bulb-btn:hover{ color:var(--color-orange); border-color:var(--color-orange); }
.bulb-btn:focus-visible{ outline:2px solid var(--color-cyan); outline-offset:3px; }

/* Hero / section CTA — restored after the refactor orphaned it, upgraded premium.
   Primary = orange (the human/action signal); ghost hover = cyan (surveillance accent). */
.cta{
  display:inline-flex; align-items:center; gap:.55em;
  background:var(--color-orange); color:var(--color-void);
  font-family:var(--font-mono); font-weight:700; font-size:13px;
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  padding:16px 26px; position:relative; isolation:isolate;
  transition:transform var(--dur-1) var(--ease-snap), box-shadow var(--dur-2) var(--ease-glide), filter var(--dur-2) var(--ease-glide);
}
.cta:hover{ transform:translateY(-2px); box-shadow:var(--glow-orange-soft); filter:brightness(1.06); }
.cta:active{ transform:translateY(0) scale(.985); }
.cta.ghost{ background:transparent; color:var(--color-text); border:1px solid var(--color-border-mid); }
.cta.ghost:hover{ border-color:var(--color-cyan); color:var(--color-cyan); box-shadow:none; filter:none; }
.scrollcue{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); font-size:9px; letter-spacing:.3em; color:var(--color-text-muted); will-change:transform,opacity; animation:scrollcue-bob 2.6s var(--ease-inout) infinite; }
@keyframes scrollcue-bob{ 0%,100%{ transform:translate(-50%,0); opacity:.5 } 50%{ transform:translate(-50%,6px); opacity:1 } }

/* Primary CTA glow — a FINITE breath draws the eye on arrival, then settles to a calm
   resting aura. Premium restraint: a confident static glow beats a forever-pulsing button. */
.cta:not(.ghost){ position:relative; isolation:isolate; }
/* Butonul NU mai respiră. Inventarul de mișcare al camerei are șapte intrări și glow-ul
   pulsant pe CTA nu e una dintre ele — o lumină care palpită singură e limbaj de landing
   page, nu de dosar. Rămâne doar reacția la hover: acolo mișcarea răspunde omului. */
.cta:not(.ghost)::after{
  content:""; position:absolute; inset:-2px; z-index:-1; pointer-events:none;
  box-shadow:var(--glow-orange-soft); opacity:.14;
  transition:opacity var(--dur-2) var(--ease-glide), box-shadow var(--dur-2) var(--ease-glide);
}
.cta:not(.ghost):hover::after{ opacity:.9; box-shadow:var(--glow-orange), var(--glow-orange-soft); }

/* REC / live surveillance indicator on the hero (CCTV corner overlay). */
/* Indicatorul de cameră stă SUB bara de navigare, nu la aceeași înălțime cu ea:
   altfel butonul „DOSAR ≡" cădea peste timecode (măsurat: 84×7px pe 360, 34×7px pe
   1440). Cele 52px sunt înălțimea barei plus aer, nu un număr ales la întâmplare. */
.hero-rec{ position:absolute; top:calc(max(16px, env(safe-area-inset-top)) + 52px); right:5vw; z-index:1; display:flex; align-items:center; gap:10px; }
.rec{ display:inline-flex; align-items:center; gap:.55em; font-family:var(--font-mono); font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:var(--color-text-sub); }
.rec::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--color-orange); box-shadow:var(--glow-orange); animation:rec-blink 1.4s steps(1,end) infinite; }
.rec-time{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; color:var(--color-text-muted); }
@keyframes rec-blink{ 0%,55%{ opacity:1 } 56%,100%{ opacity:.18 } }

@media (prefers-reduced-motion: reduce){
  .scrollcue{ animation:none; opacity:.7; }
  .cta:not(.ghost)::after{ animation:none; opacity:.4; }
  .rec::before{ animation:none; opacity:1; }
}

/* MANIFEST */
.manifest{ min-height:100svh; display:flex; align-items:center; padding-top:14vh; padding-bottom:14vh; border-top:1px dashed var(--color-border-mid); }
.manifest .lbl{ font-size:10px; letter-spacing:.35em; color:var(--color-orange); margin-bottom:24px; }
.manifest h2{ font-size:clamp(28px,5vw,64px); max-width:18ch; }
.manifest .body{ margin-top:26px; max-width:60ch; font-size:clamp(13px,1.4vw,16px); line-height:1.85; color:var(--color-text-sub); }
.redacted{ background:#1a1a1a; color:transparent; padding:0 .15em; user-select:none; }
.manifest .meta-row{ margin-top:34px; display:flex; flex-wrap:wrap; gap:30px; font-size:11px; letter-spacing:.1em; color:var(--color-text-muted); }
.manifest .meta-row b{ color:var(--color-text); display:block; margin-top:4px; font-size:13px; letter-spacing:0; }
/* Regie 02.10 — ștampila filei. Pe ecran lat jumătatea dreaptă a filei 01 era goală
   (~700px de negru lângă un text de 60ch). O ștampilă de tuș, strâmbă, apăsată după ce
   fila „cade pe masă": vocabularul din Brand Bible 1.4, nu un ornament nou. Pe telefon
   nu există loc liber fără să acopere text, deci acolo nu apare. */
.manifest-stamp{ display:none; }
@media (min-width:1024px){
  .manifest{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4vw; align-items:center; min-height:86svh; }
  .manifest-stamp{ display:grid; place-items:center; width:clamp(220px,20vw,300px); aspect-ratio:1; margin-right:4vw; border:3px solid rgba(255,77,0,.72); box-shadow:inset 0 0 0 7px transparent, inset 0 0 0 8px rgba(255,77,0,.5); border-radius:50%; rotate:-11deg; opacity:.9;
    /* tuș neuniform: două pete care „mănâncă" cerneala, nu un cerc vectorial perfect */
    -webkit-mask:radial-gradient(circle at 28% 76%, transparent 0 9%, #000 15%), radial-gradient(circle at 81% 22%, rgba(0,0,0,.45) 0 7%, #000 13%); -webkit-mask-composite:source-in; mask:radial-gradient(circle at 28% 76%, transparent 0 9%, #000 15%) , radial-gradient(circle at 81% 22%, rgba(0,0,0,.45) 0 7%, #000 13%); mask-composite:intersect; }
  .manifest-stamp::before{ content:"RECHERCHÉ\A — · 239 · —\A DOSSIER PÉNAL"; white-space:pre; text-align:center; font:700 clamp(13px,1.2vw,17px)/1.75 var(--font-mono); letter-spacing:.2em; color:rgba(255,77,0,.85); }
  .manifest.reveal .manifest-stamp{ opacity:0; scale:1.9; }
  .manifest.reveal.in .manifest-stamp{ animation:mStamp .2s cubic-bezier(.2,.9,.3,1.35) .55s both; }
}
@keyframes mStamp{ from{ opacity:0; rotate:-17deg; scale:1.9; } to{ opacity:.9; rotate:-11deg; scale:1; } }
@media (prefers-reduced-motion: reduce){ .manifest.reveal .manifest-stamp, .manifest.reveal.in .manifest-stamp{ animation:none; opacity:.9; scale:1; } }

/* GENERATOR band */
.genband{ min-height:90svh; display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:6vw; border-top:1px dashed var(--color-border-mid); padding-top:10vh; padding-bottom:10vh; }
@media(max-width:820px){ .genband{ grid-template-columns:1fr; } }
.genband .lbl{ font-size:10px; letter-spacing:.35em; color:var(--color-orange); margin-bottom:22px; }
.genband h2{ font-size:clamp(34px,6vw,84px); }
.genband p{ margin-top:20px; max-width:46ch; font-size:14px; line-height:1.8; color:var(--color-text-sub); }
/* 145KB descărcați EAGER pentru un bloc decorativ aflat la ~2400px sub fold —
   38% din greutatea paginii principale, în concurență directă cu LCP-ul.
   Imaginea intră abia când secțiunea ajunge în vizor (clasa .in o pune deja
   IntersectionObserver-ul din index.html). Estetica e neatinsă. */
.genband .visual{ aspect-ratio:4/5; background:#0D1A20; border:1px solid var(--color-border); filter:grayscale(.4) contrast(1.05); position:relative; }
.genband.in .visual{ background:#0D1A20 url("/img/room-desk.webp") center/cover no-repeat; }
.genband .visual::after{ content:"PIÈCE N° 239"; position:absolute; bottom:0; left:0; right:0; background:rgba(6,9,13,.7); color:var(--color-text-muted); font-size:10px; letter-spacing:.2em; padding:8px; text-align:center; }

/* COMPLICI */
.complici{ min-height:90svh; padding-top:12vh; padding-bottom:12vh; border-top:1px dashed var(--color-border-mid); }
.complici .lbl{ font-size:10px; letter-spacing:.35em; color:var(--color-orange); margin-bottom:10px; }
.complici h2{ font-size:clamp(30px,5vw,64px); margin-bottom:30px; }

/* CCTV */
.cctv{ padding-top:12vh; padding-bottom:12vh; border-top:1px dashed var(--color-border-mid); }
.cctv .lbl{ font-size:10px; letter-spacing:.35em; color:var(--color-orange); margin-bottom:10px; }
.cctv h2{ font-size:clamp(30px,5vw,64px); margin-bottom:26px; }
.cctv-frame{ max-width:400px; aspect-ratio:9/16; background:#000; border:1px solid var(--color-border); position:relative; }
.cctv-frame video{ width:100%; height:100%; object-fit:cover; display:block; }
.cctv-meta{ margin-top:12px; font-size:10px; letter-spacing:.25em; color:var(--color-text-muted); max-width:400px; }

/* ALBUM */
.album{ min-height:90svh; padding-top:12vh; padding-bottom:12vh; border-top:1px dashed var(--color-border-mid); }
.album .lbl{ font-size:10px; letter-spacing:.35em; color:var(--color-orange); margin-bottom:10px; }
.album h2{ font-size:clamp(30px,5vw,64px); margin-bottom:30px; }
.tracks{ column-count:2; column-gap:60px; }
@media(max-width:640px){ .tracks{ column-count:1; } }
.tracks .t{ break-inside:avoid; display:flex; gap:14px; align-items:baseline; padding:13px 0; border-bottom:1px solid var(--color-border-mid); font-size:14px; }
.tracks .t .n{ color:var(--color-orange); width:26px; flex:none; }
.tracks .t .lead{ margin-left:auto; font-size:9px; letter-spacing:.15em; color:var(--color-text-muted); }

/* HOME FOOTER override */
.home-footer{ border-top:1px solid var(--color-orange); padding:60px 46px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px; }
@media(max-width:640px){ .home-footer{ padding:46px 22px; } }
/* M6 — recidiva. Textul vine din JS (localStorage), deci înălțimea se rezervă din CSS,
   altfel prima vizită și a doua ar avea footere de înălțimi diferite → CLS. */
.recidiva{ display:block; min-height:1.7em; margin-top:7px; font-family:var(--font-mono); font-size:10px; letter-spacing:.07em; color:var(--color-text-muted); }
.recidiva[data-rec]::after{ content:"RECIDIVĂ"; display:inline-block; margin-left:9px; padding:2px 6px; border:1px solid var(--color-forensic); color:var(--color-forensic); font-size:8px; letter-spacing:.16em; transform:rotate(-3deg); }
.home-footer .big{ font-family:var(--font-disp); font-weight:700; font-size:clamp(40px,9vw,120px); line-height:.9; }
.home-footer .links{ font-size:11px; letter-spacing:.15em; line-height:2.2; color:var(--color-text-muted); }
.home-footer .links a:hover{ color:var(--color-orange); }

/* `viewport-fit=cover` e activ, deci în landscape crestătura iPhone-ului intră
   peste bară (safe-area-inset-right ≈ 44px). `.container` trata deja asta corect;
   bara principală fusese uitată. */
.nav-home { position:fixed; top:0; left:0; right:0; z-index:50; display:flex; justify-content:space-between; align-items:center;
  padding:18px max(22px, env(safe-area-inset-right)) 18px max(46px, env(safe-area-inset-left)); mix-blend-mode:difference; }
@media(max-width:640px){ .nav-home{ padding-left: max(22px, env(safe-area-inset-left)); } }
/* Bara e `mix-blend-mode:difference` ca să se citească peste imaginea de hero — dar
   la derulare ajungea PESTE butoane (textul ei cădea exact peste eticheta CTA-ului
   portocaliu, două texte în aceiași pixeli). De cum pleci din hero îi dăm fundal
   propriu și scoatem blend-ul: nimic nu mai trece prin ea. */
.nav-home::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  /* Veil OPAC pe toată înălțimea barei + o linie de separare. Un gradient care se
     stinge lăsa butoanele portocalii să se vadă pe jumătate pe dedesubt — arăta a
     defect, nu a transparență intenționată. */
  background:rgba(6,9,13,.96);
  border-bottom:1px solid var(--color-border, #1E2A33);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  transition:opacity var(--dur-2, .24s) var(--ease-out, ease);
  pointer-events:none;
}
.nav-home.is-stuck{ mix-blend-mode:normal; }
.nav-home.is-stuck::before{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .nav-home::before{ transition:none; } }

/* --- Reparații desktop (audit 25 aug) --- */
/* `min-height:90svh` lăsa ecrane întregi goale sub CTA-uri pe 1080p. Păstrăm banda
   de respirație, dar centrăm conținutul în ea în loc să-l lipim sus. */
.complici, .album { display: flex; flex-direction: column; justify-content: center; }

/* Galeria de pe home se randa ca timbre de 160×90 pe toată lățimea de 1920, cu
   1400px goi în dreapta — mugshot-ul nu se vedea. */
@media (min-width: 1024px) {
  .complici .lf-gal {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    max-width: 1200px; margin-inline: auto;
  }
  /* Tracklist pe două coloane de 884px arunca eticheta „LEAD SINGLE" la 800px de titlu. */
  .tracks { max-width: 1100px; margin-inline: auto; column-gap: 80px; }
  /* Banda generatorului avea ~600px de gol între text și imagine la 1920. */
  .genband {
    max-width: 1440px; margin-inline: auto; align-items: center;
    grid-template-columns: minmax(0, 560px) minmax(0, 520px);
  }
}

/* ---------------------------------------------------------------------------
   PROBA VIDEO — intro-ul albumului, într-o ramă de supraveghere.
   Rama e din același vocabular ca hero-ul (REC · CAM), nu un player „de YouTube".
   --------------------------------------------------------------------------- */
.proba{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; gap:34px; border-top:1px dashed var(--color-border-mid); padding-top:12vh; padding-bottom:12vh; }
.proba .lbl{ font-size:10px; letter-spacing:.35em; color:var(--color-orange); margin-bottom:22px; }
.proba h2{ font-size:clamp(30px,5vw,64px); }
.proba-frame{ margin:0; width:100%; max-width:1180px; }
.proba-bar{ display:flex; justify-content:space-between; gap:16px; padding:9px 12px; font-size:10px; letter-spacing:.2em; color:var(--color-text-muted); border:1px solid var(--color-border); border-bottom:0; background:var(--color-surface); }
.proba-rec{ display:inline-block; width:7px; height:7px; margin-right:9px; border-radius:50%; background:var(--color-forensic); vertical-align:1px; animation:probaRec 1.6s steps(1) infinite; }
@keyframes probaRec{ 50%{ opacity:.15; } }
.proba-video{ position:relative; aspect-ratio:16/9; background:#000; border:1px solid var(--color-border); overflow:hidden; }
.proba-video video{ display:block; width:100%; height:100%; object-fit:cover; background:#000; }
.proba-play{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; width:100%; border:0; padding:0; cursor:pointer; color:var(--color-text); background:linear-gradient(180deg,rgba(6,9,13,.05),rgba(6,9,13,.55)); font:inherit; }
.proba-play-ico{ width:78px; height:78px; border:1px solid rgba(233,238,242,.55); border-radius:50%; position:relative; background:rgba(6,9,13,.45); transition:transform .25s ease, border-color .25s ease, background .25s ease; }
.proba-play-ico::after{ content:""; position:absolute; left:50%; top:50%; margin:-11px 0 0 -6px; border-style:solid; border-width:11px 0 11px 18px; border-color:transparent transparent transparent var(--color-text); }
.proba-play-txt{ font-size:11px; letter-spacing:.3em; }
.proba-play:hover .proba-play-ico, .proba-play:focus-visible .proba-play-ico{ transform:scale(1.06); border-color:var(--color-orange); background:var(--color-orange); }
.proba-play:focus-visible{ outline:2px solid var(--color-orange); outline-offset:-4px; }
.proba-video.is-playing .proba-play, .proba-play[hidden]{ display:none; }
.proba-note{ margin:12px 0 0; font-size:11px; line-height:1.7; letter-spacing:.04em; color:var(--color-text-muted); }
@media (prefers-reduced-motion: reduce){ .proba-rec{ animation:none; } .proba-play-ico{ transition:none; } }
@media (max-width:600px){ .proba{ min-height:auto; } .proba-bar{ font-size:9px; letter-spacing:.14em; } .proba-play-ico{ width:62px; height:62px; } }

/* ---------------------------------------------------------------------------
   REGIE 02.10 — PROBA DEVINE EVENIMENTUL PAGINII
   Înainte: o ramă de 1180px lipită la stânga, cu butonul de play fix pe placa lui
   Trana și eticheta „VIZIONEAZĂ PROBA" scrisă peste fețe; pe telefon un player de
   346px. Acum: proiecția ia toată lățimea filei, lumina ei se revarsă pe pagină
   (portocaliu, ca uniformele din cadru), butonul stă pe banda de jos — nu pe
   oameni —, iar sub cadru stau cei patru, fiecare la secunda lui din voce.
   --------------------------------------------------------------------------- */
.proba{ isolation:isolate; }
.proba::before{ content:""; position:absolute; z-index:-1; left:0; right:0; top:28%; bottom:4%; pointer-events:none;
  background:radial-gradient(60% 55% at 50% 55%, rgba(255,77,0,.10), rgba(255,77,0,.035) 45%, transparent 75%); }
.proba h2{ font-size:clamp(34px,6.4vw,96px); }
.proba-frame{ max-width:min(1440px,100%); margin-inline:auto; }
/* Vizorul camerei: patru colțuri de cretă peste imagine, ca în interfața din finalul
   filmului (cadranul CAM 04). Un singur pseudo-element, patru gradiente. */
.proba-video::after{ content:""; position:absolute; inset:14px; z-index:2; pointer-events:none; opacity:.75;
  --c:rgba(240,238,229,.7);
  background:
    linear-gradient(var(--c),var(--c)) top left/22px 1px, linear-gradient(var(--c),var(--c)) top left/1px 22px,
    linear-gradient(var(--c),var(--c)) top right/22px 1px, linear-gradient(var(--c),var(--c)) top right/1px 22px,
    linear-gradient(var(--c),var(--c)) bottom left/22px 1px, linear-gradient(var(--c),var(--c)) bottom left/1px 22px,
    linear-gradient(var(--c),var(--c)) bottom right/22px 1px, linear-gradient(var(--c),var(--c)) bottom right/1px 22px;
  background-repeat:no-repeat; transition:opacity .4s ease; }
.proba-video.is-playing::after{ opacity:0; }
/* Butonul: toată suprafața rămâne clicabilă, dar semnul de play și textul coboară pe
   banda cu numele (pe care o preiau capitolele de dedesubt). Fețele rămân libere. */
.proba-play{ flex-direction:row; justify-content:flex-start; align-items:flex-end; gap:16px; padding:0 0 clamp(18px,3.2vw,40px) clamp(18px,3.2vw,44px);
  background:linear-gradient(180deg, rgba(6,9,13,0) 58%, rgba(6,9,13,.72) 79%, rgba(6,9,13,.97) 87%, rgba(6,9,13,.98) 100%); }
.proba-play-ico{ flex:none; width:clamp(52px,5.4vw,76px); height:clamp(52px,5.4vw,76px); border-color:var(--color-orange); background:var(--color-orange); box-shadow:0 0 0 8px rgba(255,77,0,.14), var(--glow-orange-soft); }
.proba-play-ico::after{ border-color:transparent transparent transparent var(--color-void); }
.proba-play-txt{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding-bottom:4px; text-align:left; font:700 clamp(11px,1.1vw,14px)/1.2 var(--font-mono); letter-spacing:.24em; color:var(--color-text); }
.proba-play-txt::after{ content:"VO FR · SUBTITRAT ÎN ROMÂNĂ"; font-weight:400; font-size:.78em; letter-spacing:.2em; color:var(--color-text-sub); }
.proba-play:hover .proba-play-ico, .proba-play:focus-visible .proba-play-ico{ transform:scale(1.07); background:var(--color-orange); box-shadow:0 0 0 12px rgba(255,77,0,.2), var(--glow-orange); }
/* Cei patru — capitolele. Fiecare e un buton: sare la secunda lui și pornește proba. */
.proba-cap{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--color-border); border-top:0; background:var(--color-surface); }
.proba-cap[hidden]{ display:none; }
.proba-cap li + li{ border-left:1px solid var(--color-border); }
.proba-cap button{ position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:2px 10px; width:100%; min-height:64px; padding:14px 16px 13px; border:0; background:none; color:var(--color-text); font:inherit; text-align:left; cursor:pointer; transition:background var(--dur-2) var(--ease-glide); }
.proba-cap .n{ font-size:10px; letter-spacing:.12em; color:var(--color-orange); }
.proba-cap b{ font:700 13px/1.2 var(--font-mono); letter-spacing:.18em; }
.proba-cap .tc{ font-size:10px; letter-spacing:.1em; color:var(--color-text-muted); }
.proba-cap .r{ grid-column:2 / 4; font-size:10px; letter-spacing:.08em; color:var(--color-text-muted); }
.proba-cap button::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--color-orange); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease-glide); }
.proba-cap button:hover{ background:rgba(255,77,0,.06); }
.proba-cap button:hover::before, .proba-cap button.is-on::before{ transform:scaleX(1); }
.proba-cap button.is-on{ background:rgba(255,77,0,.08); }
.proba-cap button.is-on b{ color:var(--color-orange); }
.proba-cap button:focus-visible{ outline:2px solid var(--color-orange); outline-offset:-3px; }
@media (max-width:820px){
  .proba-cap{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .proba-cap li:nth-child(3){ border-left:0; }
  .proba-cap li:nth-child(n+3){ border-top:1px solid var(--color-border); }
}
/* Pe telefon proiecția stă în marginile filei (Vlad, 16.10.2026: „orizontal, dar puțin zoom out”). Întinsă pe
   toată lățimea (390 px), marginile clipului se pierdeau pe ecranele cu colțuri rotunjite sau curbate. contain = cadrul întreg, mereu. */
@media (max-width:640px){
  .proba{ gap:24px; padding-top:9vh; padding-bottom:9vh; }
  .proba-video video{ object-fit:contain; }
  .proba-video::after{ inset:10px; }
  .proba-cap button{ padding:13px 14px 12px 22px; min-height:58px; }
  .proba-cap li:nth-child(even) button{ padding-left:16px; }
  /* Pe 219px de imagine banda cu text ar acoperi plăcuțele. Rămâne doar semnul de play,
     între Trana și Piciente, pe banda de jos; eticheta e în aria-label, iar cei patru stau dedesubt. */
  .proba-bar span:last-child{ display:none; }
  .proba-play{ justify-content:center; padding:0 0 10px; background:linear-gradient(180deg, rgba(6,9,13,0) 70%, rgba(6,9,13,.55) 100%); }
  .proba-play-ico{ width:46px; height:46px; box-shadow:0 0 0 6px rgba(255,77,0,.18); }
  .proba-play-ico::after{ margin:-8px 0 0 -4px; border-width:8px 0 8px 13px; }
  .proba-play-txt{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .proba-cap button::before, .proba-video::after{ transition:none; } }

/* REGIE 02.10 — ritmul pe telefon. Fiecare filă cerea min. 90–100svh + 12–14vh de aer
   sus și jos, deci pe 390px între două file stăteau ~250px de negru: la scroll arăta a
   pagină care nu s-a încărcat, nu a pauză. Filele își păstrează linia punctată și
   respirația, dar înălțimea o dă conținutul. */
@media (max-width:640px){
  .manifest{ min-height:auto; padding-top:11vh; padding-bottom:11vh; }
  .genband, .complici, .album{ min-height:auto; padding-top:10vh; padding-bottom:10vh; }
}