/* ============================================================
   White for Life — LIVE : ecranul mare din sală
   Scenă fixă 1920×1080, scalată o singură dată prin transform.
   Motiv: proiectorul din sală poate fi 1280×720, 1366×768 sau 4K —
   compoziția aprobată trebuie să arate identic, fără riscul ca un
   card să treacă pe rândul următor exact în seara evenimentului.
   ============================================================ */

:root{
  --cream-top:#FBF3F2; --cream:#F4ECE6; --cream-bot:#F0E8E1;
  --ivory:#F7F1EB;
  --ink:#3C3542;
  --ink-soft:#6B6373;          /* mai închis decât pe site: proiectorul „mănâncă" contrastul */
  --plum:#574A66; --plum-deep:#473C58;
  --lav:#9A8BB0;
  --gold:#C3A988;
  --sage:#7E876B;
  --line:rgba(60,53,66,.14);
  --line-soft:rgba(60,53,66,.10);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost",-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  background:linear-gradient(176deg,var(--cream-top) 0%,var(--cream) 46%,var(--cream-bot) 100%);
  font-family:var(--sans);color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:lining-nums tabular-nums;
}

/* ---- scena fixă ---- */
#stage{
  position:fixed;left:50%;top:50%;
  width:1920px;height:1080px;
  transform:translate(-50%,-50%) scale(var(--k,1));
  transform-origin:center center;
  background:linear-gradient(176deg,var(--cream-top) 0%,var(--cream) 46%,var(--cream-bot) 100%);
  overflow:hidden;
}
/* un singur ecou de apus, fără fotografie: pozele sub cifre ucid contrastul în sală */
#stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1200px 700px at 50% -10%, rgba(195,169,136,.16), transparent 70%);
  animation:bloom 60s ease-in-out infinite alternate;
}
@keyframes bloom{from{transform:translate(-30px,0)}to{transform:translate(30px,14px)}}

/* ================= ZONA A — HERO ================= */
.hero{position:absolute;left:96px;top:0;width:1728px;height:452px;text-align:center}

.eyebrow{
  position:absolute;left:0;right:0;top:56px;
  display:flex;align-items:center;justify-content:center;gap:20px;
  font-size:24px;letter-spacing:.34em;text-transform:uppercase;color:var(--lav);font-weight:400;
}
.eyebrow::before,.eyebrow::after{content:"";width:48px;height:1px;background:var(--line)}

.total{
  position:absolute;left:0;right:0;top:104px;
  display:flex;align-items:baseline;justify-content:center;gap:20px;
  line-height:.86;
}
.total__num{
  font-family:var(--serif);font-weight:600;font-size:232px;letter-spacing:.005em;color:var(--ink);
  transition:transform .5s var(--ease),text-shadow .5s var(--ease);
}
.total__cur{font-family:var(--serif);font-weight:500;font-size:104px;color:var(--plum)}
.total.is-breathing .total__num{transform:scale(1.018);text-shadow:0 0 42px rgba(195,169,136,.55)}

.target{
  position:absolute;left:0;right:0;top:330px;
  font-family:var(--serif);font-style:italic;font-weight:500;font-size:52px;
  letter-spacing:.01em;color:var(--ink-soft);
}

.bar{position:absolute;left:264px;top:404px;width:1200px;height:3px;
     background:var(--line-soft);border-radius:999px}
.bar__fill{
  position:absolute;left:0;top:0;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--plum),var(--lav) 70%,var(--gold));
  transition:width .9s var(--ease);
}
.bar__dot{
  position:absolute;top:50%;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--gold);transform:translate(-50%,-50%);
  box-shadow:0 0 18px 4px rgba(195,169,136,.6);
  transition:left .9s var(--ease);
}
.bar__pct{
  position:absolute;left:1492px;top:390px;
  font-size:34px;font-weight:500;letter-spacing:.10em;color:var(--plum);
}

/* ================= ZONA B — CARDURI ================= */
.grid{
  position:absolute;left:96px;top:470px;width:1728px;
  display:grid;grid-template-columns:repeat(3,552px);
  column-gap:36px;row-gap:34px;
}
.card{
  position:relative;height:250px;
  background:rgba(255,255,255,.55);          /* alb pur ar „înflori" pe proiector */
  border:1px solid var(--line);border-radius:22px;
  box-shadow:0 20px 48px -22px rgba(60,42,74,.34);
  transition:background .5s var(--ease),border-color .5s var(--ease);
}
.card__ribbon{
  position:absolute;left:50%;top:-1px;width:0;height:2px;border-radius:999px;
  background:var(--gold);transform:translateX(-50%);
  transition:width .5s var(--ease);
}
.card.is-done{
  background:linear-gradient(168deg,#FFFDFB,#F7F0E6);
  border-color:rgba(195,169,136,.55);
}
.card.is-done .card__ribbon{width:96px}

.vessel{position:absolute;left:26px;top:56px;width:126px;height:126px;overflow:visible}

/* Numele obiectivelor sunt cele cerute de client (33–42 caractere), deci cutia
   trebuie să încapă și 3 rânduri. Aliniere la BAZĂ: ultimul rând stă pe aceeași
   linie pe toate cardurile, indiferent câte rânduri are numele. */
.card__name{
  position:absolute;left:162px;top:42px;width:362px;height:104px;
  display:flex;align-items:flex-end;
  font-size:30px;font-weight:500;line-height:1.13;color:var(--ink);letter-spacing:.01em;
  hyphens:none;
}
.card__amt{
  position:absolute;left:162px;top:152px;
  font-size:44px;font-weight:600;color:var(--ink);letter-spacing:.01em;
}
.card__of{
  position:absolute;left:162px;top:192px;
  font-size:26px;font-weight:400;color:var(--ink-soft);letter-spacing:.02em;
  transition:opacity .3s var(--ease);
}
.card__pct{
  position:absolute;right:32px;top:138px;
  font-family:var(--serif);font-weight:600;font-size:56px;color:var(--plum);
  transition:opacity .2s var(--ease);
}
.card__pct i{font-style:normal;font-size:28px}
/* „Împlinit" ia locul PROCENTULUI (care oricum dispare la 100%), în colțul opus
   sumei. Cea mai mare sumă posibilă pe un card este „50.000 €" (~185px), iar
   eticheta începe abia la ~370px — deci cele două nu se pot ciocni niciodată. */
.card__done{
  position:absolute;right:32px;top:156px;opacity:0;line-height:1;
  font-family:var(--serif);font-weight:600;font-style:italic;font-size:30px;color:var(--gold);
  letter-spacing:.01em;transition:opacity .26s var(--ease);white-space:nowrap;
}
.card.is-done .card__pct{opacity:0}
.card.is-done .card__done{opacity:1}
.card.is-done .card__of{opacity:0}

.card__rule{
  position:absolute;left:32px;top:224px;width:488px;height:4px;
  background:var(--line-soft);border-radius:999px;
}
.card__rule i{
  position:absolute;left:0;top:0;height:100%;width:0;border-radius:999px;display:block;
  background:linear-gradient(90deg,var(--plum),var(--lav));
  transition:width .9s var(--ease);
}
.card__rule b{
  position:absolute;top:50%;left:0;width:8px;height:8px;border-radius:50%;
  background:var(--gold);transform:translate(-50%,-50%);
  transition:left .9s var(--ease);
}

/* ---- vasul care se umple ---- */
.vessel__ghost{fill:rgba(154,139,176,.16)}
.vessel__liquid-grp{transform:translateY(calc(var(--fy,130) * 1px));
                    transition:transform .9s var(--ease)}
.vessel__clipmove{transform:translateY(calc(var(--fy,130) * 1px));
                  transition:transform .9s var(--ease)}
.vessel__det{fill:none;stroke:var(--lav);stroke-width:2.6;
             stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.vessel__det--lit{stroke:var(--ivory);opacity:.95}
.vessel__seed{fill:var(--gold);opacity:.9}      /* la 0% vasul nu arată „mort" */
.card.is-done .vessel__det{stroke:var(--gold);opacity:.75}

.vessel__wave{fill:rgba(195,169,136,.55)}
.vessel__wave--a{animation:waveA 7s linear infinite}
.vessel__wave--b{animation:waveB 11s linear infinite;fill:rgba(154,139,176,.4)}
@keyframes waveA{from{transform:translateX(0)}to{transform:translateX(-120px)}}
@keyframes waveB{from{transform:translateX(-120px)}to{transform:translateX(0)}}

.vessel__bloom{
  transform-origin:60px 60px;opacity:0;pointer-events:none;
}
.vessel__bloom.play{animation:bloomOut 1.1s var(--ease) .2s 1}
@keyframes bloomOut{
  0%{opacity:.85;transform:scale(.6)}
  100%{opacity:0;transform:scale(1.35)}
}

/* ================= ZONA C — SUBSOL ================= */
.foot{position:absolute;left:96px;top:1012px;width:1728px;height:44px;
      display:flex;align-items:center;justify-content:space-between}
.foot__brand{font-size:22px;letter-spacing:.18em;text-transform:uppercase;color:var(--lav)}
.foot__tag{font-family:var(--serif);font-style:italic;font-weight:500;font-size:26px;
           color:var(--lav);opacity:.6;text-transform:none;letter-spacing:0}
.foot__status{display:flex;align-items:center;gap:12px;
              font-size:22px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--sage);
     transition:background .6s linear}
/* degradare tăcută: dacă rețeaua cade, punctul se stinge discret.
   Nimic roșu, niciun banner — sala nu trebuie să afle că a fost o problemă. */
.is-stale .dot{background:rgba(60,53,66,.25)}

/* ---- petale (canvas) ---- */
.fx{position:fixed;inset:0;pointer-events:none;z-index:60}

/* ---- cifre cu lățime fixă: fără tremurat în timpul numărării ---- */
.d{display:inline-block;width:.62em;text-align:center}
.s{display:inline-block;width:.28em;text-align:center}

/* ---- regim redus de mișcare: instant ȘI corect, niciodată gol ---- */
@media (prefers-reduced-motion: reduce){
  .vessel__liquid-grp,.vessel__clipmove,.bar__fill,.bar__dot,
  .card__rule i,.card__rule b{transition:none}
  .vessel__wave--a,.vessel__wave--b,#stage::before{animation:none}
}