/* Vianto fx (14 oct 2026) - efectele din raportul Magic UI, refacute in CSS simplu, fara biblioteci.
   Se incarca din includes/footer.php, impreuna cu assets/js/fx.js (care pune clasele de mai jos).
   Doar transform / opacity / filter / culoare: nimic nu muta layoutul. prefers-reduced-motion opreste tot (la final). */

/* 1. Sclipire (Shiny Button): o banda de lumina trece peste buton; fx.js o porneste la cateva secunde, doar cand butonul e in ecran */
.fx-shine{position:relative;overflow:hidden;isolation:isolate}
.fx-shine::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:60%;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.08) 30%,rgba(255,255,255,.42) 50%,rgba(255,255,255,.08) 70%,rgba(255,255,255,0) 100%);
  transform:translateX(-170%) skewX(-12deg);opacity:0;
}
.fx-shine.fx-shine-go::after{animation:fxShine .95s cubic-bezier(.4,0,.2,1) both}
.fx-shine:disabled::after{display:none}
@keyframes fxShine{
  0%{transform:translateX(-170%) skewX(-12deg);opacity:1}
  100%{transform:translateX(260%) skewX(-12deg);opacity:1}
}

/* 2. "Buzz" discret pe Suna / WhatsApp (bara de contact pe telefon, coloana din dreapta pe calculator; fx.js il porneste la aparitie si apoi la ~7 s, de cel mult 3 ori) */
.fx-buzz{animation:fxBuzz .6s cubic-bezier(.36,.07,.19,.97) both}
@keyframes fxBuzz{
  0%,100%{rotate:0deg}
  14%{rotate:-2.2deg}
  30%{rotate:2.2deg}
  46%{rotate:-1.6deg}
  62%{rotate:1deg}
  78%{rotate:-.4deg}
}

/* 2b. Pe calculator, Suna / WhatsApp din coloana din dreapta sunt late (~350 px): aceeasi vibratie, cu unghi mai mic */
.fx-buzz.fx-buzz-w{animation-name:fxBuzzW}
@keyframes fxBuzzW{
  0%,100%{rotate:0deg}
  14%{rotate:-1.1deg}
  30%{rotate:1.1deg}
  46%{rotate:-.8deg}
  62%{rotate:.5deg}
  78%{rotate:-.2deg}
}

/* 3. Aparitie lina la derulare (Blur Fade), peste .reveal-ul existent din style.css (care face doar alunecarea de 22 px).
   Animatia porneste abia cand sectiunea intra in ecran, deci continutul nu sta niciodata ascuns. Blur doar pe ecrane mari. */
.fx-bf-in{animation:fxFade .7s cubic-bezier(.22,1,.36,1) backwards}
@keyframes fxFade{from{opacity:.35}to{opacity:1}}
@keyframes fxBlurFade{from{opacity:.35;filter:blur(4px)}to{opacity:1;filter:none}}
@media (min-width:769px){.fx-bf-in{animation-name:fxBlurFade}}

/* 4. Recenzii pe homepage (Marquee): rand orizontal care defileaza lent; se opreste la hover / atingere si se poate derula cu degetul */
.fx-mq{display:flex !important;flex-wrap:nowrap !important;justify-content:flex-start !important;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:6px 2px 18px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.fx-mq::-webkit-scrollbar{display:none}
.fx-mq > *{flex:0 0 min(360px,82vw) !important;max-width:none !important}

/* 5. Pulsul pietei: arcul colorat care se umple pana la scor (fx.js deseneaza arcul) */
.fx-g-arc{fill:none;stroke-linecap:round}

/* 6. Bara de progres a lecturii (Scroll Progress): articole si capitolele Codului urbanismului, sub meniul fix (68 px) */
.fx-progress{position:fixed;top:68px;left:0;right:0;height:3px;z-index:899;pointer-events:none;
  background:linear-gradient(90deg,#C8179A 0%,#7C3AED 55%,#2563EB 100%);transform-origin:0 50%;transform:scaleX(0)}

/* 7. Descrierea proprietatii (Progressive Blur): textul se estompeaza treptat spre "Mai mult" (doar cand descrierea e scurtata) */
.prop-desc-text.truncated::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3.4em;z-index:0;pointer-events:none;
  -webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 45%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 45%,#000 100%)
}
.prop-desc-text.truncated::after{z-index:1}

/* 8. Formularul /evaluare/ (Border Beam): o linie de lumina se plimba foarte lent pe contur; se stinge cand omul incepe sa completeze */
@property --fx-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.fx-beam{position:relative}
.fx-beam::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--fx-a),transparent 0deg,transparent 268deg,rgba(200,23,154,.9) 312deg,rgba(124,58,237,.9) 336deg,rgba(37,99,235,.85) 352deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:fxBeam 9s linear infinite paused;transition:opacity .6s ease;
}
.fx-beam.fx-run::before{animation-play-state:running}
.fx-beam.fx-beam-off::before{opacity:0;animation-play-state:paused}
@keyframes fxBeam{to{--fx-a:360deg}}

@media (prefers-reduced-motion:reduce){
  .fx-shine::after,.fx-beam::before,.fx-progress{display:none}
  .fx-buzz,.fx-bf-in{animation:none}
}