/* ============================================================
   Tehnologie: „Datele devin precizie" (v2, tur cinematic de particule)
   ============================================================
   Un singur univers vizual, alb si mint, in care un nor de puncte se
   dezasambleaza si se recompune in obiectele tehnologiei clinicii
   (arcada CBCT, dintele scanat, coroana, blocul frezat, implantul ghidat,
   scara microscopica, sigla). Motorul: three.js, in js/tehnologie-x.js.

   Reguli:
   - `html.txp-on` = WebGL pornit; DOAR atunci scena e pinned si anotarile
     sunt suprapuse pe canvas. Fara JS / fara WebGL / cu reduced-motion,
     pagina cade pe o versiune statica, editorial, complet lizibila.
   - Fara fundal inchis, fara metal, fara HUD: alb, mint pal, puncte.
   - Versiunile vechi ale paginii sunt in _backup-tehnologie/. */

.txp {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7FBF9 34%, #EEF6F2 78%, #DCECE6 100%);
  color: var(--ink);
}
.txp-on .txp { height: 1000vh; }
@media (max-width: 860px) {
  .txp-on .txp { height: 840vh; }
}

/* ---------- scena fixata ---------- */
.txp__stage { position: relative; }
.txp-on .txp__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: clip;
}
.txp__cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.txp-on .txp__cv { display: block; }

/* ---------- anotarile ---------- */
.txp-note {
  width: min(30rem, calc(100% - 2 * var(--gutter)));
  padding-block: 1rem;
}
.txp-on .txp-note {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% + 20px));
  opacity: 0;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  pointer-events: none;
}
.txp-on .txp-note.is-on {
  opacity: 1;
  transform: translateY(-50%);
  pointer-events: auto;
}
.txp-on .txp-note[data-side="l"] { left: clamp(1.2rem, 7vw, 8rem); }
.txp-on .txp-note[data-side="r"] { right: clamp(1.2rem, 7vw, 8rem); text-align: right; }
.txp-on .txp-note[data-side="c"] {
  left: 50%;
  transform: translate(-50%, calc(-50% + 20px));
  text-align: center;
  width: min(46rem, calc(100% - 2 * var(--gutter)));
}
.txp-on .txp-note[data-side="c"].is-on { transform: translate(-50%, -50%); }
/* nota finala sta sub sigla formata din particule, nu peste ea */
.txp-on .txp-note--end[data-side="c"] { top: auto; bottom: clamp(2rem, 7vh, 4rem); transform: translate(-50%, 20px); }
.txp-on .txp-note--end[data-side="c"].is-on { transform: translate(-50%, 0); }
.txp-on .txp-note--end .txp-m--hero { font-size: clamp(1.8rem, 3.4vw, 3rem); }

.txp-k {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green);
}
.txp-m {
  margin-top: .7rem;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
  color: var(--ink);
}
.txp-m--hero {
  font-size: clamp(2.3rem, 5vw, 4.4rem);
  letter-spacing: -.035em;
  line-height: 1.03;
}
.txp-s {
  margin-top: .8rem;
  font-size: .92rem;
  line-height: 1.55;
  color: rgba(16, 24, 32, .55);
}

/* pe telefon, anotarile stau jos, pe toata latimea, ca subtitrarile */
@media (max-width: 860px) {
  .txp-on .txp-note,
  .txp-on .txp-note[data-side="l"],
  .txp-on .txp-note[data-side="r"],
  .txp-on .txp-note[data-side="c"] {
    left: 50%;
    right: auto;
    top: auto;
    bottom: clamp(1.6rem, 6vh, 3.2rem);
    transform: translate(-50%, 20px);
    width: calc(100% - 2 * var(--gutter));
    text-align: center;
  }
  .txp-on .txp-note.is-on,
  .txp-on .txp-note[data-side="c"].is-on { transform: translate(-50%, 0); }
  /* pe ecran mic, heroul ramane totusi la mijloc */
  .txp-on .txp-note--hero,
  .txp-on .txp-note--hero[data-side="c"] { top: 50%; bottom: auto; transform: translate(-50%, calc(-50% + 20px)); }
  .txp-on .txp-note--hero.is-on { transform: translate(-50%, -50%); }
}

/* ---------- firul de progres (functional) + iesirea din tur ---------- */
.txp__prog,
.txp__skip { display: none; }
.txp-on .txp__prog {
  display: block;
  position: absolute;
  right: clamp(.9rem, 2vw, 1.6rem);
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 34vh;
  border-radius: 2px;
  background: rgba(16, 24, 32, .1);
  overflow: hidden;
}
.txp__prog i {
  position: absolute;
  inset: 0;
  background: var(--green);
  transform-origin: top center;
  transform: scaleY(0);
}
.txp-on .txp__skip {
  display: inline-flex;
  position: absolute;
  top: clamp(5.2rem, 12vh, 7rem);
  right: clamp(1.2rem, 3vw, 2rem);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(16, 24, 32, .45);
  padding: .4rem .2rem;
}
.txp-on .txp__skip:hover { color: var(--ink); }
@media (max-width: 860px) {
  .txp-on .txp__prog { display: none; }
}

/* ---------- fara WebGL / fara JS: versiune statica, editorial ----------
   Anotarile devin o coloana de momente, aerisita, pe acelasi fundal. */
html:not(.txp-on) .txp { padding: clamp(4rem, 10vh, 7rem) 0 clamp(3rem, 8vh, 5rem); }
html:not(.txp-on) .txp-note {
  margin: 0 auto clamp(3rem, 9vh, 5.5rem);
  text-align: center;
}
html:not(.txp-on) .txp-note--hero { margin-bottom: clamp(4rem, 12vh, 7rem); }

/* ---------- dupa tur: continutul clasic, ca titluri + carduri ----------
   Sectiunile originale ale paginii (tomograf, CEREC, inLab, lasere,
   microscop, sedare) revin sub tur; fiecare bloc .split devine un card alb,
   ca sa se aseze frumos dupa lumea alba/mint a experientei. */
.txc { background: var(--paper); }
.txc .split {
  background: #fff;
  border: 1px solid rgba(16, 24, 32, .06);
  border-radius: clamp(18px, 2vw, 26px);
  padding: clamp(1.3rem, 3vw, 2.4rem);
  box-shadow: var(--card-shadow);
}