/* ============================================================
   DESPRE NOI, antetul cu colaj plutitor.
   Referință: screen recording „Despre noi Header" trimis de client.
   Măsurat din înregistrare: pozele plutesc continuu, fiecare cu
   perioada ei (4,5 la 9 secunde) și o cursă de circa 16px pe
   verticală; titlul stă nemișcat.
   ============================================================ */

.dnhero {
  position: relative;
  padding-block: clamp(1.4rem, 3vw, 2.6rem) clamp(1.6rem, 3.4vw, 3rem);
  overflow: hidden;                 /* pozele de la margini nu împing pagina lateral */
}
.dnhero__stage {
  --band: 132px;                    /* latura unui card din colaj */
  position: relative;
  width: var(--shell);
  margin-inline: auto;
  display: grid;
  place-items: center;
  /* benzile de sus si de jos sunt padding, nu procente: asa colajul are
     intotdeauna loc, indiferent cat de inalt iese blocul de text. */
  /* spatiul in plus tine cont si de cursa animatiei: un card din banda de
     jos urca pana la 18px, deci banda trebuie sa fie mai inalta decat
     decalajul lui plus cursa, altfel atinge textul in miscare. */
  padding-block: calc(var(--band) + clamp(42px, 4.5vw, 60px));
  min-height: clamp(560px, 70vh, 720px);
}

/* textul din mijloc */
.dnhero__mid {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 40rem;
  padding-inline: clamp(0px, 2vw, 1.5rem);
}
.dnhero__mid h1 {
  margin: 0;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.042em;
  line-height: 1.02;
  text-wrap: balance;
}
.dnhero__mid .lead {
  margin: clamp(1rem, 1.8vw, 1.4rem) auto 0;
  max-width: 34rem;
}
.dnhero__cta {
  display: inline-block;
  margin-top: clamp(1.4rem, 2.4vw, 2rem);
  padding: clamp(.9rem, 1.1vw, 1.05rem) clamp(1.6rem, 2.4vw, 2.2rem);
  border-radius: var(--r-pill);
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: clamp(.95rem, 1.05vw, 1.05rem);
  letter-spacing: -0.01em;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .dnhero__cta:hover { background: var(--blue); transform: translateY(-2px); }
}

/* stratul decorativ */
.dnhero__art {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.dnf, .dnpill {
  position: absolute;
  left: var(--x);
  top: var(--y);
  animation: dnFloat var(--dur, 7s) ease-in-out infinite;
  animation-delay: var(--del, 0s);
}
.dnf {
  display: block;
  width: var(--w, var(--band));
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0 20px 44px -28px rgba(16, 24, 32, .55);
}
.dnf img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dnf--sm { --w: calc(var(--band) * .5); border-radius: 12px; }
/* cardurile din banda de jos se ancoreaza de baza scenei, nu de varf */
.dnf--b { top: auto; bottom: var(--y); }

.dnpill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.05rem;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid rgba(16, 24, 32, .07);
  box-shadow: 0 14px 34px -24px rgba(16, 24, 32, .5);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}
.dnpill::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
}

@keyframes dnFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(var(--fx, 0px), var(--fy, -16px), 0); }
}
/* animația se oprește când secțiunea nu e pe ecran (observerul din main.js) */
.dnhero__art.is-offscreen .dnf,
.dnhero__art.is-offscreen .dnpill { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .dnf, .dnpill { animation: none; }
}

/* ---- pozițiile ----
   Banda de sus: --y masurat de la varf. Banda de jos (.dnf--b): de la baza.
   Doar cardul 4 si cele doua pastile stau la jumatatea inaltimii, si numai
   pe ecran lat, unde raman clar in afara coloanei de text. */
.dnf--1  { --x: 16%;   --y: 0px;  --dur: 7.2s; --del: -.4s;  --fy: -17px; --fx: 4px; }
.dnf--2  { --x: 42%;   --y: 12px; --dur: 8.4s; --del: -2.1s; --fy: -13px; --fx: -5px; }
.dnf--3  { --x: 66%;   --y: 2px;  --dur: 6.4s; --del: -1.2s; --fy: -18px; --fx: 3px; }
.dnf--9  { --x: 4%;    --y: 46px; --dur: 5.6s; --del: -1.5s; --fy: -12px; --fx: 6px; }
.dnf--5  { --x: 7%;    --y: 4px;  --dur: 7.8s; --del: -.9s;  --fy: -16px; --fx: 5px; }
.dnf--6  { --x: 29%;   --y: 12px; --dur: 6.8s; --del: -2.6s; --fy: -14px; --fx: -3px; }
.dnf--7  { --x: 53%;   --y: 0px;  --dur: 8.8s; --del: -1.7s; --fy: -18px; --fx: 4px; }
.dnf--8  { --x: 75%;   --y: 10px; --dur: 7s;   --del: -3.9s; --fy: -15px; --fx: -5px; }
.dnf--10 { --x: 90%;   --y: 44px; --dur: 6.2s; --del: -.3s;  --fy: -12px; --fx: -6px; }
.dnf--4  { --x: 84%;   --y: 31%;  --dur: 9s;   --del: -3.4s; --fy: -15px; --fx: -4px; }
.dnpill--1 { --x: 0%;  --y: 37%;  --dur: 8.2s; --del: -1.1s; --fy: -12px; --fx: 4px; }
.dnpill--2 { --x: 82%; --y: 62%;  --dur: 7.6s; --del: -2.9s; --fy: -12px; --fx: -4px; }

/* ---- sub 1180px coloana de text ocupa aproape toata latimea. Cardul din
   dreapta dispare, colajul se subtiaza, iar pastilele coboara in benzi.
   Pozitiile sunt alese ca pastila sa incapa intre doua carduri la orice
   latime din interval, nu doar la capatul de sus. ---- */
@media (max-width: 1180px) {
  .dnhero__stage { --band: 112px; }
  .dnf--4, .dnf--6, .dnf--9, .dnf--10 { display: none; }
  .dnf--1 { --x: 16%; }
  .dnf--2 { --x: 43%; }
  .dnf--3 { --x: 71%; }
  .dnf--5 { --x: 2%; }
  .dnf--7 { --x: 30%; }
  .dnf--8 { --x: 58%; }
  .dnpill--1 { --x: 0%;  --y: 12px; }
  .dnpill--2 { top: auto; bottom: var(--y); --x: 82%; --y: 16px; }
}

/* ---- telefon: doua poze sus, doua jos, cate o pastila la mijlocul benzii ---- */
@media (max-width: 860px) {
  .dnhero__stage { --band: 88px; min-height: clamp(480px, 64vh, 640px); }
  .dnf { border-radius: 13px; }
  .dnf--2, .dnf--8 { display: none; }
  .dnf--1  { --x: 2%;  --y: 4px; }
  .dnf--3  { --x: 70%; --y: 0px; }
  .dnf--5  { --x: 2%;  --y: 2px; }
  .dnf--7  { --x: 70%; --y: 6px; }
  .dnpill { font-size: .74rem; padding: .42rem .75rem; }
  .dnpill--1 { --x: 31%; --y: 18px; }
  .dnpill--2 { top: auto; bottom: var(--y); --x: 31%; --y: 16px; }
}
/* sub 620px pastila „3 centre proprii" nu mai incape intre cele doua poze
   de jos, deci ramane doar poza din stanga in banda aceea */
@media (max-width: 620px) {
  .dnf--7 { display: none; }
  .dnpill--2 { --x: 33%; }
}

/* ============================================================
   In memoriam Dr. Chemal Taner — scena fixata cu citate la scroll
   ============================================================
   Referinta: „Taner Erkan testimonial.mp4" (sectiune Framer), masurata cadru
   cu cadru: scena sta fixata pe ecran cat derulezi, fotografia umple scena
   sub un scrim inchis, citatul alb din centru si fundalul se schimba prin
   crossfade, sus sta un eyebrow fix, jos un numar de pas intr-un cerc subtire.

   Implementare: sectiunea e un wrapper inalt (un ecran pe citat), iar
   `.tmem__pin` e `position: sticky` sub header, ca un card rotunjit la
   latimea `--shell`, in limbajul site-ului (referinta e full-bleed, dar aici
   totul e carduri). JS-ul din main.js pune `.is-live` si comuta `.is-on`.

   FARA JS: starea din HTML are `.is-on` pe ULTIMUL citat (cel important) si
   pe portretul final, deci sectiunea e o vitrina statica perfect citibila.
   `.is-live` stinge tot si lasa JS-ul sa aprinda pasul curent. */

.tmem { position: relative; }
/* Full-bleed, ca in referinta: scena ocupa tot ecranul, fara card. Headerul
   pill e transparent (doar pastila alba plutseste), deci fotografia se vede
   si sub el, exact ca in video. `width: 100%`, nu `100vw`: 100vw include
   scrollbar-ul si ar da depasire pe orizontala. */
.tmem__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  background: var(--night-2);
  display: grid;
  place-items: center;
}
.tmem__bgs, .tmem__bg { position: absolute; inset: 0; }
.tmem__bg {
  width: 100%; height: 100%;
  object-fit: cover;
  /* capul e in treimea de sus a fotografiilor: nu-l taia cand rama e portret */
  object-position: 50% 22%;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.1s var(--ease), transform 1.6s var(--ease);
}
.tmem__bg.is-on { opacity: 1; transform: scale(1); }
/* scrimul din referinta: uniform si destul de inchis cat sa duca text alb */
.tmem__bgs::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(7, 10, 12, .58);
}
.tmem__eyebrow {
  position: absolute;
  /* sub pastila fixa a headerului (~94px), nu sub marginea scenei */
  top: calc(var(--header-h) * .82 + clamp(.6rem, 2vh, 1.4rem));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255, 255, 255, .78);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tmem__quotes {
  position: relative;
  z-index: 1;
  width: min(92%, 46rem);
  display: grid;
  place-items: center;
  text-align: center;
}
.tmem__q {
  grid-area: 1 / 1;                /* toate citatele stau suprapuse in centru */
  margin: 0;
  color: #fff;
  font-size: clamp(1.35rem, 2.6vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  pointer-events: none;
}
.tmem__q.is-on { opacity: 1; transform: none; }
.tmem__who {
  display: block;
  margin-top: 1.1rem;
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .72);
}
.tmem__who b { color: #fff; font-weight: 700; }
.tmem__step {
  position: absolute;
  bottom: clamp(1.2rem, 3.5vh, 2.4rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .85);
  font-size: .85rem;
  font-weight: 700;
}
/* JS-ul a preluat scena: stinge starea statica, aprinde pasul curent */
.tmem.is-live .tmem__bg:not(.is-on),
.tmem.is-live .tmem__q:not(.is-on) { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .tmem__bg, .tmem__q { transition: opacity .3s ease; transform: none; }
}
@media (max-width: 700px) {
  .tmem__eyebrow { white-space: normal; text-align: center; width: 86%; }
  .tmem__q { font-size: clamp(1.15rem, 5.4vw, 1.35rem); }
  .tmem__step { width: 38px; height: 38px; }
}

/* ---- cele doua ecrane finale, pe negru: dedicatia si numele ---- */
.tmem__bg--dark { background: #060809; }
.tmem__q--name { font-size: clamp(2rem, 4.6vw, 3.6rem); letter-spacing: -.03em; }
.tmem__years {
  display: block;
  margin-top: .7rem;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 400;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .65);
}

/* ============================================================
   Cele 3 clinici, una peste alta, cu schimbare la 2 secunde
   ============================================================
   Cerinta clientului (28.08.2026): in loc de o singura fotografie a
   cladirii, cele trei locatii se succed. Varianta „toate intr-o poza" a
   fost respinsa in favoarea succesiunii, mai curata estetic.

   Fara JS: animatie CSS pura, deci merge oriunde.

   Cheia ca sa NU apara un gol la schimbare: prima poza sta permanent la
   `opacity: 1`, ca fundal, iar celelalte doua se aprind PESTE ea. Daca
   toate trei ar face fade, in mijlocul tranzitiei ambele ar fi pe la .5,
   iar doua straturi semi-transparente lasa sa se vada caseta goala
   (masurat: suma opacitatilor scadea la .17).

   Ciclul e de 6,4s: fiecare poza sta 2s, iar trecerea dureaza 0,4s, deci
   schimbarile cad exact la 2s, 4s si 6s. Ultima tranzitie (Ovidiu inapoi
   la Constanta) se face in ultimele 0,4s ale ciclului. */
.locfade { position: relative; isolation: isolate; }
.locfade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* prima poza: fundalul permanent, niciodata animata */
.locfade img:nth-child(1) { opacity: 1; }
.locfade img:nth-child(2) { opacity: 0; animation: locFade2 6.4s linear infinite; }
.locfade img:nth-child(3) { opacity: 0; animation: locFade3 6.4s linear infinite; }

/* 2,0s = 31.25%   2,4s = 37.5%   4,0s = 62.5%   4,4s = 68.75%   6,0s = 93.75% */
@keyframes locFade2 {
  0%, 31.25%   { opacity: 0; }
  37.5%, 62.5% { opacity: 1; }
  68.75%, 100% { opacity: 0; }
}
@keyframes locFade3 {
  0%, 62.5%     { opacity: 0; }
  68.75%, 93.75%{ opacity: 1; }
  100%          { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .locfade img:nth-child(2),
  .locfade img:nth-child(3) { animation: none; opacity: 0; }
}