/* =========================================================================
   Consilierul care arată cu degetul.

   Apare doar când omul a apăsat „Continuă" și un câmp obligatoriu e gol.
   Nu ține loc de mesajul de sub câmp — acela rămâne acolo, scris, și e cel
   citit de cititoarele de ecran. Ăsta de aici e doar ochiul care se duce
   într-acolo.

   Trei reguli de care atârnă tot:

     1. Stratul e „fixed" și n-are nimic în fluxul paginii. Nu poate muta un
        pixel din formular, oricât s-ar plimba.
     2. Tot ce se mișcă se mișcă din „transform" și „opacity" — singurele două
        care nu cer pagina refăcută la fiecare cadru.
     3. „pointer-events: none" peste tot. Un desen care fură o apăsare de
        deget pe telefon e mai rău decât niciun desen.
   ========================================================================= */

.mascota-strat{
  position:fixed; inset:0;
  z-index:120;                /* peste formular, sub bara lipită de sus */
  pointer-events:none;
  overflow:hidden;            /* nimic nu iese din ecran, deci nicio bară de derulare */
  contain:layout style;
}

.mascota-unit{
  position:absolute; top:0; left:0;
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  width:max-content; max-width:250px;
  will-change:transform, opacity;
  opacity:0;
}

/* când stă în dreapta câmpului, se uită și arată spre stânga */
.mascota-unit[data-parte="dreapta"]{ align-items:flex-start }
.mascota-unit[data-parte="dreapta"] .mascota-om{ transform:scaleX(-1) }

/* Pe telefon stă sub câmp, mai mic, cu vorba alături.

   „row-reverse", nu „row": în pagină vorba e scrisă înaintea omului, iar pe
   rând normal ar ieși vorba în stânga și omul în dreapta — adică exact pe dos
   față de coada bulei, care arată spre stânga. Întors, omul stă lângă câmp și
   coada nimerește în el. */
.mascota-unit[data-parte="jos"],
.mascota-unit[data-parte="sus"]{
  flex-direction:row-reverse; align-items:flex-end; gap:8px; max-width:none;
}

/* --------------------------------------------------------------- omul */
/* Înălțimea o dă raportul din viewBox — scrisă de mână, ar tăia degetul. */
.mascota-om{
  width:112px; height:auto; display:block;
  filter:drop-shadow(0 8px 18px rgba(10,22,40,.16));
}
.mascota-unit[data-parte="jos"] .mascota-om,
.mascota-unit[data-parte="sus"] .mascota-om{ width:72px }

/* Respirația. Foarte mică — dacă se vede că respiră, e prea mult. */
.mascota-corp{ transform-origin:52px 150px; animation:mascotaRespira 3.4s ease-in-out infinite }
@keyframes mascotaRespira{ 0%,100%{ transform:scaleY(1) } 50%{ transform:scaleY(1.013) } }

/* Brațul. Toate gesturile se învârt în jurul umărului, nu al colțului. */
.mascota-brat{ transform-origin:74px 88px }
.mascota-brat[hidden]{ display:none }

/* Umărul poartă înclinarea, brațul poartă gestul. Două straturi, ca să nu-și
   ia unul altuia „transform"-ul din mână. Lateral, brațul stă drept și arată
   orizontal spre câmp; sub câmp, se ridică; deasupra câmpului, coboară. */
.mascota-umar{ transform-origin:74px 88px }
.mascota-unit[data-parte="jos"] .mascota-umar{ transform:rotate(-50deg) }
.mascota-unit[data-parte="sus"] .mascota-umar{ transform:rotate(38deg) }

/* arată: un impuls scurt, o dată */
[data-gest="arata"] .mascota-brat{ animation:mascotaArata .62s cubic-bezier(.34,1.56,.64,1) both }
@keyframes mascotaArata{
  0%   { transform:rotate(16deg) }
  55%  { transform:rotate(-5deg) }
  100% { transform:rotate(0deg) }
}

/* bate ușor: „tot aici sunt" */
[data-gest="bate"] .mascota-brat{ animation:mascotaBate .58s ease-in-out 2 both }
@keyframes mascotaBate{
  0%,100%{ transform:rotate(0deg) }
  25%    { transform:rotate(-8deg) }
  60%    { transform:rotate(4deg) }
}

/* lupa: se apropie și caută */
[data-gest="lupa"] .mascota-brat{ animation:mascotaCauta 1.9s ease-in-out infinite both }
@keyframes mascotaCauta{
  0%,100%{ transform:rotate(0deg) translateX(0) }
  30%    { transform:rotate(-5deg) translateX(3px) }
  65%    { transform:rotate(3deg) translateX(-2px) }
}
[data-gest="lupa"] .mascota-cap{ animation:mascotaApleaca 1.9s ease-in-out infinite both }
@keyframes mascotaApleaca{
  0%,100%{ transform:rotate(0deg) } 40%{ transform:rotate(-4deg) }
}
.mascota-cap{ transform-origin:52px 66px }

/* bravo: degetul mare sare o dată */
[data-gest="bravo"] .mascota-brat{ animation:mascotaBravo .5s cubic-bezier(.34,1.7,.5,1) both }
@keyframes mascotaBravo{
  0%  { transform:rotate(22deg) scale(.9) }
  60% { transform:rotate(-4deg) scale(1.06) }
  100%{ transform:rotate(0deg) scale(1) }
}

/* --------------------------------------------------------------- vorba */
.mascota-vorba{
  position:relative;
  background:var(--paper, #fff);
  color:var(--ink, #0A1628);
  border:1px solid var(--line, #DDE4EE);
  border-radius:14px;
  padding:9px 13px;
  font-family:var(--body, system-ui, sans-serif);
  font-size:.88rem; font-weight:600; line-height:1.35;
  box-shadow:0 2px 6px rgba(10,22,40,.06), 0 12px 28px rgba(10,22,40,.13);
  transform-origin:80% 100%;
  white-space:normal; max-width:230px;
}

/* coada, făcută din două triunghiuri ca să aibă și contur */
.mascota-vorba::before,
.mascota-vorba::after{
  content:""; position:absolute; width:0; height:0;
  border:8px solid transparent;
}
.mascota-vorba::before{
  bottom:-16px; right:26px;
  border-top-color:var(--line, #DDE4EE);
}
.mascota-vorba::after{
  bottom:-14.5px; right:26px;
  border-top-color:var(--paper, #fff);
}
.mascota-unit[data-parte="dreapta"] .mascota-vorba{ transform-origin:20% 100% }
.mascota-unit[data-parte="dreapta"] .mascota-vorba::before,
.mascota-unit[data-parte="dreapta"] .mascota-vorba::after{ right:auto; left:26px }

/* pe telefon coada arată în stânga, spre om */
.mascota-unit[data-parte="jos"] .mascota-vorba,
.mascota-unit[data-parte="sus"] .mascota-vorba{
  transform-origin:0% 70%; max-width:200px; margin-bottom:14px;
}
.mascota-unit[data-parte="jos"] .mascota-vorba::before,
.mascota-unit[data-parte="sus"] .mascota-vorba::before{
  bottom:auto; top:50%; left:-16px; right:auto; margin-top:-8px;
  border-top-color:transparent; border-right-color:var(--line, #DDE4EE);
}
.mascota-unit[data-parte="jos"] .mascota-vorba::after,
.mascota-unit[data-parte="sus"] .mascota-vorba::after{
  bottom:auto; top:50%; left:-14.5px; right:auto; margin-top:-8px;
  border-top-color:transparent; border-right-color:var(--paper, #fff);
}

/* vorba de laudă e verde, ca restul lucrurilor bune de pe site */
.mascota-vorba.bine{
  border-color:var(--go, #0E7C4E);
  color:var(--go, #0E7C4E);
  background:var(--go-soft, #E4F3EC);
}
.mascota-vorba.bine::after{ border-top-color:var(--go-soft, #E4F3EC) }
.mascota-vorba.bine::before{ border-top-color:var(--go, #0E7C4E) }
.mascota-unit[data-parte="jos"] .mascota-vorba.bine::after,
.mascota-unit[data-parte="sus"] .mascota-vorba.bine::after{
  border-top-color:transparent; border-right-color:var(--go-soft, #E4F3EC);
}
.mascota-unit[data-parte="jos"] .mascota-vorba.bine::before,
.mascota-unit[data-parte="sus"] .mascota-vorba.bine::before{
  border-top-color:transparent; border-right-color:var(--go, #0E7C4E);
}

/* ------------------------------------------------------------ intrarea

   Unitatea în sine NU are voie să atingă „transform": acolo scrie JS-ul, la
   fiecare cadru, ca s-o țină lipită de câmp. O animație care ar pune și ea
   mâna pe transform o smulge din poziție și o duce în colțul de sus.
   Am pățit-o. Deci aici doar opacitate, iar mișcarea o fac copiii. */
.mascota-unit[data-stare="intra"]{ animation:mascotaApare .3s ease-out both }
@keyframes mascotaApare{ from{ opacity:0 } to{ opacity:1 } }
.mascota-unit[data-stare="intra"] .mascota-om{
  animation:mascotaAluneca .46s cubic-bezier(.22,1.18,.36,1) both;
}
.mascota-unit[data-parte="dreapta"][data-stare="intra"] .mascota-om{
  animation-name:mascotaAlunecaD;
}
.mascota-unit[data-parte="jos"][data-stare="intra"] .mascota-om,
.mascota-unit[data-parte="sus"][data-stare="intra"] .mascota-om{
  animation-name:mascotaAlunecaJ;
}
@keyframes mascotaAluneca{
  from{ transform:translateX(-30px) scale(.88) }
  to  { transform:translateX(0) scale(1) }
}
@keyframes mascotaAlunecaD{
  from{ transform:scaleX(-1) translateX(-30px) scale(.88) }
  to  { transform:scaleX(-1) translateX(0) scale(1) }
}
@keyframes mascotaAlunecaJ{
  from{ transform:translateY(16px) scale(.86) }
  to  { transform:translateY(0) scale(1) }
}

.mascota-unit[data-stare="intra"] .mascota-vorba{
  animation:mascotaVorbaIntra .38s cubic-bezier(.34,1.5,.5,1) .12s both;
}
@keyframes mascotaVorbaIntra{
  from{ opacity:0; transform:scale(.82) translateY(6px) }
  to  { opacity:1; transform:scale(1) translateY(0) }
}

.mascota-unit[data-stare="iese"]{ animation:mascotaIese .26s ease-in both }
@keyframes mascotaIese{
  from{ opacity:1 } to{ opacity:0 }
}
.mascota-unit[data-stare="iese"] .mascota-om,
.mascota-unit[data-stare="iese"] .mascota-vorba{
  animation:mascotaSeDuce .26s ease-in both;
}
@keyframes mascotaSeDuce{
  from{ transform:translateY(0) scale(1) }
  to  { transform:translateY(-8px) scale(.94) }
}
.mascota-unit[data-parte="dreapta"][data-stare="iese"] .mascota-om{
  animation-name:mascotaSeDuceD;
}
@keyframes mascotaSeDuceD{
  from{ transform:scaleX(-1) translateY(0) scale(1) }
  to  { transform:scaleX(-1) translateY(-8px) scale(.94) }
}

/* --------------------------------------------------- scuturatul câmpului
   Trei pixeli, o dată. Câmpurile stau într-o grilă cu spațiu în lături, deci
   nu poate împinge nimic pe orizontală. */
.field.mascota-clatina{ animation:mascotaClatina .4s cubic-bezier(.36,.07,.19,.97) both }
@keyframes mascotaClatina{
  0%,100%{ transform:translate3d(0,0,0) }
  15%    { transform:translate3d(-4px,0,0) }
  32%    { transform:translate3d(3.5px,0,0) }
  50%    { transform:translate3d(-2.5px,0,0) }
  68%    { transform:translate3d(1.5px,0,0) }
  85%    { transform:translate3d(-.75px,0,0) }
}

/* Conturul roșu îl pune deja base.css la „.field.invalid". Aici doar îl facem
   să se aprindă puțin, o singură dată, ca ochiul să-l prindă. */
.field.mascota-tinta input,
.field.mascota-tinta select{
  animation:mascotaAprinde 1.5s ease-out both;
}
@keyframes mascotaAprinde{
  0%  { box-shadow:0 0 0 0 rgba(196,43,28,.34) }
  60% { box-shadow:0 0 0 6px rgba(196,43,28,0) }
  100%{ box-shadow:0 0 0 0 rgba(196,43,28,0) }
}

/* ------------------------------------------------- cine nu vrea mișcare
   Nu-l scoatem — arătatul cu degetul e informație, nu podoabă. Îi luăm doar
   mișcarea: apare, stă, se duce. */
@media (prefers-reduced-motion: reduce){
  .mascota-corp,
  .mascota-brat,
  .mascota-cap,
  .field.mascota-clatina,
  .field.mascota-tinta input,
  .field.mascota-tinta select{ animation:none !important }

  .mascota-unit[data-stare="intra"],
  .mascota-unit[data-stare="intra"] .mascota-om,
  .mascota-unit[data-stare="intra"] .mascota-vorba{
    animation:mascotaAparePeLoc .2s linear both;
  }
  .mascota-unit[data-stare="iese"],
  .mascota-unit[data-stare="iese"] .mascota-om,
  .mascota-unit[data-stare="iese"] .mascota-vorba{
    animation:mascotaPierePeLoc .2s linear both;
  }
  @keyframes mascotaAparePeLoc{ from{ opacity:0 } to{ opacity:1 } }
  @keyframes mascotaPierePeLoc{ from{ opacity:1 } to{ opacity:0 } }

  /* brațul rămâne ridicat, doar că nu se mai mișcă */
  .mascota-unit[data-parte="dreapta"] .mascota-om{ transform:scaleX(-1) !important }
}

/* Ecrane foarte mici: vorba se strânge, ca să nu iasă nimic pe dinafară. */
@media (max-width:400px){
  .mascota-unit[data-parte="jos"] .mascota-vorba,
  .mascota-unit[data-parte="sus"] .mascota-vorba{ max-width:170px; font-size:.82rem }
  .mascota-unit[data-parte="jos"] .mascota-om,
  .mascota-unit[data-parte="sus"] .mascota-om{ width:62px }
}