/* =============================================================
   NovaWebDesign — „Cum decurge proiectul tău” (#proces, Start12 · Faza 3)
   O singură poveste vizuală: un mic site care crește (idee → schiță → design → aprobare → construcție → lansare).
   PC: scena stă lipită (sticky) lângă pași, iar linia pașilor se desenează la derulare.
   Telefon: fiecare pas primește scena lui, mai mică (js/proces.js o copiază din scena principală).
   Mișcare redusă: scenele se schimbă fără animații. Doar transform / opacity / stroke-dashoffset.
   ============================================================= */
.pj { --pj-e: cubic-bezier(.22, 1, .36, 1); overflow: clip; }
.pj .section-header { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.pj-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.pj-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.pj-stage-col { position: sticky; top: max(96px, calc(50vh - 230px)); }
.pj-stage,
.pj-mini {
  position: relative;
  aspect-ratio: 560 / 400;
  border-radius: 24px;
  border: 1px solid rgba(var(--nv-tx-rgb), .07);
  background:
    radial-gradient(70% 60% at 62% 45%, rgba(var(--nv-acc-rgb), .1), transparent 70%),
    linear-gradient(180deg, rgba(var(--nv-card-rgb), .9), rgba(var(--nv-card-rgb), .55));
  box-shadow: 0 30px 60px -40px rgba(var(--nv-bg-rgb), .9), inset 0 1px 0 rgba(var(--nv-tx-rgb), .04);
}
.pj-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pj-t { font: 600 15px/1 var(--font-body, 'Figtree', system-ui, sans-serif); }
.pj-t-s { font-size: 13px; font-weight: 500; }
.pj-t-b { font-weight: 700; }

/* ---------- pașii și linia ---------- */
.pj-steps { position: relative; list-style: none; margin: 0; padding: 0 0 0 64px; }
.pj-steps::before,
.pj-steps::after {
  content: '';
  position: absolute;
  left: 21px;
  top: 22px;
  bottom: 30px;
  width: 2px;
  border-radius: 2px;
}
.pj-steps::before { background: rgba(var(--nv-tx-rgb), .08); }
.pj-steps::after,
.pj-line {
  background: linear-gradient(180deg, var(--nv-acc-hi), var(--nv-acc) 60%, rgba(var(--nv-acc-rgb), .6));
  box-shadow: 0 0 12px rgba(var(--nv-acc-rgb), .3);
  transform-origin: top;
}
/* cu JS: linia e elementul .pj-line (js/proces.js îi scrie direct transform: scaleY), fără variabilă pe listă */
.pj-steps.pj-js::after { display: none; }
.pj-line {
  position: absolute;
  left: 21px;
  top: 22px;
  bottom: 30px;
  width: 2px;
  border-radius: 2px;
  pointer-events: none;
}
.pj-step { position: relative; min-height: 34vh; min-height: 34svh; padding: 4px 0 3rem; }
.pj-step:last-child { min-height: 0; padding-bottom: .5rem; }
.pj-node {
  position: absolute;
  left: -64px;
  top: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--nv-tx-rgb), .16);
  background: var(--nv-bg);
  color: var(--nv-tx2);
  font: 600 .95rem/1 var(--font-body, 'Figtree', system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  transition: background-color .4s ease, border-color .4s ease, color .4s ease, box-shadow .4s ease;
}
.pj-step.is-past .pj-node,
.pj-step.is-active .pj-node {
  border-color: transparent;
  background: var(--nv-btn);
  color: var(--nv-on-acc);
}
.pj-step.is-past:not(.is-active) .pj-node { background: linear-gradient(rgba(var(--nv-acc-rgb), .16), rgba(var(--nv-acc-rgb), .16)), var(--nv-bg); color: var(--nv-acc-hi); border-color: rgba(var(--nv-acc-rgb), .45); }
.pj-step.is-active .pj-node { box-shadow: 0 0 0 6px rgba(var(--nv-acc-rgb), .14), 0 0 26px rgba(var(--nv-acc-rgb), .35); }
.pj-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: 5px 0 .9rem; }
.pj-head h3 { margin: 0; font: 560 1.45rem/1.2 var(--font-display, serif); letter-spacing: -.01em; color: var(--nv-tx2); transition: color .4s ease; }
.pj-step.is-active .pj-head h3 { color: var(--nv-tx); }
.pj-time {
  display: inline-flex;
  align-items: baseline;
  gap: .3em;
  padding: .28rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--nv-acc-rgb), .3);
  background: rgba(var(--nv-acc-rgb), .08);
  color: var(--nv-acc-hi);
  font-size: .8125rem;
  font-weight: 500;
  white-space: nowrap;
}
.pj-count { font-weight: 700; color: var(--nv-tx); font-variant-numeric: tabular-nums; display: inline-block; text-align: right; }
.pj-body p { margin: 0 0 .5rem; max-width: 34rem; color: var(--nv-tx2); font-size: 1rem; line-height: 1.65; }
.pj-body p strong { color: var(--nv-tx); font-weight: 600; }

.pj-cta { margin-top: clamp(2.5rem, 5vw, 4rem); text-align: center; }
.pj-cta p { margin: 1rem auto 0; max-width: 32rem; color: var(--text-secondary, var(--nv-tx2)); font-size: .9375rem; line-height: 1.55; }

/* ---------- culorile ilustrației, legate de temă (SVG-ul din index.html are culori fixe) ---------- */
.pj-scene [fill="#fff"] { fill: var(--nv-tx); }
.pj-scene [stroke="#fff"] { stroke: var(--nv-tx); }
.pj-scene [stop-color="#fff"] { stop-color: var(--nv-tx); }
.pj-scene [fill="#101019"], .pj-scene [fill="#0B0B12"] { fill: var(--nv-bg); }
.pj-scene [fill="#15151F"] { fill: var(--nv-card); }
.pj-scene [fill="#1C1830"], .pj-scene [fill="#1E1B3A"] { fill: var(--nv-raised); }
.pj-scene [fill="#2A2352"] { fill: rgba(var(--nv-acc-rgb), .2); }
.pj-scene [fill="#0E3440"] { fill: rgba(var(--nv-acc2-rgb), .14); }
.pj-scene [stroke="#1E1B4B"] { stroke: var(--nv-bg); }
.pj-scene [stroke="#D4D4E2"] { stroke: var(--nv-tx2); }
.pj-scene [fill="#94A3B8"] { fill: var(--nv-tx3); }

/* ---------- scenele: ce se vede la fiecare pas (stare finală = fără animații) ---------- */
.pj-scene .w-ghost, .pj-scene .w-frame, .pj-scene .w-sketch, .pj-scene .w-design, .pj-scene .w-full,
.pj-scene .w-launch, .pj-scene .w-check, .pj-scene .p { opacity: 0; transition: opacity .5s ease; }
.pj-scene .w-halo { opacity: .55; transition: opacity .8s ease; }
.pj-scene[data-scene="1"] .w-ghost,
.pj-scene[data-scene="1"] .p1,
.pj-scene[data-scene="2"] .p2,
.pj-scene[data-scene="3"] .p3,
.pj-scene[data-scene="4"] .p4,
.pj-scene[data-scene="5"] .p5,
.pj-scene[data-scene="6"] .p6,
.pj-scene[data-scene="2"] .w-frame, .pj-scene[data-scene="3"] .w-frame, .pj-scene[data-scene="4"] .w-frame,
.pj-scene[data-scene="5"] .w-frame, .pj-scene[data-scene="6"] .w-frame,
.pj-scene[data-scene="2"] .w-sketch,
.pj-scene[data-scene="3"] .w-design, .pj-scene[data-scene="4"] .w-design, .pj-scene[data-scene="5"] .w-design, .pj-scene[data-scene="6"] .w-design,
.pj-scene[data-scene="5"] .w-full, .pj-scene[data-scene="6"] .w-full,
.pj-scene[data-scene="4"] .w-check,
.pj-scene[data-scene="6"] .w-launch { opacity: 1; }
.pj-scene[data-scene="3"] .w-sketch { opacity: .22; }
.pj-scene[data-scene="6"] .w-halo { opacity: 1; }
.pj-scene .p-cursor { transform: translate(300px, 196px); }
.pj-scene .l-sweep { transform: translateX(260px); }

/* elementele animate se rotesc / scalează în jurul propriului centru */
.pj-scene .d, .pj-scene .f, .pj-scene .s, .pj-scene .c, .pj-scene .p-phone, .pj-scene .p-rings path, .pj-scene .p-b1,
.pj-scene .p-b2, .pj-scene .p-sheet, .pj-scene .p-approve, .pj-scene .k-disc, .pj-scene .k-rays, .pj-scene .l-online,
.pj-scene .l-dot, .pj-scene .l-spark path, .pj-scene .p-pulse, .pj-scene .g-glow, .pj-scene .w-halo {
  transform-box: fill-box;
  transform-origin: center;
}
.pj-scene .s, .pj-scene .c { transform-origin: left center; }

/* ---------- animațiile (doar cu scena pe ecran: .is-on) ---------- */
/* 1 · telefonul sună, apar mesajele, becul ideii pulsează */
.pj-scene.is-on[data-scene="1"] .p-phone { animation: pjRing 1.8s ease-in-out infinite; }
.pj-scene.is-on[data-scene="1"] .p-rings path { animation: pjWave 1.8s ease-out infinite; animation-delay: calc(var(--i) * .16s); }
.pj-scene.is-on[data-scene="1"] .p-b1 { animation: pjPop .6s var(--pj-e) .35s both; }
.pj-scene.is-on[data-scene="1"] .p-b2 { animation: pjPop .6s var(--pj-e) 1.2s both; }
.pj-scene.is-on[data-scene="1"] .g-glow { animation: pjGlow 2.4s ease-in-out infinite; }
/* 2 · schița se desenează, foaia se completează și se semnează */
.pj-scene.is-on[data-scene="2"] .w-sketch path { stroke-dasharray: 1; animation: pjDraw 1.1s ease-in-out both; }
.pj-scene.is-on[data-scene="2"] .w-sketch path:nth-child(2) { animation-delay: .35s; }
.pj-scene.is-on[data-scene="2"] .w-sketch path:nth-child(3) { animation-delay: .8s; }
.pj-scene.is-on[data-scene="2"] .w-sketch path:nth-child(4) { animation-delay: 1.2s; }
.pj-scene.is-on[data-scene="2"] .p-sheet { animation: pjSlide .7s var(--pj-e) both; }
.pj-scene.is-on[data-scene="2"] .s { animation: pjFill .5s var(--pj-e) both; animation-delay: calc(.5s + var(--i) * .22s); }
.pj-scene.is-on[data-scene="2"] .s-sign { stroke-dasharray: 1; animation: pjDraw .9s ease-in-out 1.7s both; }
/* 3 · blocurile colorate se așază, cursorul aduce culori */
.pj-scene.is-on[data-scene="3"] .d { animation: pjAssemble .7s var(--pj-e) both; animation-delay: calc(.15s + var(--i) * .09s); }
.pj-scene.is-on[data-scene="3"] .p-cursor { animation: pjCursor 2.8s var(--pj-e) .4s infinite; }
/* 4 · „Aprob”, bifa aurie */
.pj-scene.is-on[data-scene="4"] .p-approve { animation: pjPress .5s ease .45s both; }
.pj-scene.is-on[data-scene="4"] .p-hand { animation: pjHand .5s var(--pj-e) both; }
.pj-scene.is-on[data-scene="4"] .w-check > circle:first-child { animation: pjFade .4s ease .6s both; }
.pj-scene.is-on[data-scene="4"] .k-disc { animation: pjStamp .7s var(--pj-e) .65s both; }
.pj-scene.is-on[data-scene="4"] .k-tick { stroke-dasharray: 1; animation: pjDraw .45s ease-out 1s both; }
.pj-scene.is-on[data-scene="4"] .k-rays { animation: pjRays .9s var(--pj-e) 1.05s both; }
/* 5 · codul se scrie, site-ul se completează */
.pj-scene.is-on[data-scene="5"] .c { animation: pjFill .45s var(--pj-e) both; animation-delay: calc(.1s + var(--i) * .16s); }
.pj-scene.is-on[data-scene="5"] .c-caret { animation: pjBlink 1s steps(1) infinite; }
.pj-scene.is-on[data-scene="5"] .p-flow { animation: pjFlow .8s linear infinite; }
.pj-scene.is-on[data-scene="5"] .f { animation: pjRise .6s var(--pj-e) both; animation-delay: calc(.6s + var(--i) * .22s); }
/* 6 · pornire: lumină peste site, „Online”, scântei */
.pj-scene.is-on[data-scene="6"] .w-halo { animation: pjHalo 3.2s ease-in-out infinite; }
.pj-scene.is-on[data-scene="6"] .l-sweep { animation: pjSweep 3.4s ease-in-out .3s infinite; }
.pj-scene.is-on[data-scene="6"] .l-online { animation: pjPop .6s var(--pj-e) .5s both; }
.pj-scene.is-on[data-scene="6"] .l-dot { animation: pjGlow 1.6s ease-in-out infinite; }
.pj-scene.is-on[data-scene="6"] .l-spark path { animation: pjTwinkle 2.2s ease-in-out infinite; animation-delay: calc(var(--i) * .45s); }
.pj-scene.is-on[data-scene="6"] .p-pulse { animation: pjPulse 2.2s ease-out infinite; animation-delay: calc(var(--i) * 1.1s); }
/* Runda 4: animațiile din scena SVG (elemente SVG: nu pot rula pe compozitor, cer cadre pe firul principal)
   se repetă de câteva ori la sosirea pe pas, apoi scena stă (nu mai ține telefonul ocupat cât citești) */
.pj-scene.is-on .p-phone, .pj-scene.is-on .p-rings path, .pj-scene.is-on .g-glow, .pj-scene.is-on .p-cursor,
.pj-scene.is-on .c-caret, .pj-scene.is-on .p-flow, .pj-scene.is-on .w-halo, .pj-scene.is-on .l-sweep,
.pj-scene.is-on .l-dot, .pj-scene.is-on .l-spark path, .pj-scene.is-on .p-pulse { animation-iteration-count: 3 !important; }

@keyframes pjRing { 0%, 55%, 100% { transform: rotate(0); } 60% { transform: rotate(-7deg); } 65% { transform: rotate(7deg); } 70% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } 80% { transform: rotate(0); } }
@keyframes pjWave { 0% { opacity: 0; transform: translateX(-4px); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateX(6px); } }
@keyframes pjPop { from { opacity: 0; transform: translateY(8px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes pjGlow { 0%, 100% { opacity: .45; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes pjDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pjSlide { from { opacity: 0; transform: translateX(-26px) rotate(-5deg); } to { opacity: 1; transform: none; } }
@keyframes pjFill { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes pjAssemble { from { opacity: 0; transform: translateY(-16px) scale(.88); } to { opacity: 1; transform: none; } }
@keyframes pjCursor { 0% { opacity: 0; transform: translate(80px, 150px); } 12% { opacity: 1; } 70% { opacity: 1; transform: translate(300px, 196px); } 85%, 100% { opacity: 0; transform: translate(300px, 196px); } }
@keyframes pjPress { 0%, 100% { transform: none; } 50% { transform: scale(.93); } }
@keyframes pjHand { from { opacity: 0; transform: translate(14px, 22px); } to { opacity: 1; transform: none; } }
@keyframes pjFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pjStamp { 0% { opacity: 0; transform: scale(.2); } 60% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: none; } }
@keyframes pjRays { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes pjBlink { 50% { opacity: 0; } }
@keyframes pjFlow { to { stroke-dashoffset: -10; } }
@keyframes pjRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pjHalo { 0%, 100% { opacity: .75; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes pjSweep { 0% { transform: translateX(0); } 60%, 100% { transform: translateX(460px); } }
@keyframes pjTwinkle { 0%, 100% { opacity: .2; transform: scale(.6) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(45deg); } }
@keyframes pjPulse { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.8); } }

/* ---------- telefon / tabletă: vertical, câte o scenă mică la fiecare pas ---------- */
@media (max-width: 899.98px) {
  .pj-wrap { display: block; }
  .pj-stage-col { position: static; margin: 0 auto 2.5rem; max-width: 560px; }
  .pj-minis .pj-stage-col { display: none; }
  .pj-mini { margin: .2rem 0 1rem; border-radius: 18px; }
  .pj-steps { padding-left: 50px; }
  .pj-steps::before, .pj-steps::after, .pj-line { left: 17px; top: 18px; }
  .pj-node { left: -50px; width: 36px; height: 36px; font-size: .9rem; }
  .pj-step { min-height: 0; padding-bottom: 2.25rem; }
  .pj-head { margin-top: 2px; }
  .pj-head h3 { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pj-scene *, .pj-node, .pj-head h3 { animation: none !important; transition: none !important; }
}

/* Runda 6 · telefon / tabletă: pasul are scena mică în stânga și textul în dreapta (același conținut, ~3x mai puțin de derulat) */
@media (max-width: 899.98px) {
  .pj-body { display: grid; grid-template-columns: minmax(100px, 36%) minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .pj-body > .pj-mini { grid-column: 1; grid-row: 1 / span 4; margin: 3px 0 0; border-radius: 12px; }
  .pj-body > .pj-head, .pj-body > p { grid-column: 2; }
  .pj-step { padding-bottom: 1.2rem; }
  .pj-head { margin: 0 0 .3rem; gap: .25rem .5rem; }
  .pj-head h3 { font-size: 1.12rem; }
  .pj-time { font-size: .74rem; padding: .16rem .55rem; }
  .pj-body p { font-size: .9rem; line-height: 1.5; margin-bottom: .3rem; }
}

.pj-node { z-index: 2; }   /* linia de timp trece pe sub cerc, nu peste cifră */