/* ============================================================
   motion.css - stratul de miscare pentru /about/ si /blog/
   si pentru toate paginile desenate de tema.

   Trei hotarari care explica de ce arata asa:

   1. Dezvaluirea se face cu clip-path, nu cu opacity. Nu e o preferinta
      de gust. Invelisurile temei se cuprind unele pe altele, iar cand
      doua elemente suprapuse au fiecare opacitate partiala, textul
      dinauntru ajunge la un contrast pe care axe-core il pica pe buna
      dreptate. Un clip nu schimba nicio culoare, deci textul e citibil
      in orice punct al drumului, si dezvaluirea arata mai bine oricum.

   2. Cronologia vine din scroll, nu dintr-un fir de executie. Tot ce se
      misca la derulare foloseste animation-timeline: view(), deci
      browserul o duce pe firul compozitorului. Zero cost pe firul
      principal, si nimic de curatat cand pleci de pe pagina.

   3. Se anima numai transform, clip-path si filter. Niciun width, niciun
      top, niciun margin: nimic care sa ceara o reasezare a paginii.
   ============================================================ */

:root{
  /* Ritmurile cerute in brief, scrise o singura data */
  --ez-in:cubic-bezier(.16,1,.3,1);      /* intrare, expo out */
  --ez-hov:cubic-bezier(.4,0,.2,1);      /* hover, material */
  --ez-out:cubic-bezier(.7,0,.84,0);     /* iesire, expo in */
  --ez-el:cubic-bezier(.68,-.55,.265,1.55); /* elastic, numai micro */
  --d-hov:260ms;                          /* 200-300 */
  --d-in:760ms;                           /* 600-900 */
  --pas:70ms;                             /* stagger 50-100 */
}

/* ---------- opacitatea de start a temei ----------
   Tema are in corpul paginii un bloc de stil cu `.ab-reveal{opacity:0}`
   si o animatie proprie care o urca inapoi la 1. Cum eu inlocuiesc acea
   animatie cu a mea, care nu atinge opacitatea, elementul ar ramane
   invizibil pentru totdeauna. Prins la prima proba, pe /about/: eticheta
   si paragraful din erou disparusera cu totul.

   Se repara cu o valoare statica, nu cu una animata: asa nu exista niciun
   moment in care textul sa aiba contrast partial, si nici macar cu miscare
   redusa nu poate ramane ceva ascuns. */
.matted-tema .reveal,.matted-tema .ab-reveal,
.matted-tema [class*="reveal"]{opacity:1}

/* ---------- bara de progres a citirii ---------- */
body.matted-tema::after{
  content:"";position:fixed;top:0;left:0;right:0;height:2px;z-index:121;
  background:linear-gradient(90deg,var(--gold-d),var(--gold),var(--gold-l));
  transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    body.matted-tema::after{animation:prog linear both;animation-timeline:scroll(root block)}
  }
}

/* ============================================================
   EROUL
   ============================================================ */

/* titlul, cuvant cu cuvant */
.matted-tema h1 .cuv{display:inline-block;will-change:transform,clip-path}
@media (prefers-reduced-motion: no-preference){
  .matted-tema h1 .cuv{
    animation:cuv-in var(--d-in) var(--ez-in) both;
    animation-delay:calc(var(--i,0) * var(--pas));
  }
}
@keyframes cuv-in{
  from{transform:translate3d(0,.44em,0) rotate(1.2deg);clip-path:inset(0 0 108% 0)}
  to{transform:none;clip-path:inset(-18% -6% -22% -2%)}
}

/* eticheta, subtitlul si butonul din erou vin dupa titlu */
@media (prefers-reduced-motion: no-preference){
  .matted-tema .dtm-hero .section-label{animation:ridic var(--d-in) var(--ez-in) .10s both}
  .matted-tema .dtm-hero .sec-subtitle,
  .matted-tema .dtm-hero .content-text,
  .matted-tema .dtm-hero p{animation:ridic var(--d-in) var(--ez-in) .22s both}
  .matted-tema .dtm-hero .btn-primary,
  .matted-tema .dtm-hero .btn-outline{animation:ridic var(--d-in) var(--ez-in) .34s both}
}
@keyframes ridic{
  from{transform:translate3d(0,22px,0);clip-path:inset(0 0 100% 0)}
  to{transform:none;clip-path:inset(-14% -4% -18% -2%)}
}

/* semnul ca pagina merge mai jos: apare o data, apoi respira incet */
.scroll-jos{
  position:absolute;left:50%;bottom:clamp(26px,4vh,48px);translate:-50% 0;
  width:1px;height:clamp(38px,6vh,58px);overflow:hidden;
  background:linear-gradient(to bottom,rgba(201,169,110,0),var(--gold-d));
  pointer-events:none;z-index:2;
}
.scroll-jos::after{
  content:"";position:absolute;left:0;top:0;width:1px;height:42%;
  background:linear-gradient(to bottom,rgba(201,169,110,0),var(--gold-l));
}
@media (prefers-reduced-motion: no-preference){
  .scroll-jos{animation:ridic var(--d-in) var(--ez-in) .5s both}
  .scroll-jos::after{animation:jos 2.6s var(--ez-hov) 1.3s infinite}
}
@keyframes jos{
  0%{transform:translateY(-100%)}
  55%{transform:translateY(240%)}
  100%{transform:translateY(240%)}
}

/* arcul auriu merge mai incet decat textul: adancime, nu zgomot */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .matted-tema .arc,.matted-tema .hero-grid{
      animation:paralax linear both;animation-timeline:view();
      animation-range:cover 0% cover 100%;will-change:transform;
    }
  }
}
@keyframes paralax{from{transform:translate3d(0,-4%,0)}to{transform:translate3d(0,9%,0)}}

/* ============================================================
   SECTIUNILE
   ============================================================ */

/* titlurile de sectiune se dezvaluie de jos, cu linia dupa ele */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .matted-tema main h2,.matted-tema main h3{
      animation:ridic linear both;animation-timeline:view();
      animation-range:entry 4% cover 20%;
    }
  }
}

/* ---------- pasii numerotati: linia se deseneaza pe masura ce cobori ---------- */
.steps-grid,[class$="-faq"]{position:relative}
.steps-grid::before,[class$="-faq"]::before{
  content:"";position:absolute;left:clamp(16px,2.4vw,26px);top:0;bottom:0;width:1px;
  background:linear-gradient(to bottom,var(--gold),rgba(201,169,110,.14));
  transform:scaleY(1);transform-origin:50% 0;
}
[class$="-faq"]::before{left:0}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .steps-grid::before,[class$="-faq"]::before{
      animation:linie-v linear both;animation-timeline:view();
      animation-range:entry 12% cover 62%;
    }
  }
}
@keyframes linie-v{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* cifra pasului intra cu un salt scurt */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    [class$="-step-num"],.step-num{
      animation:cifra-in linear both;animation-timeline:view();
      animation-range:entry 6% cover 26%;
    }
  }
}
@keyframes cifra-in{
  from{transform:translate3d(-8px,0,0) scale(.72);filter:blur(1px)}
  to{transform:none;filter:none}
}

/* ---------- cifrele mari ---------- */
.nr{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  will-change:contents;
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .ab-sci4>div,[class$="-cell"],.loc-card,.rv-card,.pay-rate-row{
      animation:ridic linear both;animation-timeline:view();
      animation-range:entry 5% cover 24%;
    }
    .ab-sci4>div:nth-child(2){animation-range:entry 8% cover 27%}
    .ab-sci4>div:nth-child(3){animation-range:entry 11% cover 30%}
    .ab-sci4>div:nth-child(4){animation-range:entry 14% cover 33%}
  }
}

/* ---------- randurile de tabel intra pe rand ---------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .matted-tema main tbody tr{
      animation:rand linear both;animation-timeline:view();
      animation-range:entry 2% cover 18%;
    }
  }
}
@keyframes rand{
  from{transform:translate3d(-14px,0,0);clip-path:inset(0 100% 0 0)}
  to{transform:none;clip-path:inset(-30% -4% -30% 0)}
}

/* ---------- citatul: intai se trage linia, apoi vine textul ---------- */
.highlight-quote,blockquote{position:relative}
.highlight-quote::before,.matted-tema main blockquote::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--gold);
  transform-origin:50% 0;
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .highlight-quote::before,.matted-tema main blockquote::before{
      animation:linie-v linear both;animation-timeline:view();
      animation-range:entry 6% cover 30%;
    }
  }
}

/* ---------- caseta de chemare: fundal care se misca foarte incet ---------- */
@media (prefers-reduced-motion: no-preference){
  [class$="-cta"]::before,.cta-box::before,.contact-box::before{
    animation:respira 18s var(--ez-hov) infinite alternate;
  }
}
@keyframes respira{
  from{transform:translate3d(-4%,-6%,0) scale(1)}
  to{transform:translate3d(6%,4%,0) scale(1.22)}
}

/* ============================================================
   MICRO-INTERACTIUNI
   ============================================================ */

/* butonul plin se umple de la stanga la dreapta */
.btn-primary,.whatsapp-book-btn{isolation:isolate}
.btn-primary::before,.whatsapp-book-btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--gold-l);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--d-hov) var(--ez-hov);
}
.btn-primary:hover::before,.btn-primary:focus-visible::before,
.whatsapp-book-btn:hover::before{transform:scaleX(1)}

/* butonul de contur se umple si el, dar cu aur, si textul se intoarce */
.btn-outline,[class$="-ghost"]{position:relative;overflow:hidden;isolation:isolate}
.btn-outline::before,[class$="-ghost"]::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--gold);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--d-hov) var(--ez-hov);
}
.btn-outline:hover,[class$="-ghost"]:hover{color:var(--bg);border-color:var(--gold)}
.btn-outline:hover::before,.btn-outline:focus-visible::before,
[class$="-ghost"]:hover::before{transform:scaleX(1)}

/* ---------- cardurile de blog ---------- */
.blog-card{position:relative;isolation:isolate}
.blog-card::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(160deg,rgba(201,169,110,.09),rgba(201,169,110,0) 58%);
  opacity:0;transition:opacity var(--d-hov) var(--ez-hov);
}
.blog-card:hover::after,.blog-card:focus-visible::after{opacity:1}

/* titlul isi deseneaza linia de la stanga */
.blog-card h2,.blog-card h3{position:relative;display:inline-block}
.blog-card h2::after,.blog-card h3::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 420ms var(--ez-in);
}
.blog-card:hover h2::after,.blog-card:hover h3::after,
.blog-card:focus-visible h2::after{transform:scaleX(1)}

/* eticheta aluneca din stanga, iar "citeste" isi scoate sageata */
.blog-card .blog-card-tag,.blog-card .tag{
  transition:transform var(--d-hov) var(--ez-hov),border-color var(--d-hov) var(--ez-hov);
}
.blog-card:hover .blog-card-tag,.blog-card:hover .tag{
  transform:translateX(5px);border-color:var(--gold);
}
.blog-card .read-more{position:relative;transition:transform var(--d-hov) var(--ez-hov)}
.blog-card .read-more::after{
  content:" \\2192";opacity:0;display:inline-block;
  transition:opacity var(--d-hov) var(--ez-hov),transform var(--d-hov) var(--ez-hov);
  transform:translateX(-5px);
}
.blog-card:hover .read-more::after{opacity:1;transform:translateX(2px)}

/* intrarea cardurilor, in trepte */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .blog-grid>*{
      animation:card-in linear both;animation-timeline:view();
      animation-range:entry 2% cover 22%;
    }
    .blog-grid>*:nth-child(4n+2){animation-range:entry 5% cover 25%}
    .blog-grid>*:nth-child(4n+3){animation-range:entry 8% cover 28%}
    .blog-grid>*:nth-child(4n+4){animation-range:entry 11% cover 31%}
  }
}
@keyframes card-in{
  from{transform:translate3d(0,42px,0) scale(.985);clip-path:inset(0 0 100% 0)}
  to{transform:none;clip-path:inset(-2% -2% -2% -2%)}
}

/* galeria: dezvaluire cu clip, nu cu stingere */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .g-item{animation:card-in linear both;animation-timeline:view();animation-range:entry 2% cover 20%}
    .g-item:nth-child(3n+2){animation-range:entry 4% cover 22%}
    .g-item:nth-child(3n+3){animation-range:entry 6% cover 24%}
  }
}
.g-item img{transition:transform 620ms var(--ez-in),filter var(--d-hov) var(--ez-hov)}
.g-item:hover img{transform:scale(1.055);filter:brightness(1.08)}

/* iconitele sociale din subsol se ridica la trecere */
.matted-tema .plate a[href*="instagram"],.matted-tema .plate a[href*="tiktok"],
.matted-tema .plate a[href*="facebook"],.matted-tema .plate a[href*="youtube"],
.matted-tema .plate a[href*="wa.me"]{
  display:inline-block;transition:transform var(--d-hov) var(--ez-el);
}
.matted-tema .plate a[href*="instagram"]:hover,.matted-tema .plate a[href*="tiktok"]:hover,
.matted-tema .plate a[href*="facebook"]:hover,.matted-tema .plate a[href*="youtube"]:hover,
.matted-tema .plate a[href*="wa.me"]:hover{transform:translateY(-3px)}

/* ============================================================
   MISCARE REDUSA: totul se opreste, nimic nu dispare
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .matted-tema *,.matted-tema *::before,.matted-tema *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .matted-tema h1 .cuv,.scroll-jos{clip-path:none;transform:none}
  .steps-grid::before,[class$="-faq"]::before,
  .highlight-quote::before,.matted-tema main blockquote::before{transform:scaleY(1)}
}