/* ============================================================
   motion.css — stratul de mișcare al site-ului.
   Se încarcă DUPĂ style.css, deci poate suprascrie la
   specificitate egală, fără !important.

   Principiu: stările „ascuns" trăiesc exclusiv în `from {}`-urile
   keyframe-urilor sau în clase pe care le pune JS. Fără JS și sub
   prefers-reduced-motion, pagina rămâne complet vizibilă.

   Cuprins
     1 · Reduced motion
     2 · Keyframes comune
     3 · Reveal în cascadă
     4 · Titluri pe linii (pattern 2)
     5 · Eyebrow (pattern 1)
     6 · Hero
     7 · Scântei & ticker (pattern 6)
     8 · Butoane
     9 · Carduri
    10 · Navigație & header
    11 · Proces
    12 · FAQ
    13 · Formular
    14 · Recenzii (rezervat)
    15 · Secțiunea inversată
   ============================================================ */

/* ------------------------------------------------------------
   1 · REDUCED MOTION
   style.css taie deja durata animațiilor și a tranzițiilor.
   Aici tăiem și întârzierile: fără asta, un `animation-delay:
   700ms both` ar ține elementul la `opacity: 0` timp de 700ms
   chiar și pentru cineva care a cerut „fără mișcare".
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-delay: 0ms !important;
    transition-delay: 0ms !important;
  }
}

/* ------------------------------------------------------------
   2 · KEYFRAMES COMUNE
   ------------------------------------------------------------ */
@keyframes m-fade-up   { from { opacity: 0; transform: translateY(18px); } }
@keyframes m-fade-in   { from { opacity: 0; } }
@keyframes m-pop       { from { opacity: 0; transform: scale(0.6); } }
@keyframes m-slide-x   { from { opacity: 0; transform: translateX(var(--from-x, 12px)); } }
@keyframes m-grow-x    { from { transform: scaleX(0); } }
@keyframes m-sheen     { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@keyframes m-shimmer   { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@keyframes m-wiggle    { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-9deg); } 60% { transform: rotate(7deg); } }
@keyframes m-spin      { to { transform: rotate(360deg); } }

/* linia de titlu urcă din spatele măștii */
@keyframes m-line-up   { from { transform: translateY(105%); } }
/* banda de ticker; conținutul e duplicat în HTML, deci -50% e o buclă perfectă */
@keyframes m-marquee   { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------
   3 · REVEAL ÎN CASCADĂ
   `.reveal-child` și `--i` sunt puse exclusiv de main.js.
   ------------------------------------------------------------ */
.reveal-child {
  opacity: 0;
  transform: translateY(16px);
}
.is-revealed .reveal-child {
  opacity: 1;
  transform: none;
  transition:
    opacity   var(--tr-slow) var(--ease-out-expo) calc(var(--i, 0) * var(--stagger)),
    transform var(--tr-slow) var(--ease-out-expo) calc(var(--i, 0) * var(--stagger));
}

/* dacă secțiunea are copii în cascadă, ea însăși doar se
   estompează — altfel mișcarea se adună și sare prea mult */
.reveal.reveal--children { transform: none; }

/* ------------------------------------------------------------
   4 · TITLURI PE LINII (pattern 2)
   Măștile `.line` există în HTML. Ascunderea trăiește doar în
   `from`-ul lui m-line-up, deci fără JS titlul e întreg.
   ------------------------------------------------------------ */
.is-revealed .line > span {
  animation: m-line-up 780ms var(--ease-out-expo) calc(var(--l, 0) * 90ms) both;
}
/* linia 2, 3, 4 dintr-un titlu — indexul se pune în HTML cu style="--l:1" */

/* ------------------------------------------------------------
   5 · EYEBROW (pattern 1)
   ------------------------------------------------------------ */
.is-revealed .eyebrow::before {
  animation: m-grow-x 520ms var(--ease-out-expo) 80ms both;
}
.is-revealed .eyebrow {
  animation: m-fade-in 520ms ease-out both;
}

/* ------------------------------------------------------------
   6 · HERO — intrare la load, fără JS
   ------------------------------------------------------------ */
.hero__title .line > span {
  animation: m-line-up 900ms var(--ease-out-expo) calc(var(--l, 0) * 100ms + 120ms) both;
}
.hero__copy > .eyebrow { animation: m-fade-in 600ms ease-out 60ms both; }
.hero__copy > .eyebrow::before { animation: m-grow-x 560ms var(--ease-out-expo) 140ms both; }
.hero__lead   { animation: m-fade-up 700ms var(--ease-out-expo) 520ms both; }
.hero__cta    { animation: m-fade-up 700ms var(--ease-out-expo) 620ms both; }
.hero__form-wrap { animation: m-fade-up 800ms var(--ease-out-expo) 320ms both; }
.hero .ticker { animation: m-fade-in 700ms ease-out 760ms both; }

/* glow-ul de fundal derivă foarte lent; nu se poate „vedea"
   mișcându-se, doar se simte */
.hero::before {
  background-size: 160% 160%;
  background-repeat: no-repeat;
  animation: hero-drift 32s ease-in-out infinite alternate;
}
@keyframes hero-drift {
  from { background-position: 0% 0%, 100% 20%; }
  to   { background-position: 30% 25%, 70% 45%; }
}

/* ------------------------------------------------------------
   7 · TICKER
   ------------------------------------------------------------ */
.ticker__track {
  animation: m-marquee 34s linear infinite;
}
@media (hover: hover) {
  .ticker:hover .ticker__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  /* fără mișcare, banda rămâne pe loc și lizibilă */
  .ticker__track { animation: none; }
}

/* ------------------------------------------------------------
   8 · BUTOANE
   ------------------------------------------------------------ */
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
}
.btn:active { transform: translateY(1px); }

/* luciu care traversează CTA-ul principal, o singură dată */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.30), transparent);
  transform: translateX(-130%);
  pointer-events: none;
}
@media (hover: hover) {
  .btn--primary:hover::after { animation: m-sheen 720ms var(--ease-out-expo); }
  .btn--wa:hover svg { animation: m-wiggle 520ms ease-in-out; }
}

/* Butonul WhatsApp fix: un inel care se stinge lent, ca ochiul să-l
   găsească fără ca nimic să se miște efectiv pe pagină. Se oprește
   la hover, ca să nu se bată cu tranziția de deschidere. */
@keyframes m-wa-ring {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.42); }
  70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .wa-fab::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    animation: m-wa-ring 2.8s ease-out infinite;
  }
  .wa-fab:is(:hover, :focus-visible)::after { animation: none; }
  .wa-fab:hover svg { animation: m-wiggle 520ms ease-in-out; }
}

/* butonul de trimitere în starea de încărcare (clasa vine din form.js) */
.btn.is-loading { position: relative; color: transparent; pointer-events: none; }
.btn.is-loading::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 1.15em; height: 1.15em;
  margin: -0.575em 0 0 -0.575em;
  /* Butonul de trimitere e roșu plin, deci rotocolul e alb, ca textul. */
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--on-flame);
  border-radius: var(--r-full);
  animation: m-spin 700ms linear infinite;
}

/* ------------------------------------------------------------
   9 · CARDURI
   ------------------------------------------------------------ */
.card--elevated {
  transition:
    box-shadow   var(--tr-base),
    transform    var(--tr-base) var(--ease-out-expo),
    border-color var(--tr-base);
}
@media (hover: hover) {
  .card--elevated:hover { transform: translateY(var(--lift)); border-color: var(--flame-tint); }
}

/* ------------------------------------------------------------
   10 · NAVIGAȚIE & HEADER
   ------------------------------------------------------------ */
.site-nav__link { position: relative; }
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  border-radius: var(--r-full);
  background: var(--flame);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--tr-base) var(--ease-out-expo);
}
.site-nav__link:hover::after,
.site-nav__link:focus-visible::after { transform: scaleX(1); }

.brand__mark { transition: transform var(--tr-base) var(--ease-out-expo); }
.site-header.is-scrolled .brand__mark { transform: scale(0.92); }

/* ------------------------------------------------------------
   11 · PROCES
   ------------------------------------------------------------ */
.is-revealed .step__num {
  animation: m-pop 520ms var(--ease-out-back) calc(var(--i, 0) * var(--stagger) + 120ms) both;
}

/* linia care leagă badge-urile, doar pe desktop.
   Geometrie: badge 44px → linia pornește la 44px + 12px. */
@media (min-width: 900px) {
  .step::after {
    content: "";
    position: absolute;
    top: calc(var(--sp-6) + 21px);
    left: calc(44px + 12px);
    right: calc(-1 * var(--sp-6) + 12px);
    height: 1px;
    background: var(--flame-tint);
    transform-origin: left center;
    /* fără scaleX(0) în starea de bază: fără JS linia trebuie să existe */
  }
  .is-revealed .step::after {
    animation: m-grow-x 520ms var(--ease-out-expo) calc(var(--i, 0) * var(--stagger) + 320ms) both;
  }
  .step:last-child::after { display: none; }
}

/* ------------------------------------------------------------
   12 · FAQ — <details>
   Deschiderea se animează; închiderea rămâne instantă (limitare
   a elementului <details> fără JS suplimentar).
   ------------------------------------------------------------ */
.faq__item[open] .faq__answer { animation: m-fade-up 300ms var(--ease-out-expo); }

/* ------------------------------------------------------------
   13 · FORMULAR
   ------------------------------------------------------------ */
/* pasul care intră; direcția vine din --from-x, setat de form.js */
.lead-step--enter { animation: m-slide-x 280ms var(--ease-out-expo); }

/* sclipire discretă pe porțiunea completată a barei de progres */
.progress__bar { position: relative; overflow: hidden; }
.progress__bar::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: m-shimmer 2.4s ease-in-out infinite;
}

/* ------------------------------------------------------------
   14 · RECENZII — rezervat.
   Cascada stelelor a plecat odată cu secțiunea de recenzii;
   se readuce împreună cu ea. Vezi style.css, secțiunea 17.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   15 · SECȚIUNEA INVERSATĂ
   Tăietura diagonală se „taie" pe scroll: main.js pune
   .is-revealed, iar clip-path-ul se închide.
   ------------------------------------------------------------ */
.section--invert .invert__title .line > span {
  animation-duration: 900ms;
}
@media (hover: hover) {
  .section--invert .btn--ink:hover { transform: translateY(-2px); }
}