/* =============================================================
   NovaWebDesign — /proiecte (galeria) și paginile proiectelor (/proiecte/<nume>)
   23.10.2026 („wow”): galeria e o scenă (la sfârșitul fișierului): peretele 3D (js/proiecte-perete.js), inundația de culoare,
   titlurile cu litere rotite, portalul de intrare. Fără JavaScript rămâne lista de mai jos (linkuri reale, texte citibile).
   - fundalul paginii ia culoarea proiectului aflat în mijlocul ecranului (js/proiecte.js schimbă --pj-bg / --pj-fg / --pj-fg2;
     culorile textului sunt calculate în generator, cu contrast AA verificat pe fiecare fundal);
   - cardurile au un clip în buclă; 23.10.2026: mișcarea la derulare e „adâncimea de cinema” de la finalul fișierului
     (legată direct de derulare, pe compozitor; în locul îndoirii WebGL, al petei de cerneală și al dezvăluirii cu mască);
   - cursorul-picătură (doar calculator, doar peste carduri), tranziția card → ecran plin → pagina proiectului.
   Fonturile, butoanele, antetul și subsolul sunt cele ale site-ului (css/style.css, site-ui.css, tema.css).
   Fără teme de sezon pe aceste pagini (js/tema.js).
   ============================================================= */
body.pj-pagina {
  --pj-g: clamp(16px, 4.4vw, 64px);
  --pj-r: clamp(14px, 1.3vw, 22px);
  --pj-bg: var(--nv-bg);
  --pj-fg: var(--nv-tx);
  --pj-fg2: var(--nv-tx2);
  background-color: var(--pj-bg);
  color: var(--pj-fg);
  transition: background-color .9s var(--nv-ease), color .6s ease;
}
body.pj-proiect { --pj-bg: var(--pj-c); --pj-fg: var(--pj-t); --pj-fg2: var(--pj-t2); }
.pj { position: relative; z-index: 1; display: block; }
.pj :focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }

/* ---------- titlul (lista fără JavaScript): „PROIECTE” pe toată lățimea, cu numărul proiectelor ---------- */
.pj-cap { padding: clamp(104px, 11.5vw, 176px) var(--pj-g) 0; margin-bottom: clamp(56px, 8vw, 128px); }
.pj-titlu {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .06em;
  margin: 0; font-family: var(--font-display); font-weight: 540;
  font-size: calc((100vw - 2 * var(--pj-g)) * .21);
  line-height: .8; letter-spacing: -.05em; text-transform: uppercase; color: var(--pj-fg);
}
.pj-titlu__w { display: inline-block; white-space: nowrap; }
.pj-titlu__n { flex: none; margin-top: .42em; font: 600 clamp(.95rem, 1.5vw, 1.45rem)/1 var(--font-body); letter-spacing: .02em; vertical-align: baseline; color: var(--pj-fg); }
.pj-titlu__n::before { content: '('; } .pj-titlu__n::after { content: ')'; }
.pj-sub { margin: clamp(20px, 2.6vw, 36px) 0 0; max-width: 34ch; font: 500 clamp(1.05rem, 1.65vw, 1.45rem)/1.4 var(--font-body); color: var(--pj-fg2); }

/* ---------- grila: două carduri pe rând (al doilea coborât, ca la Lusion); pe telefon, o coloană ---------- */
.pj-grila { position: relative; padding: 0 var(--pj-g); }
.pj-lista {
  --pj-off: clamp(72px, 11vw, 210px);
  position: relative; z-index: 1; list-style: none; margin: 0; padding: 0 0 var(--pj-off);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4.2vw, 80px); row-gap: clamp(64px, 8vw, 150px);
}
.pj-item { position: relative; min-width: 0; }
.pj-item:nth-child(even) { margin-top: var(--pj-off); margin-bottom: calc(var(--pj-off) * -1); }
/* număr impar de proiecte: ultimul nu rămâne singur într-o coloană, ci ocupă tot rândul, ca un final (23.10: Caffè Lumière, al 11-lea) */
@media (min-width: 768px) {
  .pj-item:last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; }
  /* 16:9, dar cu eticheta, imaginea și numele încăpând împreună pe ecran (sub antet) */
  .pj-item:last-child:nth-child(odd):not(:first-child) .pj-card__media { aspect-ratio: 16 / 9; max-height: calc(100svh - 210px); width: 100%; }
  /* cardul coborât de deasupra nu mai intră în rândul finalului (altfel numele lui stătea lângă eticheta finalului) */
  .pj-item:nth-child(even):has(+ .pj-item:last-child:nth-child(odd)) { margin-bottom: 0; }
}
.pj-card { display: block; color: inherit; text-decoration: none; border-radius: var(--pj-r); -webkit-tap-highlight-color: transparent; }
.pj-card:focus-visible { outline: 3px solid var(--pj-fg); outline-offset: 8px; }
.pj-card__tip {
  margin: 0 0 14px; font: 600 .75rem/1.35 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--pj-fg2); transition: color .6s ease;
}
.pj-card__media {
  position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--pj-r); overflow: hidden; isolation: isolate;
  background: rgba(0, 0, 0, .16); transform: translateZ(0);
}
.pj-card__media img, .pj-card__media video,
.pr-erou__media img, .pr-erou__media video,
.pr-urmator__media img, .pr-urmator__media video,
.pr-macheta__ecran img, .pr-macheta__ecran video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-card__media picture, .pr-erou__media picture, .pr-urmator__media picture { display: contents; }
.pj-card__media video, .pr-erou__media video, .pr-urmator__media video, .pr-macheta__ecran video { opacity: 0; transition: opacity .45s ease; }
.pj-card__media video.is-on, .pr-erou__media video.is-on, .pr-urmator__media video.is-on, .pr-macheta__ecran video.is-on { opacity: 1; }
.pj-card__media img, .pj-card__media video { transition: transform .9s var(--nv-ease), opacity .45s ease; }
@media (hover: hover) {
  .pj-card:hover .pj-card__media img, .pj-card:hover .pj-card__media video { transform: scale(1.035); }
}
.pj-card__text { display: block; margin-top: 18px; }
.pj-card__go { display: inline-flex; align-items: center; gap: 12px; margin-top: 14px; font: 600 .95rem/1 var(--font-body); color: var(--pj-t, var(--pj-fg)); }
.pj-card__tip { color: var(--pj-t2, var(--pj-fg2)); }
.pj-card__nume {
  margin: 0; min-width: 0; font-family: var(--font-display); font-weight: 520; font-size: clamp(1.55rem, 2.55vw, 2.6rem);
  line-height: 1.05; letter-spacing: -.02em; color: var(--pj-fg); transition: color .6s ease;
}
.pj-card__s { font-weight: 400; color: var(--pj-t3, var(--pj-fg2)); }
.pj-card__nume { color: var(--pj-t, var(--pj-fg)); }
.pj-card__sageata {
  flex: none; display: grid; place-items: center; width: clamp(46px, 3.6vw, 58px); aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid currentColor; color: var(--pj-fg);
  transition: background-color .35s var(--nv-ease), color .35s var(--nv-ease), transform .35s var(--nv-ease);
}
.pj-card__sageata svg { width: 44%; height: 44%; transition: transform .35s var(--nv-ease); }
@media (hover: hover) {
  .pj-card:hover .pj-card__sageata { background: var(--pj-fg); color: var(--pj-bg); }
  .pj-card:hover .pj-card__sageata svg { transform: translateX(3px); }
}


/* butonul „Pornește clipul” (doar cu „mai puțină mișcare”: clipurile pornesc numai la cerere) */
.pj-play {
  position: absolute; z-index: 2; top: calc(.75rem * 1.35 + 14px + 12px); right: 12px;
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 10px; border-radius: 999px;
  background: rgba(14, 14, 14, .78); color: #F6F2EA; font: 600 .85rem/1 var(--font-body); border: 1px solid rgba(255, 255, 255, .2);
}
.pj-play[hidden] { display: none; }
.pj-play__ico { width: 20px; height: 20px; border-radius: 50%; background: #F6F2EA; position: relative; }
.pj-play__ico::before { content: ''; position: absolute; left: 8px; top: 6px; border-left: 6px solid #141110; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.pj-play[aria-pressed="true"] .pj-play__ico::before { left: 6px; top: 6px; width: 8px; height: 8px; border: 0; background: linear-gradient(90deg, #141110 0 3px, transparent 3px 5px, #141110 5px); }

/* ---------- cursorul-picătură (doar calculator cu mouse) ---------- */
.pj-blob { position: fixed; left: 0; top: 0; z-index: 998; width: 300px; height: 300px; margin: -150px 0 0 -150px; pointer-events: none; opacity: 0; transition: opacity .25s ease; will-change: transform; }
.pj-blob.is-on { opacity: 1; }
.pj-blob canvas { width: 100%; height: 100%; display: block; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .38)); }
.pj-blob__t { position: absolute; inset: 0; display: grid; place-items: center; font: 600 1.06rem/1 var(--font-body); letter-spacing: .01em; color: var(--pj-blob-t, #141110); transform: scale(.6); opacity: 0; transition: transform .35s var(--nv-ease), opacity .25s ease; }
.pj-blob.is-on .pj-blob__t { transform: none; opacity: 1; }
.pj-blob-on .pj-card { cursor: none; }

/* ---------- finalul listei: „i” + îndemnul ---------- */
.pj-final { position: relative; z-index: 1; display: flex; flex-direction: column-reverse; align-items: center; gap: clamp(28px, 3vw, 44px); padding: clamp(96px, 12vw, 190px) var(--pj-g) clamp(88px, 10vw, 150px); }
.pj-info { position: relative; display: flex; justify-content: center; }
.pj-info__btn {
  position: relative; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--pj-fg2); color: var(--pj-fg2); background: transparent;
  font: italic 600 16px/1 var(--font-display); cursor: pointer; transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}
.pj-info__btn::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; }
.pj-info__btn:hover, .pj-info__btn[aria-expanded="true"] { color: var(--pj-bg); background: var(--pj-fg); border-color: var(--pj-fg); }
.pj-info__btn:focus-visible { outline: 3px solid var(--pj-fg); outline-offset: 4px; }
.pj-info__msg {
  margin: 0; width: min(340px, calc(100vw - 32px)); padding: 15px 18px; border: 0; border-radius: 14px;
  background: #F6F2EA; color: #141110; font: 500 .94rem/1.5 var(--font-body); text-align: left;
  box-shadow: 0 22px 60px -18px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .06);
}
.pj-info__msg[popover] { position: fixed; inset: auto; overflow: visible; }
.pj-info__msg[popover]:not(.is-pozitionat) { inset: auto 0 calc(24px + env(safe-area-inset-bottom)) 0; margin: 0 auto; }
.pj-info__msg::backdrop { background: transparent; }
.pj-fara-popover .pj-info__msg { display: none; position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%); z-index: 5; }
.pj-fara-popover .pj-info__msg.is-open { display: block; }
.pj-cta { text-align: center; max-width: 760px; }
.pj-cta__k { margin: 0 0 14px; font: 600 .8rem/1.3 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--pj-fg2); transition: color .6s ease; }
.pj-cta__t { margin: 0 0 32px; font-family: var(--font-display); font-weight: 520; font-size: clamp(2rem, 5vw, 4.2rem); line-height: 1.04; letter-spacing: -.025em; color: var(--pj-fg); transition: color .6s ease; }
.pj-cta__t em { font-style: italic; font-weight: 450; color: var(--nv-acc-hi); }
.pj-cta__btn { min-height: 52px; display: inline-flex; align-items: center; }

/* subsolul păstrează fundalul și culorile site-ului (nu culoarea proiectului) */
html body.pj-pagina .footer { background-color: var(--nv-bg); color: var(--nv-tx); }   /* peste html.nv-bgflow .footer (nova-motion.css) */

/* ---------- tranziția card → ecran plin (js/proiecte.js) ---------- */
.pj-flip { position: fixed; inset: 0; z-index: 990; pointer-events: none; overflow: hidden; contain: strict; }
.pj-flip__in { position: absolute; inset: 0; overflow: hidden; transform-origin: 0 0; background: var(--pj-flip-c, #0F1412); will-change: transform, clip-path; }
.pj-flip__in img, .pj-flip__in canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pr-op); display: block; }
.pj-flip__erou { position: absolute; inset: 0; isolation: isolate; }
.pj-flip__erou :is(.pr-erou__voal, .pr-fir, .pr-tip, .pr-titlu__sub, .pr-index) { opacity: 0; }
.pj-flip__erou:not(.is-pornit) .pr-titlu { opacity: 0; }

/* =============================================================
   Pagina unui proiect
   ============================================================= */
.pr-erou { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; isolation: isolate; background: var(--pj-c); color: #F6F2EA; }
:root { --pr-tx: clamp(200px, 30vh, 270px); --pr-op: 50% 35%; }
.pr-erou__media { position: absolute; inset: 0 0 var(--pr-tx) 0; z-index: -2; }
.pr-erou__media :is(img, video) { object-position: var(--pr-op); }
/* sosit din zborul galeriei: ultimul cadru al clipului de acolo stă peste poster până pornește clipul (din aceeași secundă) */
.pr-erou__media .pr-erou__cadru { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pr-op); display: block; }
/* trecerea dintre pagini, după zbor: pagina proiectului apare direct peste ultimul cadru (fără stingerea spre negru) */
@media (prefers-reduced-motion: no-preference) {
  html.pj-din-zbor::view-transition-old(root) { animation: none; }
  html.pj-din-zbor::view-transition-new(root) { animation: nova-vt-in .2s ease both; }
}
.pr-erou__voal {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* clipul se topește în banda de jos (culoarea proiectului, plină sub texte); sus, puțin mai închis, sub antetul site-ului */
  background: linear-gradient(to bottom, rgba(8, 8, 8, .5) 0, rgba(8, 8, 8, 0) 120px),
              linear-gradient(to top, var(--pj-c) 0, var(--pj-c) var(--pr-tx), color-mix(in srgb, var(--pj-c) 70%, transparent) calc(var(--pr-tx) + 50px), color-mix(in srgb, var(--pj-c) 0%, transparent) calc(var(--pr-tx) + 220px));
}
.pr-erou__text { position: absolute; left: var(--pj-g); right: calc(var(--pj-g) + 90px); bottom: clamp(32px, 7vh, 80px); }
.pr-fir { display: flex; flex-wrap: wrap; gap: .55em; margin: 0 0 16px; font: 500 .9rem/1.4 var(--font-body); color: rgba(246, 242, 234, .86); }
.pr-fir a { color: #F6F2EA; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(246, 242, 234, .5); }
.pr-fir a:hover { text-decoration-color: currentColor; }
.pr-tip { margin: 0 0 12px; font: 600 .78rem/1.35 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: rgba(246, 242, 234, .9); }
.pr-titlu { margin: 0; font-family: var(--font-display); font-weight: 530; font-size: clamp(3rem, 6.6vw, 6.6rem); line-height: .92; letter-spacing: -.035em; color: #F6F2EA; text-wrap: balance; }
.pr-titlu__sub { display: block; margin-top: .28em; font-size: .3em; font-weight: 420; line-height: 1.1; letter-spacing: -.01em; color: rgba(246, 242, 234, .9); }
.pr-index { position: absolute; right: var(--pj-g); bottom: clamp(32px, 7vh, 80px); margin: 0; font: 600 .9rem/1 var(--font-body); letter-spacing: .06em; color: rgba(246, 242, 234, .86); }
/* 22.10, seara: clipul PULS are titlul mare al conceptului în stânga → pe calculator, titlul paginii stă în dreapta
   (și în tranziția card → pagină: .pj-flip__in primește aceeași clasă) */
/* Pe ecranele late în portret (tabletă), eroul PULS arată clipul vertical (titlul conceptului sus), iar titlul paginii stă jos în stânga */
@media (min-width: 768px) and (orientation: landscape) {
  /* +48 px: în dreapta jos stă butonul plutitor „Întreabă asistentul”, care altfel acoperea subtitlul */
  .pr-erou--dreapta .pr-erou__text { left: calc(var(--pj-g) + 90px); right: var(--pj-g); bottom: calc(clamp(32px, 7vh, 80px) + 48px); text-align: right; }
  .pr-erou--dreapta .pr-fir { justify-content: flex-end; }
  .pr-erou--dreapta .pr-index { right: auto; left: var(--pj-g); }
}

.pr-sec {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr); gap: clamp(20px, 4vw, 72px);
  max-width: 1440px; margin: 0 auto; padding: clamp(72px, 10vw, 150px) var(--pj-g);
}
.pr-sec + .pr-sec { border-top: 1px solid rgba(128, 128, 128, .35); border-top-color: color-mix(in srgb, var(--pj-fg) 24%, transparent); }
.pr-eticheta { margin: .55em 0 0; font: 600 .8rem/1.3 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--pj-fg2); }
.pr-mare { margin: 0; font-family: var(--font-display); font-weight: 460; font-size: clamp(1.5rem, 2.9vw, 2.65rem); line-height: 1.2; letter-spacing: -.014em; color: var(--pj-fg); text-wrap: balance; }
.pr-text { margin: 1.3em 0 0; max-width: 62ch; font-size: clamp(1.06rem, 1.35vw, 1.25rem); line-height: 1.62; color: var(--pj-fg); }
.pr-lista { list-style: none; margin: 0; padding: 0; }
.pr-lista li { display: grid; grid-template-columns: clamp(3rem, 5vw, 4.6rem) minmax(0, 1fr); gap: 1rem; padding: clamp(18px, 2.2vw, 30px) 0; border-top: 1px solid rgba(128, 128, 128, .35); border-top-color: color-mix(in srgb, var(--pj-fg) 24%, transparent); }
.pr-lista li:last-child { border-bottom: 1px solid rgba(128, 128, 128, .35); border-bottom-color: color-mix(in srgb, var(--pj-fg) 24%, transparent); }
.pr-lista__n { font-family: var(--font-display); font-size: clamp(1.1rem, 1.6vw, 1.45rem); line-height: 1.3; color: var(--pj-fg2); }
.pr-lista p { margin: 0; font-size: clamp(1.08rem, 1.5vw, 1.35rem); line-height: 1.5; color: var(--pj-fg); }

.pr-telefon { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.pr-telefon__text .pr-eticheta { margin-bottom: 22px; }
.pr-macheta {
  position: relative; justify-self: center; width: min(330px, 74vw); padding: 11px; border-radius: 50px;
  background: linear-gradient(150deg, #34343a 0%, #121214 38%, #050506 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .1), 0 0 0 1px rgba(0, 0, 0, .55), 0 50px 90px -40px rgba(0, 0, 0, .75);
}
.pr-macheta__ecran { position: relative; aspect-ratio: 9 / 16; border-radius: 40px; overflow: hidden; background: #000; transform: translateZ(0); }
.pr-macheta__insula { position: absolute; top: 24px; left: 50%; width: 88px; height: 25px; margin-left: -44px; border-radius: 20px; background: #000; }

.pr-live { display: flex; justify-content: center; padding: 0 var(--pj-g) clamp(88px, 11vw, 160px); }
.pr-live__btn {
  display: inline-flex; align-items: center; gap: .7em; min-height: 64px; padding: 0 2.3rem; border-radius: 999px;
  background: var(--pj-fg); color: var(--pj-bg); font: 600 clamp(1.05rem, 1.5vw, 1.25rem)/1 var(--font-body); text-decoration: none;
  transition: transform .35s var(--nv-ease), box-shadow .35s ease;
}
.pr-live__btn svg { width: 1.15em; height: 1.15em; transition: transform .35s var(--nv-ease); }
.pr-live__btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55); }
.pr-live__btn:hover svg { transform: translate(2px, -2px); }
.pr-live__btn:focus-visible { outline: 3px solid var(--pj-fg); outline-offset: 5px; }

.pr-urmator {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  grid-template-areas: "k media" "nume media" "tip media" "s media"; align-content: center; align-items: start;
  column-gap: clamp(24px, 5vw, 96px); row-gap: 18px; min-height: 72vh;
  padding: clamp(72px, 9vw, 140px) var(--pj-g); background: var(--pj-c); color: var(--pj-t); text-decoration: none; overflow: hidden;
}
.pr-urmator:focus-visible { outline: 3px solid var(--pj-t); outline-offset: -12px; }
.pr-urmator__k { grid-area: k; font: 600 .8rem/1.3 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--pj-t2); }
.pr-urmator__nume { grid-area: nume; font-family: var(--font-display); font-weight: 530; font-size: clamp(2.6rem, 6.2vw, 6.4rem); line-height: .95; letter-spacing: -.035em; }
.pr-urmator__nume span { display: block; font-weight: 400; font-size: .42em; letter-spacing: -.01em; margin-top: .35em; color: var(--pj-t3, var(--pj-t2)); }
.pr-urmator__tip { grid-area: tip; font: 600 .75rem/1.35 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--pj-t2); }
.pr-urmator__media { grid-area: media; position: relative; display: block; align-self: center; aspect-ratio: 16 / 10; border-radius: var(--pj-r); overflow: hidden; background: rgba(0, 0, 0, .18); transform: translateZ(0); }
.pr-urmator__media img, .pr-urmator__media video { transition: transform .9s var(--nv-ease), opacity .45s ease; }
.pr-urmator__sageata { grid-area: s; display: grid; place-items: center; width: 58px; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid currentColor; margin-top: 10px; transition: background-color .35s var(--nv-ease), color .35s var(--nv-ease); }
.pr-urmator__sageata svg { width: 44%; height: 44%; transition: transform .35s var(--nv-ease); }
@media (hover: hover) {
  .pr-urmator:hover .pr-urmator__media img, .pr-urmator:hover .pr-urmator__media video { transform: scale(1.035); }
  .pr-urmator:hover .pr-urmator__sageata { background: var(--pj-t); color: var(--pj-c); }
  .pr-urmator:hover .pr-urmator__sageata svg { transform: translateX(3px); }
}

/* ---------- tabletă și telefon ---------- */
@media (max-width: 1023.98px) {
  .pr-sec { grid-template-columns: minmax(0, 1fr); }
  .pr-telefon { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .pr-eticheta { margin-top: 0; }
}
@media (max-width: 767.98px) {
  .pj-cap { padding-top: 104px; margin-bottom: 52px; }
  .pj-titlu { font-size: calc((100vw - 2 * var(--pj-g)) * .181); }
  .pj-titlu__n { margin-top: .3em; font-size: .95rem; }
  .pj-lista { grid-template-columns: minmax(0, 1fr); row-gap: 64px; padding-bottom: 0; }
  .pj-item:nth-child(even) { margin: 0; }
  .pj-card__media { aspect-ratio: 4 / 5; }
  .pj-card__tip { font-size: .72rem; margin-bottom: 12px; }
  .pj-card__nume { font-size: 1.7rem; }
  .pj-card__sageata { width: 46px; }
  .pj-final { padding-top: 104px; }
  .pr-erou__text { right: var(--pj-g); bottom: calc(96px + env(safe-area-inset-bottom)); }
  /* telefon: clipul vertical întreg în lățime, lipit sus (fără tăieturi pe laterale) */
  :root { --pr-tx: 280px; --pr-op: 50% 0; }
  .pr-index { top: 98px; bottom: auto; padding: 8px 12px; border-radius: 999px; background: rgba(10, 8, 12, .5); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset; font-variant-numeric: tabular-nums; color: #F6F2EA; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .pr-erou + .pr-sec { padding-top: 56px; }
  .pr-titlu { font-size: clamp(2.8rem, 14vw, 4.2rem); }
  .pr-titlu__sub { font-size: .42em; }
  .pr-urmator { grid-template-columns: minmax(0, 1fr); grid-template-areas: "k" "nume" "tip" "media" "s"; min-height: 0; padding-top: 72px; padding-bottom: 72px; }
  .pr-urmator__media { aspect-ratio: 4 / 5; margin-top: 10px; }
  .pr-live__btn { width: 100%; justify-content: center; }
}

/* ---------- mai puțină mișcare: fără animații de intrare, fără îndoire, fără picătură, fără tranziția pe tot ecranul ---------- */
@media (prefers-reduced-motion: reduce) {
  body.pj-pagina { transition: none; }
  .pj-card__media img, .pj-card__media video, .pj-card__sageata, .pj-card__sageata svg,
  .pr-urmator__media img, .pr-urmator__media video, .pr-live__btn, .pr-live__btn svg { transition: none; }
  .pj-card:hover .pj-card__media img, .pj-card:hover .pj-card__media video,
  .pr-urmator:hover .pr-urmator__media img, .pr-urmator:hover .pr-urmator__media video { transform: none; }
}

/* oct. 2026: legătura spre ghidul domeniului */
.pr-ghid { margin: 0; padding: clamp(28px, 4vw, 48px) var(--pj-g) clamp(36px, 5vw, 64px); text-align: center; color: var(--pj-fg2); font-size: 1.05rem; }
.pr-ghid a { color: var(--pj-fg); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.pr-ghid a:hover { text-decoration-thickness: 2px; }
.pr-ghid a:focus-visible { outline: 3px solid var(--pj-fg); outline-offset: 4px; border-radius: 4px; }

/* =============================================================
   23.10.2026 · GALERIA „WOW”: scena (html.pj-js: pornită din <head>, înainte de primul afișaj; js/proiecte.js o conduce)
   - .pj-grila e pista (un pas de derulare pe proiect), .pj-scena stă lipită sus cât derulezi prin ea;
   - .pj-rama = locul proiectului activ (aici se hotărăște; WebGL îl măsoară și desenează exact acolo);
   - peste: textele proiectului activ (eticheta, titlul cu litere rotite, subtitlul, „Vezi proiectul”), progresul, antetul;
   - în DOM se animă doar transform și opacity.
   ============================================================= */
/* inundația de culoare: un strat fix sub pagină (js/proiecte.js, 2) — culoarea de bază, două discuri scalate, lumina */
body.pj-galerie { background-color: transparent; transition: none; }
.pj-fundal { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.pj-fundal i { position: absolute; inset: 0; background-color: #0F1412; }
.pj-fundal__d { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; opacity: 0; transform: scale(.001); }
.pj-fundal__lum {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 62% 52% at 50% 40%, rgba(255, 255, 255, .085), rgba(255, 255, 255, 0) 72%),
              radial-gradient(ellipse 125% 105% at 50% 46%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .46) 100%);
}
/* granulația de film, foarte fină (o plăcuță de 1,8 KB, statică): netezește treptele gradienților pe culorile adânci */
.pj-fundal__lum::after { content: ''; position: absolute; inset: 0; background: url(/img/proiecte/graunte.png) 0 0 / 64px 64px; opacity: .07; mix-blend-mode: normal; }

/* pista și scena */
html.pj-js .pj-galerie .pj-grila { --pj-pas: 100svh; position: relative; padding: 0; height: calc((var(--n, 11) - 1) * var(--pj-pas) + 100svh); }
html.pj-js .pj-galerie .pj-scena {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate;
  /* rama proiectului activ: 16:10 pe ecranele late, centrată, cu loc dedesubt pentru textele proiectului (--tb) */
  --tb: 214px;
  --rw: min(50vw, calc((100svh - 92px - var(--tb) - 40px) * 1.6));
  --rh: calc(var(--rw) / 1.6);
  --rx: calc(50% - var(--rw) / 2);
  --ry: max(92px, calc((100svh - var(--tb) - var(--rh)) / 2 + 22px));
  --rr: clamp(14px, 1.2vw, 22px);
  --tx: rgba(246, 242, 234, .84);
}
/* ecran în portret (telefon, tabletă ținută vertical): rama verticală, clipul vertical */
@media (orientation: portrait), (max-aspect-ratio: 1/1) {
  html.pj-js .pj-galerie .pj-grila { --pj-pas: 84svh; }
  html.pj-js .pj-galerie .pj-scena {
    --rw: min(76vw, calc((100svh - 412px) * .62));
    --rh: calc(var(--rw) / .62);
    --rx: calc(50% - var(--rw) / 2);
    --ry: 96px;                                     /* sub antetul site-ului (84 px pe telefon) */
    --rr: 16px;
  }
}
html.pj-js .pj-galerie .pj-perete { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
html.pj-gl .pj-galerie .pj-perete { pointer-events: auto; cursor: pointer; }
.pj-perete__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
html.pj-js .pj-galerie .pj-rama { position: absolute; left: var(--rx); top: var(--ry); width: var(--rw); height: var(--rh); border-radius: var(--rr); opacity: 0; pointer-events: none; }

/* antetul paginii: o etichetă mică (titlul mare îl are portalul) */
html.pj-js .pj-galerie .pj-cap { position: absolute; z-index: 3; right: calc(100% - var(--rx) - var(--rw)); top: calc(var(--ry) + var(--rh) + 26px); margin: 0; padding: 0; pointer-events: none; transition: opacity .4s ease; }
html.pj-js .pj-galerie .pj-titlu { display: flex; justify-content: flex-start; gap: .55em; font: 600 clamp(.82rem, .95vw, 1rem)/1 var(--font-body); letter-spacing: .2em; color: var(--tx); }
html.pj-js .pj-galerie .pj-titlu__n { margin: 0; font: inherit; color: inherit; opacity: .7; }
html.pj-js .pj-galerie .pj-sub { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* proiectele: toate în același loc, doar cel activ se vede (celelalte rămân în pagină, cu linkuri și texte reale) */
html.pj-js .pj-galerie .pj-lista { position: absolute; inset: 0; z-index: 2; display: block; margin: 0; padding: 0; pointer-events: none; }
html.pj-js .pj-galerie .pj-item { position: absolute; inset: 0; margin: 0 !important; pointer-events: none; }
html.pj-js .pj-galerie .pj-card { display: block; border-radius: 0; }
html.pj-js .pj-galerie .pj-card:focus-visible { outline: none; }
html.pj-js .pj-galerie .pj-card:focus-visible .pj-card__media { outline: 3px solid var(--pj-t); outline-offset: 6px; opacity: 1; }
html.pj-js .pj-galerie .pj-card:focus-visible .pj-card__go-t { text-decoration: underline; text-underline-offset: 6px; }
html.pj-js .pj-galerie .pj-card__media {
  position: absolute; left: var(--rx); top: var(--ry); width: var(--rw); height: var(--rh); aspect-ratio: auto;
  border-radius: var(--rr); background: transparent; pointer-events: none;
  opacity: 0; transform: scale(.94); transition: opacity .55s ease, transform .9s var(--nv-ease);
}
html.pj-js .pj-galerie .pj-item.is-activ .pj-card__media { opacity: 1; transform: none; pointer-events: auto; cursor: pointer; }
html.pj-js .pj-galerie .pj-card__media :is(img, video) { transition: opacity .45s ease; }
/* varianta CSS: o cortină în culoarea proiectului, cu marginea ondulată, urcă și descoperă imaginea (doar transform) */
html.pj-js .pj-galerie .pj-card__media::after {
  content: ''; position: absolute; left: -1px; right: -1px; top: 0; height: 118%; z-index: 2; pointer-events: none;
  background: var(--pj-c);
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 15.2%) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0h400v22c-34 18-64 30-104 20S228 8 190 14s-58 34-98 36S28 30 0 40z'/%3E%3C/svg%3E") bottom / 100% 15.4% no-repeat;
          mask: linear-gradient(#000, #000) top / 100% calc(100% - 15.2%) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0h400v22c-34 18-64 30-104 20S228 8 190 14s-58 34-98 36S28 30 0 40z'/%3E%3C/svg%3E") bottom / 100% 15.4% no-repeat;
  transform: translate3d(0, 0, 0); transition: transform 1.05s cubic-bezier(.72, 0, .2, 1);
}
html.pj-js .pj-galerie .pj-item.is-cortina .pj-card__media::after { transform: translate3d(0, -101%, 0); }
html.pj-js .pj-galerie .pj-card__media { overflow: hidden; }
/* cu peretele 3D: imaginea DOM se stinge (WebGL desenează același cadru în același loc), rămâne ținta clicului */
html.pj-gl .pj-galerie .pj-card__media { opacity: 0 !important; transform: none !important; transition: opacity .35s ease; }
html.pj-gl .pj-galerie .pj-card__media::after { display: none; }
html.pj-gl .pj-galerie .pj-card:focus-visible .pj-card__media { opacity: 1 !important; }
html.pj-gl .pj-galerie .pj-card:focus-visible .pj-card__media :is(img, video) { opacity: 0; }

/* textele proiectului activ: jos, în stânga (pe telefon, sub ramă) */
html.pj-js .pj-galerie .pj-card__text {
  position: absolute; left: var(--rx); top: calc(var(--ry) + var(--rh) + 24px); width: min(calc(var(--rw) - 190px), 860px); margin: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  opacity: 0; visibility: hidden; transition: opacity .14s ease, visibility 0s linear .14s;
}
html.pj-js .pj-galerie .pj-item.is-activ .pj-card__text { opacity: 1; visibility: visible; transition: none; pointer-events: auto; }
html.pj-js .pj-galerie .pj-item.is-trecut .pj-card__nume { visibility: hidden; }
html.pj-js .pj-galerie :is(.pj-card__tip, .pj-card__s, .pj-card__go) { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .14s ease, transform .3s var(--nv-ease); }
html.pj-js .pj-galerie .pj-item.is-activ :is(.pj-card__tip, .pj-card__s, .pj-card__go) { opacity: 1; transform: none; transition: opacity .42s ease .16s, transform .7s var(--nv-ease) .12s; }
html.pj-js .pj-galerie .pj-item.is-activ .pj-card__s { transition-delay: .3s, .26s; }
html.pj-js .pj-galerie .pj-item.is-activ .pj-card__go { transition-delay: .42s, .38s; }
.pj-tag { white-space: nowrap; }
/* etichetele: fiecare cu buletinul în fața ei; buletinul de la începutul unui rând cade în afara blocului (tăiat),
   deci niciun rând nu începe sau nu se termină cu „•”. Două rânduri rezervate, aliniate jos: titlul stă mereu la aceeași înălțime */
html.pj-js .pj-galerie .pj-card__tip { display: flex; flex-wrap: wrap; align-content: flex-end; min-height: 2.7em; margin-left: -1.3em !important; clip-path: inset(-.4em -.4em -.4em 1.3em); }
html.pj-js .pj-galerie .pj-card__tip .pj-tag > [aria-hidden] { display: none; }
html.pj-js .pj-galerie .pj-card__tip .pj-tag::before { content: '•'; display: inline-block; width: 1.3em; text-align: center; letter-spacing: 0; }
html.pj-js .pj-galerie .pj-card__tip { margin: 0 0 clamp(10px, 1.4svh, 16px); font: 600 clamp(.7rem, .78vw, .8rem)/1.35 var(--font-body); letter-spacing: .17em; text-transform: uppercase; color: var(--pj-t2); }
html.pj-js .pj-galerie .pj-card__nume { margin: 0; font-family: var(--font-display); font-weight: 520; font-size: clamp(2.4rem, 4.5vw, 5.6rem); line-height: .96; letter-spacing: -.03em; color: var(--pj-t); }
html.pj-js .pj-galerie .pj-card__n { display: inline-block; white-space: nowrap; }
html.pj-js .pj-galerie .pj-card__s { display: block; margin-top: .5em; font: 500 clamp(.98rem, 1.1vw, 1.15rem)/1.35 var(--font-body); letter-spacing: 0; color: var(--pj-t3); }
html.pj-js .pj-galerie .pj-card__dot { display: none; }
html.pj-js .pj-galerie .pj-card__go { margin-top: clamp(12px, 2svh, 22px); gap: 14px; font-size: 1rem; color: var(--pj-t); }
html.pj-js .pj-galerie .pj-card__sageata { width: 50px; border-width: 1.5px; transition: background-color .35s var(--nv-ease), color .35s var(--nv-ease), transform .35s var(--nv-ease); }
@media (hover: hover) {
  html.pj-js .pj-galerie .pj-card__go:hover .pj-card__sageata { background: var(--pj-t); color: var(--pj-c); transform: translateX(4px); }
}

/* progresul: 03 / 12 și o bară */
html.pj-js .pj-galerie .pj-progres {
  position: absolute; z-index: 3; right: calc(100% - var(--rx) - var(--rw)); top: calc(var(--ry) + var(--rh) + 54px); margin: 0;
  display: flex; align-items: center; gap: 10px; font: 600 .9rem/1 var(--font-body); letter-spacing: .08em; color: var(--tx); pointer-events: none;
  font-variant-numeric: tabular-nums; transition: opacity .4s ease;
}
.pj-progres { display: none; }
html.pj-js .pj-galerie .pj-progres__tot { opacity: .55; }
html.pj-js .pj-galerie .pj-progres__bara { position: relative; display: block; width: clamp(80px, 9vw, 140px); height: 2px; margin-left: 8px; background: rgba(246, 242, 234, .2); overflow: hidden; border-radius: 2px; }
html.pj-js .pj-galerie .pj-progres__bara i { position: absolute; inset: 0; background: currentColor; transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }

/* telefon / portret: eticheta paginii și progresul pe un rând sub ramă, textele dedesubt */
@media (orientation: portrait), (max-aspect-ratio: 1/1) {
  html.pj-js .pj-galerie .pj-cap { left: var(--rx); right: auto; top: calc(var(--ry) + var(--rh) + 14px); }
  html.pj-js .pj-galerie .pj-sub { display: none; }
  html.pj-js .pj-galerie .pj-progres { right: auto; left: calc(var(--rx) + var(--rw) - 150px); width: 150px; justify-content: flex-end; top: calc(var(--ry) + var(--rh) + 14px); bottom: auto; height: 14px; font-size: .74rem; letter-spacing: .14em; }
  html.pj-js .pj-galerie .pj-titlu { height: 14px; align-items: center; }
  html.pj-js .pj-galerie .pj-progres__bara { width: 56px; }
  html.pj-js .pj-galerie .pj-card__text { left: var(--rx); width: var(--rw); top: calc(var(--ry) + var(--rh) + 44px); bottom: auto; }
  html.pj-js .pj-galerie .pj-card__tip { letter-spacing: .12em; }
  html.pj-js .pj-galerie .pj-card__nume { font-size: clamp(2rem, 10.4vw, 3.4rem); }
  html.pj-js .pj-galerie .pj-card__s { margin-top: .4em; font-size: .95rem; }
  html.pj-js .pj-galerie .pj-card__go { margin-top: 14px; font-size: .95rem; }
  html.pj-js .pj-galerie .pj-card__sageata { width: 42px; }
  html.pj-js .pj-galerie .pj-titlu { font-size: .74rem; }
}
/* butonul „Pornește clipul” (doar cu „mai puțină mișcare”), în colțul ramei */
html.pj-js .pj-galerie .pj-play { top: calc(var(--ry) + 12px); right: auto; left: calc(var(--rx) + var(--rw) - 12px); transform: translateX(-100%); opacity: 0; pointer-events: none; }
html.pj-js .pj-galerie .pj-item.is-activ .pj-play { opacity: 1; pointer-events: auto; }

/* zborul în proiect (clic): textele scenei se retrag, camera intră în proiect (js/proiecte-perete.js) */
html.pj-zbor .pj-galerie :is(.pj-card__text, .pj-progres, .pj-cap) { opacity: 0 !important; transition: opacity .3s ease !important; }
html.pj-zbor .pj-blob { opacity: 0 !important; }
html.pj-zbor .pj-galerie .pj-item.is-activ .pj-card__nume { opacity: 0 !important; transition: none !important; }
html.pj-gl .pj-blob canvas { display: none; }
html.pj-gl .pj-blob__t { inset: auto; left: 50%; top: 50%; translate: -50% -50%; padding: 7px 13px 6px; border-radius: 999px; color: #fff; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  background: rgba(12, 10, 14, .52); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(8px) saturate(1.3); backdrop-filter: blur(8px) saturate(1.3); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); }
html.pj-gl:not(.pj-lupa) .pj-blob { opacity: 0 !important; }
.pj-flip--text .pj-flip__in, .pj-flip__in--gol { background: transparent; }

/* ---------- titlurile cu litere rotite (split-flap): js/proiecte.js, 3 ---------- */
.pj-sf-w { position: relative; white-space: nowrap; }
.pj-sf-w { --sf-a: color-mix(in srgb, var(--pj-c, #141018) 52%, #000); --sf-b: color-mix(in srgb, var(--pj-c, #141018) 40%, #000); }
.pj-portal .pj-sf-w { --sf-a: #221934; --sf-b: #18112a; }
.pj-sf { position: relative; display: inline-block; height: 1.02em; line-height: 1.02em; vertical-align: top; text-align: center; perspective: 3.4em; }
.pj-sf__l { position: relative; z-index: 1; display: inline-block; }
/* plăcuța are mărime fixă (aranjarea nu iese din ea), dar literele pot aluneca peste margini (la început și la topire) */
.pj-sf.is-fix { contain: size layout style; }
/* plăcuța (cât rulează panoul): sus mai deschisă, jos mai închisă, balamaua la mijloc, colțuri rotunjite, un mic spațiu între ele */
.pj-sf::before { content: ''; position: absolute; left: .014em; right: .014em; top: .02em; bottom: .01em; z-index: 0; border-radius: .055em; opacity: 0;
  background: linear-gradient(var(--sf-a) 0, var(--sf-a) 49.2%, rgba(0, 0, 0, .7) 49.2%, rgba(0, 0, 0, .7) 50.8%, var(--sf-b) 50.8%, var(--sf-b) 100%);
  box-shadow: inset 0 .02em 0 rgba(255, 255, 255, .07), 0 .03em .05em rgba(0, 0, 0, .35); transition: opacity .32s ease; }
.pj-sf--sp::before { display: none; }
.pj-sf-w.is-panou .pj-sf::before { opacity: 1; animation: pj-sf-placa .16s ease; }
@keyframes pj-sf-placa { from { opacity: 0; } }
/* balamaua, peste toate plăcuțele cât rulează panoul */
.pj-sf-w.is-panou:not(.is-stinge) .pj-sf:not(.pj-sf--sp):not(.pj-sf--x)::after { content: ''; position: absolute; left: .014em; right: .014em; top: 49.2%; height: 1.6%; z-index: 3; background: rgba(0, 0, 0, .6); }
/* literele titlului vechi care nu mai au loc: se sting unde erau */
.pj-sf--x { animation: pj-sf-fantoma .22s ease forwards; }
.pj-sf--x::before { display: none; }
@keyframes pj-sf-fantoma { to { opacity: 0; } }
/* sclipirea: o lumină care trece peste panou înainte să se topească */
.pj-sf-w.is-lucios::after {
  content: ''; position: absolute; left: -.1em; right: -.1em; top: -.04em; bottom: -.04em; z-index: 4; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, .1) 42%, rgba(255, 255, 255, .55) 49%, rgba(255, 255, 255, .12) 55%, rgba(255, 255, 255, 0) 62%) 100% 0 / 300% 100% no-repeat;
  animation: pj-sf-lucire .52s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes pj-sf-lucire { to { background-position: 0 0; opacity: .2; } }
/* ecranele tactile: clapetele se rotesc în plan (scaleY din js/proiecte.js), fără perspectivă și fără umbra plăcuței */
html.pj-sf-2d .pj-sf { perspective: none; }
html.pj-sf-2d .pj-sf::before, html.pj-sf-2d .pj-sf-w.is-panou .pj-sf::before { box-shadow: none; animation: none; transition: none; }
/* tactil: litera plăcuței se pliază pe balama și se deschide cu următoarea (o singură plăcuță, fără jumătăți) */
html.pj-sf-2d .pj-sf__l { transform-origin: 50% 50.8%; }
html.pj-sf-2d .pj-sf__fb { transform: scaleY(0); }
html.pj-sf-2d .pj-sf__ft, html.pj-sf-2d .pj-sf__fb { -webkit-backface-visibility: visible; backface-visibility: visible; }
.pj-sf-w.is-panou.is-stinge .pj-sf::before { opacity: 0; transition: opacity .32s ease; }
.pj-sf__h { position: absolute; left: .014em; right: .014em; height: 49.2%; overflow: hidden; opacity: 0; background: var(--sf-a); }
.pj-sf__b, .pj-sf__fb { background: var(--sf-b); }
.pj-sf__h b { position: absolute; left: -.014em; right: -.014em; top: 0; height: 203.3%; font-weight: inherit; text-align: center; }
.pj-sf__t, .pj-sf__ft { top: .02em; border-radius: .055em .055em 0 0; }
.pj-sf__b, .pj-sf__fb { top: 50.8%; border-radius: 0 0 .055em .055em; }
.pj-sf__t b, .pj-sf__ft b { top: -.02em; }
.pj-sf__b b, .pj-sf__fb b { top: calc(-50.8% / .492); }
.pj-sf__ft { z-index: 2; transform-origin: 50% 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.pj-sf__fb { z-index: 2; transform-origin: 50% 0; transform: rotateX(90deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.pj-sf__h i { position: absolute; inset: 0; background: #000; opacity: 0; }
.pj-sf.is-on .pj-sf__h { opacity: 1; }
.pj-sf.is-on .pj-sf__l { opacity: 0; }
.pj-sf.is-on::after { content: ''; position: absolute; left: .014em; right: .014em; top: 49.2%; height: 1.6%; z-index: 3; background: rgba(0, 0, 0, .7); }

/* ---------- portalul de intrare: butonul colorat „Proiecte” se deschide peste tot ecranul ---------- */
.pj-portal { display: none; }
html.pj-portal-on .pj-portal { display: block; position: fixed; inset: 0; z-index: 985; pointer-events: none; overflow: hidden; background: #0F1412; animation: pj-portal-stinge .42s ease 1.25s forwards; }
html.pj-portal-grabit .pj-portal { animation-duration: .2s; animation-delay: 0s; }
/* modul WebGL: portalul îl închide scriptul (dacă scriptul nu vine deloc, se stinge singur după ~4,6 s) */
html.pj-portal-js .pj-portal { animation: pj-portal-stinge .42s ease 4.6s forwards; }
html.pj-portal-js.pj-portal-grabit .pj-portal { animation: pj-portal-stinge .2s ease forwards; }
html.pj-portal-gl .pj-portal { opacity: 0; transition: opacity .18s ease; }
.pj-portal__pastila {
  position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; height: 100svh; border-radius: 999px; overflow: hidden; background: #6d28d9;
  transform: translate3d(var(--pj-tx, 0px), var(--pj-ty, 0px), 0) scale(var(--pj-psx, .2), var(--pj-psy, .085));
  /* colțurile: cât pastila are mărimea butonului, capetele sunt semicercuri (raze eliptice compensate pentru scalare) */
  border-radius: var(--pj-rx, 999px) / var(--pj-ry, 999px);
  animation: pj-portal-deschide .74s cubic-bezier(.3, .02, .16, 1) .03s forwards;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset;
}
.pj-portal__pastila i {
  position: absolute; top: 0; bottom: 0; left: 0; width: 400%;
  background: linear-gradient(90deg, #1d4ed8 0%, #6d28d9 8.33%, #a21caf 16.67%, #be123c 25%, #c2410c 33.33%, #be185d 41.67%,
    #1d4ed8 50%, #6d28d9 58.33%, #a21caf 66.67%, #be123c 75%, #c2410c 83.33%, #be185d 91.67%, #1d4ed8 100%);
  animation: pj-portal-curge 5s linear infinite; will-change: transform;
}
.pj-portal__t {
  position: absolute; left: 0; right: 0; top: 50%; margin: 0; transform: translate3d(0, -50%, 0); text-align: center;
  font-family: var(--font-display); font-weight: 560; font-size: clamp(3.2rem, 14.5vw, 15rem); line-height: 1; letter-spacing: -.02em;
  text-transform: uppercase; color: #fff; opacity: 0; animation: pj-portal-titlu .01s linear .38s forwards;
}
@media (orientation: portrait), (max-aspect-ratio: 1/1) { .pj-portal__t { font-size: clamp(3rem, 15vw, 9rem); } }
@keyframes pj-portal-deschide { to { transform: translate3d(0, 0, 0) scale(1.66, 1.66); } }
/* de la butonul apăsat: eticheta lui („Proiecte”) crește odată cu pastila până devine titlul mare (--pj-t0x/y/s: locul și
   mărimea ei, din scriptul din <head>); literele se rotesc apoi în majuscule (js/proiecte.js) */
html.pj-portal-buton .pj-portal__t { opacity: 1; animation: pj-portal-titlu-creste .74s cubic-bezier(.3, .02, .16, 1) .03s both; }
@keyframes pj-portal-titlu-creste {
  from { transform: translate3d(var(--pj-t0x, 0px), calc(-50% + var(--pj-t0y, 0px)), 0) scale(var(--pj-t0s, .1)); }
  to { transform: translate3d(0, -50%, 0) scale(1); }
}
@keyframes pj-portal-stinge { to { opacity: 0; } }
@keyframes pj-portal-curge { to { transform: translate3d(-50%, 0, 0); } }
@keyframes pj-portal-titlu { to { opacity: 1; } }
/* modul WebGL: literele titlului sunt cele reale („Proiecte” → „PROIECTE” pe plăcuțe); fără buton, titlul apare odată cu
   plăcuțele lui (nu întâi scris, apoi amestecat); dacă plăcuțele nu vin, apare singur după 1,6 s */
html.pj-portal-js .pj-portal__t { text-transform: none; }
html.pj-portal-js:not(.pj-portal-buton) .pj-portal__t:not(.is-montat) { animation: pj-portal-titlu .01s linear 1.6s forwards; }
html.pj-portal-js:not(.pj-portal-buton) .pj-portal__t.is-montat { animation: none; opacity: 1; }
/* cât rulează portalul, scena nu se vede încă (proiectul apare când se deschide; cu peretele 3D vine din adâncime) */
html.pj-portal-on:not(.pj-reel) .pj-galerie .pj-card__text, html.pj-portal-on .pj-galerie .pj-progres, html.pj-portal-on .pj-galerie .pj-cap { opacity: 0 !important; }
/* nici imaginea proiectului din pagină (fără dublură peste peretele care vine prin literele portalului) */
html.pj-portal-on:not(.pj-reel) .pj-galerie .pj-card__media { opacity: 0 !important; transition: none !important; }

/* accentul proiectului (ECOU: verde-lime; PULS: chihlimbar) */
.pj-item.is-activ .pj-card__tip { color: var(--pj-t2, var(--pj-fg2)); }

/* ---------- mai puțină mișcare: fără portal, fără litere rotite, fără cortină; schimbarea e o estompare scurtă ---------- */
@media (prefers-reduced-motion: reduce) {
  html.pj-js .pj-galerie .pj-card__media, html.pj-js .pj-galerie .pj-card__text { transform: none !important; transition: opacity .2s ease !important; }
  html.pj-js .pj-galerie .pj-card__media::after { display: none; }
  .pj-portal { display: none !important; }
}


/* =============================================================
   31.10.2026 — TELEFONUL: „reel” vertical pe tot ecranul (html.pj-reel, pus din <head> sub 768 px; js/proiecte.js, 4b)
   Un proiect pe ecran, cu clipul lui pe tot ecranul, ca un story premium. Derularea e cea nativă, cu scroll-snap
   (zero JavaScript pe cadru): fiecare glisare aduce exact un proiect. La trecere, culoarea proiectului nou urcă peste
   ecran odată cu degetul (animație legată de derulare, pe compozitor: doar opacity / transform), apoi clipul se descoperă,
   iar titlul se așază pe plăcuțe (split-flap scurt). Proiectul care pleacă rămâne în urmă (paralaxă) și se întunecă.
   Clipul activ rulează; următorul e preîncărcat; cele care nu se văd sunt oprite. Butonul „Vezi proiectul” e mare.
   Fără animation-timeline (browsere mai vechi): aceeași pagină, cu o intrare scurtă la schimbarea proiectului.
   ============================================================= */
html.pj-reel { scroll-snap-type: y mandatory; scroll-padding-top: 0; overscroll-behavior-y: none; }
html.pj-reel .pj-galerie .pj-grila { padding: 0; }
html.pj-reel .pj-galerie .pj-scena { position: relative; }
html.pj-reel .pj-galerie :is(.pj-perete, .pj-rama) { display: none; }
html.pj-reel .pj-galerie .pj-lista { display: block; margin: 0; padding: 0; }
html.pj-reel .pj-galerie .pj-item {
  position: relative; height: 100vh; height: 100svh; min-height: 520px; margin: 0 !important; overflow: hidden; isolation: isolate;
  scroll-snap-align: start; scroll-snap-stop: always; background: var(--pj-c); contain: layout paint style;
  /* ecranele care nu se văd nu se stilează, nu se aranjează și nu se desenează deloc (mai puține straturi la fiecare cadru) */
}
/* (nu și primul: el e pe ecran de la început, iar imaginea lui e LCP-ul paginii) */
html.pj-reel .pj-galerie .pj-item + .pj-item { content-visibility: auto; contain-intrinsic-size: auto 100vw auto 100svh; }
/* clipul pe tot ecranul */
html.pj-reel .pj-galerie .pj-card { position: absolute; inset: 0; display: block; border-radius: 0; color: var(--pj-t); }
/* (31.10, runda 3: clipurile de telefon nu mai au textele conceptelor, deci scena poate coborî mai mult spre titlu) */
html.pj-reel .pj-galerie .pj-card__media { position: absolute; inset: -9% 0 9% 0; aspect-ratio: auto; border-radius: 0; background: var(--pj-c); transform: none; }
html.pj-reel .pj-galerie .pj-card__media :is(img, video) { transition: opacity .5s ease; transform: none; }
html.pj-reel .pj-galerie .pj-card__media::after {
  /* ca textul să se citească pe orice cadru: culoarea proiectului urcă de jos, o umbră fină sus (sub antet) */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, .18) 16%, rgba(0, 0, 0, 0) 28%),
    linear-gradient(0deg, var(--pj-c) 0, var(--pj-c) 23%, color-mix(in srgb, var(--pj-c) 88%, transparent) 32%, color-mix(in srgb, var(--pj-c) 55%, transparent) 41%, color-mix(in srgb, var(--pj-c) 18%, transparent) 50%, transparent 58%);
}
/* textele: jos, deasupra barei de pe telefon */
html.pj-reel .pj-galerie .pj-card__text {
  position: absolute; z-index: 3; left: 20px; right: 20px; margin: 0;
  bottom: calc(var(--nova-bar-h, 64px) + env(safe-area-inset-bottom, 0px) + 20px);
}
html.pj-reel .pj-galerie .pj-card__tip { display: flex; flex-wrap: wrap; gap: .1em .9em; margin: 0 0 12px; font: 600 .72rem/1.35 var(--font-body); letter-spacing: .17em; text-transform: uppercase; color: var(--pj-t2); }
html.pj-reel .pj-galerie .pj-card__tip .pj-tag > [aria-hidden] { display: none; }
html.pj-reel .pj-galerie .pj-card__nume {
  margin: 0; font-family: var(--font-display); font-weight: 540; letter-spacing: -.035em; line-height: .95; color: var(--pj-t);
  /* titlul încape mereu pe un rând (și pe plăcuțe): mărimea după numărul de litere (--pj-len, din generator) */
  font-size: clamp(2.5rem, calc((100vw - 40px) * 1.62 / var(--pj-len, 8)), 5.4rem);
}
html.pj-reel .pj-galerie .pj-card__n { display: inline-block; white-space: nowrap; }
html.pj-reel .pj-galerie .pj-card__s { display: block; margin-top: .45em; font: 500 1.02rem/1.35 var(--font-body); letter-spacing: 0; color: var(--pj-t3); }
html.pj-reel .pj-galerie .pj-card__dot { display: none; }
/* „Vezi proiectul”: mare, plin, cu o lumină care trece din când în când (pe compozitor) */
html.pj-reel .pj-galerie .pj-card__go {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 62px;
  margin-top: 18px; padding: 0 8px 0 26px; border-radius: 999px; overflow: hidden; isolation: isolate;
  font: 650 1.12rem/1 var(--font-body); letter-spacing: .005em; color: var(--pj-c); background: var(--pj-t);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 10px 34px -16px var(--pj-l, transparent);
}
html.pj-reel .pj-galerie .pj-card__go::after {
  content: ''; position: absolute; inset: -20% auto -20% 0; width: 46%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--pj-l, #fff) 38%, transparent), transparent);
  transform: translate3d(-120%, 0, 0) skewX(-18deg);
}
html.pj-reel .pj-galerie .pj-item.is-activ .pj-card__go::after { animation: pj-reel-lumina 3.6s cubic-bezier(.5, 0, .2, 1) 1.1s 3; }   /* de 3 ori, apoi pagina stă liniștită */
@keyframes pj-reel-lumina { 0% { transform: translate3d(-120%, 0, 0) skewX(-18deg); } 38%, 100% { transform: translate3d(330%, 0, 0) skewX(-18deg); } }
html.pj-reel .pj-galerie .pj-card__sageata { width: 48px; border: 0; background: var(--pj-c); color: var(--pj-t); box-shadow: 0 0 0 2px var(--pj-l, transparent), 0 0 18px -2px var(--pj-l, transparent); }
html.pj-reel .pj-galerie .pj-card__sageata svg { width: 42%; height: 42%; }
html.pj-reel .pj-galerie .pj-card:active .pj-card__go { transform: scale(.985); }
html.pj-reel .pj-galerie .pj-card:focus-visible { outline: none; }
html.pj-reel .pj-galerie .pj-card:focus-visible .pj-card__go { outline: 3px solid var(--pj-t); outline-offset: 4px; }

/* sus: „PROIECTE (12)” pe primul ecran; numărul proiectului și bara de progres, fixe (dreapta sus) */
html.pj-reel .pj-galerie .pj-cap { position: absolute; z-index: 4; top: calc(env(safe-area-inset-top, 0px) + 106px); left: 20px; right: 96px; margin: 0; padding: 0; pointer-events: none; }
html.pj-reel .pj-galerie .pj-titlu { display: flex; justify-content: flex-start; gap: .55em; font: 650 .8rem/1 var(--font-body); letter-spacing: .22em; color: #F6F2EA; }
html.pj-reel .pj-galerie .pj-titlu__n { margin: 0; font: inherit; color: inherit; opacity: .72; }
html.pj-reel .pj-galerie .pj-sub { margin: 10px 0 0; max-width: 24ch; font: 500 .95rem/1.4 var(--font-body); color: rgba(246, 242, 234, .86); }
html.pj-reel .pj-galerie .pj-progres {
  position: fixed; z-index: 5; display: flex; align-items: center; gap: 6px; right: 16px; top: calc(env(safe-area-inset-top, 0px) + 98px); margin: 0;
  font: 650 .8rem/1 var(--font-body); letter-spacing: .1em; color: #F6F2EA; pointer-events: none; transition: opacity .3s ease;
  font-variant-numeric: tabular-nums; padding: 8px 12px; border-radius: 999px; background: rgba(10, 8, 12, .5); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset;
}
html.pj-reel .pj-galerie .pj-progres__tot { opacity: .6; }
html.pj-reel .pj-galerie .pj-progres__bara { display: none; }
html.pj-reel.pj-reel-final .pj-galerie .pj-progres { opacity: 0; }
/* indiciul de pe primul ecran: „Glisează” (dispare la prima derulare) */
.pj-reel-indiciu, .pj-val, .pj-umbra { display: none; }
html.pj-reel .pj-galerie :is(.pj-val, .pj-umbra) { display: block; }
html.pj-reel .pj-reel-indiciu {
  display: flex; flex-direction: column; align-items: center; gap: 4px; position: absolute; z-index: 4; right: 24px;
  top: 44%; bottom: auto; margin: 0; text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
  font: 650 .66rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: rgba(246, 242, 234, .9); pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
html.pj-reel .pj-reel-indiciu i { display: block; width: 26px; height: 40px; border: 1.5px solid currentColor; border-radius: 14px; position: relative; }
html.pj-reel .pj-reel-indiciu i::after { content: ''; position: absolute; left: 50%; top: 22px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: currentColor; animation: pj-reel-deget 1.6s cubic-bezier(.5, 0, .2, 1) infinite; }
@keyframes pj-reel-deget { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 80%, 100% { transform: translateY(-14px); opacity: 0; } }
html.pj-reel.pj-reel-mers .pj-reel-indiciu { opacity: 0; transform: translateY(-10px); }
html.pj-reel.pj-reel-mers .pj-reel-indiciu i::after { animation: none; }

/* finalul („Următorul proiect poate fi al tău”) și subsolul: și ele puncte de oprire, ca derularea să ajungă până jos */
html.pj-reel .pj-final { scroll-snap-align: start; min-height: 100svh; justify-content: center; }
html.pj-reel .footer { scroll-snap-align: end; }

/* ---------- trecerea dintre proiecte: tranziții pe compozitor, pornite de IntersectionObserver (js/proiecte.js, 4b) ----------
   (31.10, măsurat: legate direct de derulare cu animation-timeline, aceleași efecte se calculau pe firul principal la
   fiecare cadru al glisării: p95 20,9 ms la CPU ×4; ca tranziții pornite de două clase, firul principal stă liber.)
   .is-gol: ecranul e în afara vederii → vălul în culoarea proiectului îl acoperă, clipul e puțin mărit;
   intră pe ecran (peste 45 %) → vălul se retrage și descoperă clipul, care se așază; .is-iese: pleacă → se întunecă. */
@media (prefers-reduced-motion: no-preference) {
  /* culoarea proiectului nou urcă odată cu ecranul lui (cu o margine luminoasă în accentul proiectului), apoi se retrage */
  html.pj-reel .pj-galerie .pj-val {
    position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: color;
    background: linear-gradient(180deg, var(--pj-l, #fff) 0, color-mix(in srgb, var(--pj-l, #fff) 70%, var(--pj-c)) 30%, color-mix(in srgb, var(--pj-l, #fff) 55%, var(--pj-c)) 100%);
    transition: opacity .9s cubic-bezier(.45, 0, .2, 1) .12s;
  }
  html.pj-reel .pj-galerie .pj-item.is-gol .pj-val { opacity: 1; transition: none; }
  /* marginea de sus a ecranului care intră: o linie de lumină în accentul proiectului (se stinge când ecranul se așază) */
  html.pj-reel .pj-galerie .pj-item::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22%; z-index: 3; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--pj-l, #fff) 55%, transparent), transparent); opacity: 0; transition: opacity .7s ease .15s; }
  html.pj-reel .pj-galerie .pj-item.is-gol::after { opacity: .75; transition: none; }
  /* clipul: intră puțin mărit și se așază */
  html.pj-reel .pj-galerie .pj-card__media { transition: transform 1.5s cubic-bezier(.16, 1, .3, 1); }
  html.pj-reel .pj-galerie .pj-item.is-gol .pj-card__media { transform: scale(1.16); transition: none; }
  /* proiectul care pleacă se întunecă */
  html.pj-reel .pj-galerie .pj-umbra { position: absolute; inset: 0; z-index: 2; background: #000; pointer-events: none; opacity: 0; transition: opacity .55s ease; }
  html.pj-reel .pj-galerie .pj-item.is-iese .pj-umbra { opacity: .6; }
}
/* bara de progres din dreapta: un element real, scalat la schimbarea proiectului (transform, cu tranziție) */
html.pj-reel .pj-reel-bara { position: fixed; z-index: 5; right: 8px; top: 30%; width: 2px; height: 40%; border-radius: 2px; overflow: hidden; pointer-events: none; background: rgba(246, 242, 234, .22); transition: opacity .3s ease; }
html.pj-reel .pj-reel-bara i { position: absolute; inset: 0; background: #F6F2EA; transform-origin: 50% 0; transform: scaleY(.09); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
html.pj-reel.pj-reel-final .pj-reel-bara { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  /* textele urcă după ce proiectul s-a oprit pe ecran (tranziție pe compozitor, pornită de clasa .is-activ: legată de derulare,
     animația lor ținea firul principal ocupat în fiecare cadru al glisării, 20,9 → 14 ms p95 la CPU ×4) */
  html.pj-reel .pj-galerie .pj-card__text { opacity: 0; transform: translate3d(0, 38px, 0); transition: opacity .45s ease, transform .8s cubic-bezier(.16, 1, .3, 1); }
  html.pj-reel .pj-galerie .pj-item.is-activ .pj-card__text { opacity: 1; transform: none; }
  /* primul proiect: textele sunt pe ecran din primul cadru (titlul e LCP-ul paginii; imaginea pe tot ecranul nu contează la LCP) */
  html.pj-reel .pj-galerie .pj-item:first-child:not(.is-gol) .pj-card__text { opacity: 1; transform: none; }
  html.pj-reel .pj-galerie .pj-item.is-activ :is(.pj-card__s, .pj-card__go) { animation: pj-reel-urca .8s cubic-bezier(.16, 1, .3, 1) both; }
  html.pj-reel .pj-galerie .pj-item.is-activ .pj-card__s { animation-delay: .08s; }
  html.pj-reel .pj-galerie .pj-item.is-activ .pj-card__go { animation-delay: .16s; }
  @keyframes pj-reel-urca { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
}
/* titlul pe plăcuțe, pe telefon: plăcuțele în culoarea proiectului, mai închisă */
html.pj-reel .pj-galerie .pj-card__nume .pj-sf-w { --sf-a: color-mix(in srgb, var(--pj-c) 62%, #000); --sf-b: color-mix(in srgb, var(--pj-c) 48%, #000); }
/* portalul de intrare: imaginea primului proiect e deja dedesubt (fără așteptare după portal) */
html.pj-reel.pj-portal-on .pj-galerie .pj-card__media { opacity: 1 !important; }
html.pj-reel .pj-portal { background: color-mix(in srgb, var(--pj-c0, #0F1412) 62%, transparent); }
html.pj-reel.pj-portal-on .pj-portal__pastila { animation: pj-portal-deschide .74s cubic-bezier(.3, .02, .16, 1) .03s forwards, pj-portal-scurge .45s ease .92s forwards; }
@keyframes pj-portal-scurge { to { opacity: 0; } }
/* 10. subsolul: ultima oprire lasă loc barei de jos */
html.pj-reel .footer { scroll-margin-bottom: calc(var(--nova-bar-h, 64px) + env(safe-area-inset-bottom, 0px)); }   /* doar subsolul (pe <html> ar fi îngustat zona de oprire a fiecărui ecran) */
/* „mai puțină mișcare”: butonul „Pornește clipul” sus, în dreapta */
html.pj-reel .pj-galerie .pj-play { position: absolute; z-index: 4; top: auto; bottom: calc(var(--nova-bar-h, 64px) + env(safe-area-inset-bottom, 0px) + 300px); right: 16px; left: auto; }

/* finalul pe telefon: culorile tuturor proiectelor într-un mozaic de lumină (js/proiecte.js → --pj-mozaic), lent, în spatele îndemnului */
html.pj-reel .pj-final { overflow: hidden; isolation: isolate; }
html.pj-reel .pj-final::before {
  content: ''; position: absolute; left: 50%; top: 46%; width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; z-index: -1; pointer-events: none;
  background: var(--pj-mozaic, none); border-radius: 50%; opacity: .34; filter: blur(48px); transform: scale(.6);
  transition: transform 1.6s cubic-bezier(.16, 1, .3, 1), opacity 1.2s ease;
}
html.pj-reel.pj-reel-final .pj-final::before { transform: scale(1) rotate(40deg); opacity: .5; }
html.pj-reel .pj-final::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 46%, transparent 0, rgba(15, 20, 18, .55) 62%, #0F1412 100%); }
@media (prefers-reduced-motion: reduce) { html.pj-reel .pj-final::before { transition: none; transform: none; } }
/* runda 3: inelul tuturor proiectelor (js/proiecte.js): intră din adânc, rotit, și se așază; apoi se rotește încet cât finalul e pe ecran */
html.pj-reel .pj-inel {
  --r: min(56vw, 300px); position: absolute; left: 50%; top: 46%; width: 0; height: 0; z-index: 0; pointer-events: none;
  opacity: 0; transform: scale(.42) rotate(-40deg); transition: transform 1.9s cubic-bezier(.16, 1, .3, 1), opacity 1.1s ease;
}
html.pj-reel.pj-reel-final .pj-inel { opacity: 1; transform: none; }
html.pj-reel .pj-inel__r { position: absolute; left: 0; top: 0; animation: pj-inel-roteste 90s linear infinite paused; }
html.pj-reel.pj-reel-final .pj-inel__r { animation-play-state: running; }
@keyframes pj-inel-roteste { to { transform: rotate(360deg); } }
/* critica 4 (cadrele de jos stăteau cu capul în jos): fiecare cadru stă drept; locul pe cerc îl dă <i>, iar imaginea (cu rama ei)
   se rotește invers față de inel, tot pe compozitor, așa că rămâne dreaptă cât inelul se învârte */
html.pj-reel .pj-inel i {
  /* 1.11.2026 (16 proiecte): cadrul se micșorează cu numărul de proiecte, ca să rămână loc între ele și pe telefoanele înguste */
  --w: min(80px, calc(var(--r) * 6.2832 / var(--n) * .74)); --h: calc(var(--w) * 1.775);
  position: absolute; left: calc(var(--w) / -2); top: calc(var(--h) / -2); width: var(--w); height: var(--h);
  transform: rotate(calc(var(--i) * 360deg / var(--n))) translate3d(0, calc(-1 * var(--r)), 0) rotate(calc(var(--i) * -360deg / var(--n)));
}
html.pj-reel .pj-inel img {
  display: block; width: 100%; height: 100%; object-fit: cover; opacity: .82; border-radius: 16px; background: var(--pj-c);
  box-shadow: 0 18px 34px -14px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .14);
  animation: pj-inel-contra 90s linear infinite paused;
}
html.pj-reel.pj-reel-final .pj-inel img { animation-play-state: running; }
@keyframes pj-inel-contra { to { transform: rotate(-360deg); } }
/* textul rămâne citibil peste inel */
html.pj-reel .pj-final :is(.pj-cta, .pj-info) { position: relative; z-index: 1; }
html.pj-reel .pj-final .pj-cta::before { content: ''; position: absolute; inset: -22% -14%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(15, 20, 18, .82), rgba(15, 20, 18, .5) 60%, transparent); }
@media (prefers-reduced-motion: reduce) { html.pj-reel .pj-inel { transition: none; } html.pj-reel :is(.pj-inel__r, .pj-inel img) { animation: none; } }