/* stil.css — Vacuserv, prototipul „Coborârea".
 * Toate culorile și mărimile vin din ../tokens.css. În scenă, culoarea textului se
 * schimbă odată cu fundalul (aer → vid): coborarea.js pune variabilele --scena-* pe
 * <html>; fără JS rămân valorile de pe fundalul deschis.
 */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--c-aer);
  color: var(--c-cerneala);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-corp);
  font-stretch: 100%;
  font-weight: 400;
  background: var(--c-aer);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
sup { font-size: 0.58em; line-height: 0; vertical-align: 0.62em; letter-spacing: 0; }

:focus-visible {
  outline: 2px solid var(--scena-semnal, var(--c-semnal));
  outline-offset: 3px;
  border-radius: var(--r-mic);
}

@view-transition { navigation: auto; }

.sari {
  position: absolute; left: var(--margine); top: -4rem; z-index: 50;
  background: var(--c-cerneala); color: var(--c-aer);
  padding: var(--s-2) var(--s-4); text-decoration: none;
}
.sari:focus { top: var(--s-2); }

/* ---------------------------------------------------------------- etichete */
.eticheta {
  font-family: var(--font-mono);
  font-stretch: var(--lat-eticheta);
  font-size: var(--step--1);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--track-eticheta);
  text-transform: uppercase;
}
.eticheta .nr { margin-right: 1.1em; color: var(--scena-semnal, var(--c-semnal)); }

/* ------------------------------------------------------------------ butoane */
.buton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0 1.5rem;
  border: 1px solid currentColor; border-radius: var(--r-buton);
  font-family: var(--font-body); font-size: 1rem; font-weight: 500; line-height: 1;
  text-decoration: none; white-space: nowrap;
}
/* Tranziția doar la hover: culorile din scenă se schimbă continuu la derulare, iar
   butoanele nu au voie să rămână în urma fundalului. */
.buton:hover {
  background: var(--scena-linie, var(--c-linie));
  transition: background-color .35s var(--ease-precis), color .35s var(--ease-precis);
}
.buton--plin {
  background: var(--scena-fg, var(--c-cerneala));
  color: var(--scena-bg, var(--c-aer));
  border-color: transparent;
}
.buton--plin:hover { background: var(--scena-semnal, var(--c-semnal)); color: var(--c-aer); }

/* ------------------------------------------------------------------- antet */
.antet {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--margine);
  color: var(--scena-fg, var(--c-cerneala));
}
.marca {
  display: inline-flex; align-items: center; gap: 0.7rem;
  text-decoration: none;
}
.marca-semn { width: 2.2rem; height: auto; display: block; }
.marca-nume {
  font-family: var(--font-display);
  font-stretch: var(--lat-display);
  font-weight: 300;
  font-size: 1.125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.antet-tel {
  display: inline-flex; align-items: baseline; gap: 0.9em;
  font-family: var(--font-mono); font-stretch: var(--lat-eticheta);
  font-size: var(--step--1); letter-spacing: 0.04em;
  text-decoration: none;
}
.antet-tel-et { color: var(--scena-fg-2, var(--c-cerneala-2)); }
.antet-tel:hover .antet-tel-nr { color: var(--scena-semnal, var(--c-semnal)); }

/* ==========================================================================
   Coborârea — fără JS (sau cu mișcare redusă): capitolele una sub alta.
   ========================================================================== */
.cob { position: relative; }
.cob-pin { padding: var(--s-9) var(--margine) var(--s-8); }
.cob-aer, .cob-rigla, .cob-instrument { display: none; }
.cob-capitole { display: grid; gap: var(--s-8); max-width: 44rem; }
.cob-cap > * + * { margin-top: var(--s-4); }
.cob-cap h2 {
  font-family: var(--font-display); font-stretch: 112.5%; font-weight: 300;
  font-size: var(--step-3); line-height: 1.08; letter-spacing: -0.01em;
}
.cob-h1 {
  font-family: var(--font-display); font-stretch: var(--lat-display); font-weight: 300;
  font-size: min(clamp(2.6rem, 0.9rem + 5.4vw, 6.25rem), 10.5vh);
  line-height: var(--lh-titlu); letter-spacing: -0.02em;
}
.cob-h1 .nl, .cob-final-h .nl { display: block; }
.cob-lead { max-width: 34rem; font-size: var(--step-1); line-height: 1.5; }
.cob-cap p:not(.eticheta):not(.cob-lead):not(.cob-teh):not(.cob-act) { max-width: 33rem; }
.cob-act { display: flex; flex-wrap: wrap; gap: var(--s-3); padding-top: var(--s-3); }
.cob-teh {
  font-family: var(--font-mono); font-stretch: var(--lat-eticheta);
  font-size: 0.8125rem; letter-spacing: 0.02em; line-height: 1.5;
  color: var(--scena-fg-2, var(--c-cerneala-2));
  border-top: 1px solid var(--scena-linie, var(--c-linie));
  padding-top: var(--s-3); max-width: 33rem;
}
.cob-oameni {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6);
  padding-top: var(--s-4);
  font-family: var(--font-mono); font-stretch: var(--lat-eticheta);
  font-size: 0.8125rem; color: var(--scena-fg-2, var(--c-cerneala-2));
}
.cob-oameni span {
  display: block; font-family: var(--font-body); font-size: 1rem; font-weight: 500;
  color: var(--scena-fg, var(--c-cerneala));
}
.cob-led {
  display: inline-block; width: 0.62em; height: 0.62em; border-radius: 50%;
  margin-right: 0.8em; vertical-align: 0.05em;
  border: 1px solid currentColor;
}

/* ==========================================================================
   Coborârea — cu JS: scena fixată.
   ========================================================================== */
.cob-js .antet { position: fixed; }
.cob-js .cob-pin {
  position: relative; height: 100vh; height: 100svh; overflow: hidden; padding: 0;
  color: var(--scena-fg, var(--c-cerneala));
  background: var(--scena-bg, var(--c-aer));
}
.cob-js .cob-aer {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
}
.cob-js .cob-capitole {
  position: absolute; inset: 0; display: block; max-width: none; pointer-events: none;
}
.cob-js .cob-cap {
  /* sus, nu pe centru: jos stă manometrul, iar textul nu are voie să coboare peste el */
  position: absolute; left: var(--margine); top: clamp(5.5rem, 16vh, 10rem);
  width: min(36rem, 44vw);
  pointer-events: auto;
}
.cob-js .cob-cap--start { width: min(56rem, 62vw); top: clamp(5.5rem, 14vh, 9rem); }
.cob-js .cob-cap--final { width: min(40rem, 50vw); }

/* Instrumentul: citirea manometrului, jos în stânga */
.cob-js .cob-instrument {
  display: block; position: absolute;
  left: var(--margine); bottom: clamp(1rem, 4.5vh, 3rem);
  pointer-events: none;
}
.cob-instrument-et { display: flex; align-items: center; }
.cob-instrument-et { font-family: var(--font-mono); font-stretch: var(--lat-eticheta);
  font-size: var(--step--1); letter-spacing: var(--track-eticheta); text-transform: uppercase; }
.cob-instrument .cob-led { color: var(--scena-fg-2, var(--c-cerneala-2)); transition: background-color .4s, border-color .4s; }
.cob-instrument .cob-led.pompeaza { background: var(--scena-semnal, var(--c-semnal)); border-color: var(--scena-semnal, var(--c-semnal)); }
.cob-instrument .cob-led.atins { background: var(--c-ok); border-color: var(--c-ok); box-shadow: 0 0 0 4px rgb(25 171 84 / .22), 0 0 18px rgb(25 171 84 / .55); }
.cob-citire {
  font-family: var(--font-mono); font-stretch: var(--lat-mono);
  font-weight: 200; font-size: min(var(--step-7), 15vh);
  line-height: 1; letter-spacing: -0.05em;
  margin-top: 0.06em; white-space: nowrap;
}
.cob-citire sup { font-size: 0.42em; vertical-align: 1.15em; letter-spacing: -0.02em; margin-left: 0.04em; }
.cob-citire .v { margin: 0 -0.3em; }
.cob-citire .x { margin: 0 -0.12em; }      /* virgula și punctul, strânse: în mono au o celulă întreagă */
.cob-unitate {
  font-size: 0.2em; font-weight: 400; letter-spacing: 0.02em; margin-left: 0.7em;
  color: var(--scena-fg-2, var(--c-cerneala-2));
}
.cob-date {
  display: flex; gap: var(--s-6); margin: var(--s-3) 0 0;
  font-family: var(--font-mono); font-stretch: var(--lat-eticheta);
  font-size: 0.75rem; letter-spacing: 0.02em; line-height: 1.45;
}
.cob-date dt { color: var(--scena-fg-2, var(--c-cerneala-2)); }
.cob-date dd { font-size: 0.9375rem; }

/* Rigla logaritmică, la dreapta */
.cob-js .cob-rigla {
  display: block; position: absolute;
  right: var(--margine); top: 15vh; bottom: 13vh; width: 9.5rem;
  color: var(--scena-fg, var(--c-cerneala));
  pointer-events: none;
}
.cob-rigla svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cob-rigla .rg-text { font-family: var(--font-mono); font-stretch: var(--lat-eticheta); font-size: 11px; fill: currentColor; }
.cob-rigla .rg-regim { fill: currentColor; opacity: .45; letter-spacing: .14em; transition: opacity .5s; }
.cob-rigla .rg-banda { stroke: currentColor; opacity: .3; transition: opacity .5s; }
.cob-rigla .activ .rg-regim { opacity: 1; }
.cob-rigla .activ .rg-banda { opacity: 1; }
.cob-rigla .rg-tick { stroke: currentColor; opacity: .55; }
.cob-rigla .rg-tick--mic { opacity: .3; }
.cob-ac {
  position: absolute; left: 1.6rem; right: -0.4rem; top: 0; height: 0;
  will-change: transform;
}
.cob-ac::before {
  content: ""; position: absolute; left: 0; right: 0; top: -0.75px; height: 1.5px;
  background: var(--scena-semnal, var(--c-semnal));
}
.cob-ac::after {
  content: ""; position: absolute; right: -0.1rem; top: -5px;
  border: 5px solid transparent; border-right: 7px solid var(--scena-semnal, var(--c-semnal));
  border-left: 0;
}

/* ------------------------------------------------------------------ subsol */
.subsol {
  background: var(--c-vid); color: var(--c-lumina);
  display: grid; grid-template-columns: auto 1fr 1fr; gap: var(--s-6) var(--s-8);
  padding: var(--s-8) var(--margine);
  font-size: 1rem;
  --scena-semnal: var(--c-semnal-vid);
}
.subsol .eticheta { color: var(--c-lumina-2); margin-bottom: var(--s-2); }
.subsol a { text-decoration-color: var(--c-linie-vid); text-underline-offset: 0.25em; }
.subsol a:hover { color: var(--c-semnal-vid); }
.subsol-semn svg { width: 4rem; height: auto; display: block; color: var(--c-lumina); }
.subsol-legal {
  grid-column: 1 / -1; padding-top: var(--s-5); border-top: 1px solid var(--c-linie-vid);
  font-family: var(--font-mono); font-stretch: var(--lat-eticheta);
  font-size: 0.75rem; letter-spacing: 0.04em; color: var(--c-lumina-2);
}

/* --------------------------------------------------------- bara de pe mobil */
.bara-mobil { display: none; }

/* ==========================================================================
   Telefon
   ========================================================================== */
@media (max-width: 699px) {
  .antet { padding-block: var(--s-3); }
  .marca-semn { width: 1.9rem; }
  .marca-nume { font-size: 1rem; }
  .antet-tel-et { display: none; }

  .bara-mobil {
    display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--s-2);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: var(--s-2) var(--margine) calc(var(--s-2) + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--scena-bg, var(--c-aer)) 90%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color: var(--scena-fg, var(--c-cerneala));
    border-top: 1px solid var(--scena-linie, var(--c-linie));
  }
  .bara-mobil .buton { padding: 0 0.75rem; font-size: 0.9375rem; }
  .cob-cap--start .cob-act, .cob-js .cob-cap--final .cob-act { display: none; }
  .subsol { grid-template-columns: 1fr; padding-bottom: calc(var(--s-8) + 4.5rem); }

  .cob-js .cob-cap, .cob-js .cob-cap--start, .cob-js .cob-cap--final {
    top: auto; bottom: calc(5.25rem + env(safe-area-inset-bottom));
    transform: none;
    width: auto; right: calc(var(--margine) + 1.25rem);
  }
  .cob-js .cob-cap h2 { font-size: clamp(1.5rem, 1rem + 2.6vw, 1.875rem); }
  .cob-js .cob-cap p:not(.eticheta):not(.cob-lead):not(.cob-teh):not(.cob-act) { font-size: 1.0625rem; line-height: 1.5; }
  .cob-js .cob-cap > * + * { margin-top: var(--s-3); }
  .cob-js .cob-teh { font-size: 0.75rem; }

  .cob-js .cob-instrument { top: 4.25rem; bottom: auto; }
  .cob-citire { font-size: min(15vw, 8.5vh); }
  .cob-date { gap: var(--s-4); font-size: 0.6875rem; }
  .cob-date dd { font-size: 0.8125rem; }

  .cob-js .cob-rigla { right: 0.5rem; width: 1.25rem; top: 12.5rem; bottom: 6.5rem; }
  .cob-ac { left: 0.2rem; }
}

@media (min-width: 700px) and (max-height: 780px) {
  .cob-js .cob-cap, .cob-js .cob-cap--start { top: 5.25rem; }
  .cob-js .cob-cap h2 { font-size: clamp(1.75rem, 1rem + 1.6vw, 2.5rem); }
  .cob-js .cob-cap > * + * { margin-top: var(--s-3); }
  .cob-lead { font-size: var(--step-0); }
  .cob-date { display: none; }
}

@media (max-width: 699px) and (max-height: 640px) {
  .cob-js .cob-cap--final .cob-oameni { display: none; }
}
@media (max-width: 699px) and (max-height: 700px) {
  .cob-date { display: none; }
  .cob-js .cob-rigla { top: 9rem; }
}