/* ============================================================================
   BAZA - partea comuna celor trei variante de stil. Aici stau lucrurile care
   trebuie sa fie CORECTE, nu frumoase: resetul, starile de focus si stratul de
   miscare la scroll. Fiecare varianta isi pune propriile tokenuri si propriul
   look in <style>-ul ei.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   TOKENURILE, o singura sursa pentru paginile noi.
   Paginile vechi (index, /en/, /automatizari/, /generator/) isi mai declara
   propriul :root, cu aceleasi valori — duplicare mostenita, inofensiva pentru ca
   valorile coincid. De curatat cand se atinge urmatoarea data fiecare pagina;
   pana atunci NU adauga o copie noua nicaieri, foloseste-le de aici.
   --------------------------------------------------------------------------- */
:root{
  --bg:#070b09; --s1c:#0b1210; --s2c:#111b16;
  --text:#e9f1eb; --muted:#a3b3aa; --dim:#77877e;
  --accent:#10b981; --accent2:#6ee7b7;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.17);
  --s2:14px; --s3:24px; --s4:42px; --s5:68px; --s6:104px; --s7:150px;
  --usor:cubic-bezier(.22,.85,.26,1);
}

*{margin:0;padding:0;box-sizing:border-box}

/* Fara asta, bara de derulare e gri DESCHIS pe o pagina neagra, in Chrome pe
   Windows. Se vede in fiecare secunda a vizitei si costa 24 de caractere.
   Toate cele 6 sabloane demo o au; adoks.ro nu. */
html{color-scheme:dark;scroll-behavior:smooth;-webkit-text-size-adjust:100%}

img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}

/* Ancorele din pagina aterizeaza SUB header-ul lipit fara asta: header-ul are
   ~70px, deci <h2>-ul secțiunii ajunge acoperit la fiecare click pe o ancora. */
section[id],[id]{scroll-margin-top:88px}

/* Navigarea cu tastatura pe adoks.ro e acum literalmente invizibila: zero
   :focus-visible in tot fisierul. Toate sabloanele demo au. */
:where(a,button,summary,details,[tabindex]):focus-visible{
  outline:2px solid var(--accent2,#6ee7b7);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------------------------------------------------------------------------
   STRATUL DE MISCARE LA SCROLL

   Trei capcane verificate, toate invizibile daca greșești:

   1. Intr-un browser FARA suport pentru animation-timeline, declaratia e
      aruncata la parsare, dar `animation: ... both` RAMANE. Deci animatia se
      joaca pe timeline-ul documentului, o data, INSTANT la incarcare - toate
      elementele paginii deodata, inclusiv cele de la 4000px sub fald. Fara
      eroare in consola, fara raport CSP. De aici regula: NIMIC care ține de
      scroll nu iese din @supports. Firefox stable (sept. 2026) inca n-are
      suport, deci cazul e real, nu teoretic: ~7% din vizitatori.

   2. `animation-timeline` face parte din shorthand-ul `animation` ca valoare
      reset-only: shorthand-ul il reseteaza la `auto`. Deci se declara DUPA
      `animation`, niciodata inainte - altfel animatia se joaca pe timeline-ul
      documentului si IN Chrome.

   3. Anularea la prefers-reduced-motion NU se face cu animation-duration: pe
      un timeline progresiv durata e ignorata, deci resetul "toate duratele la
      0.01ms" trece la revizuire si nu face nimic. Singurele comutatoare care
      opresc sunt `animation-name:none` / `animation-timeline:none`. De aia
      poarta e opt-in (no-preference): nu exista nimic de anulat.
   --------------------------------------------------------------------------- */

/* Se anima `translate`, NU `transform`. Motivul e concret: cardurile au
   :hover{transform:translateY(-3px)}, iar o animatie pe transform cu fill:both
   ar suprascrie hover-ul din cascada - ridicarea la mouse ar inceta sa mai
   functioneze, in tacere. translate si transform se compun. */
@keyframes ap-ridica{from{opacity:0;translate:0 26px}}
@keyframes ap-card{from{opacity:0;translate:0 20px;scale:.985}}

@media (prefers-reduced-motion: no-preference){

  /* Ramura nativa: CSS-ul o face singur, pe compozitor, zero JS. */
  @supports (animation-timeline: view()){
    .ap{
      animation:ap-ridica .7s cubic-bezier(.22,.85,.26,1) both;
      animation-timeline:view();
      /* `cover`, nu `entry`: entry NU se termina niciodata pe un element mai
         inalt decat ecranul, iar o grila de carduri pe telefon e exact asta -
         ar rămâne permanent la jumatate de opacitate. cover se termina mereu. */
      animation-range:cover 7% cover 33%;
    }
    .ap-card{
      animation:ap-card .7s cubic-bezier(.22,.85,.26,1) both;
      animation-timeline:view();
      animation-range:cover 9% cover 34%;
    }
    /* Decalajul pe coloane la scroll NU se face cu animation-delay (nu are
       sens pe un timeline de scroll), ci mutand intervalul. */
    .ap-card:nth-child(3n+2){animation-range:cover 12% cover 37%}
    .ap-card:nth-child(3n+3){animation-range:cover 15% cover 40%}
  }

  /* Ramura de rezerva, pentru cei ~7%: starea initiala sta in CSS, nu in JS.
     Asa dispare cauza pentru care site.js trebuie incarcat sincron - cu starea
     pusa din <style>, elementele nu se pot vedea o clipa inainte sa fie ascunse.
     ATENTIE la doua linii, nu una: daca `transition` sta pe acelasi selector cu
     :not(.in), in momentul cand JS adauga .in elementul iese din regula si
     pierde SIMULTAN valoarea si tranzitia -> salt instant, fara animatie. */
  @supports not (animation-timeline: view()){
    .ap,.ap-card{transition:opacity .7s cubic-bezier(.22,.85,.26,1),translate .7s cubic-bezier(.22,.85,.26,1)}
    .ap:not(.in),.ap-card:not(.in){opacity:0;translate:0 24px}
  }
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}