/* Augustin Watches — foaia globala. Jetoanele vin din brandbook v1.0 (13.10.2026). */

:root{
  --negru:#0B0B0B;
  --aur:#BB9D7B;
  --alb:#F5F3EF;
  --brun:#23201E;
  --fum:#A49C91;      /* text secundar, 7,3:1 pe negru si 6,0:1 pe brun */
  --umbra:#4A5557;    /* DOAR decorativ: linii, pictograme stinse. Niciodata text */
  --linie:#2A2724;
  --aur-stins:#8C755A;

  --f:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ft:"Space Grotesk",ui-monospace,"SF Mono",monospace;

  --latime:1280px;
  --margine:80px;
  --t:240ms cubic-bezier(.22,.61,.36,1);
  --aparitie:500ms cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--negru);color:var(--alb);
  font:300 18px/1.75 var(--f);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.invizibil{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sari{position:absolute;left:-9999px;top:0;background:var(--aur);color:var(--negru);padding:12px 24px;z-index:100}
/* text care exista numai pentru cititoarele de ecran: unde duce o legatura
   care se deschide intr-o fila noua. Ochiul vede sageata, urechea aude unde. */
.sr-doar{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.sari:focus{left:0}

.cuprins{max-width:var(--latime);margin:0 auto;padding:0 var(--margine)}
/* antetul e fix, inalt de 91px: fara asta, o ancora aterizeaza sub el */
html{scroll-padding-top:104px}
@media(max-width:900px){:root{--margine:48px}}
@media(max-width:640px){:root{--margine:24px}}

/* ---------- tipografie ---------- */
.titlu-mare{font-weight:200;font-size:clamp(44px,7vw,96px);letter-spacing:.06em;text-transform:uppercase;line-height:1.04;margin:0}
h2,.titlu{font-weight:300;font-size:clamp(26px,3.4vw,44px);letter-spacing:.04em;text-transform:uppercase;margin:0 0 16px}
h3{font-weight:400;font-size:24px;margin:0 0 12px;letter-spacing:.01em}
.eticheta{font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--aur);margin:0 0 20px;display:block}
.intro{color:var(--fum);max-width:64ch;font-size:19px;margin:0 0 56px}
.tehnic{font-family:var(--ft);font-size:15px;letter-spacing:.02em}
p{max-width:68ch}

/* ---------- antet ---------- */
.antet{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  padding:20px var(--margine);
  transition:background var(--t),border-color var(--t);
  border-bottom:1px solid transparent;
}
/* Blurul nu se pune pe antet, ci pe un strat din spatele lui.
   backdrop-filter face elementul bloc continator pentru orice descendent
   position:fixed. Pus pe antet, meniul mobil, care e fixed cu inset:0,
   nu mai masura ecranul ci antetul: 375x90. Deschis dupa o derulare, se
   vedea ca o banda neagra de 90px, cu legaturile revarsate peste pagina.
   Pe un pseudo-element, acelasi blur nu mai contine nimic. */
.antet.lipit{background:rgba(11,11,11,.92);border-bottom-color:var(--linie)}
.antet.lipit::before{content:"";position:absolute;inset:0;z-index:-1;backdrop-filter:blur(14px)}
.antet .marca img{width:150px}
.meniu{display:flex;gap:34px;align-items:center;list-style:none;margin:0;padding:0}
.meniu a{
  font-weight:400;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;color:var(--alb);padding-bottom:4px;
  border-bottom:1px solid transparent;transition:border-color var(--t),color var(--t);
}
.meniu a:hover,.meniu a[aria-current=page]{border-bottom-color:var(--aur);color:var(--aur)}
.buton-meniu{display:none;background:none;border:0;color:var(--alb);font:500 12px var(--f);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;padding:8px}
@media(max-width:1000px){
  .buton-meniu{display:block}
  .meniu{
    position:fixed;inset:0;background:var(--negru);flex-direction:column;justify-content:center;
    gap:28px;transform:translateY(-100%);transition:transform 420ms cubic-bezier(.22,.61,.36,1);
  }
  .meniu.deschis{transform:none}
  .meniu a{font-size:16px}
  /* Panoul e un frate care se deseneaza DUPA marca si dupa buton, deci le
     acoperea pe amandoua. Degetul cadea pe panou, iar butonul de inchidere,
     desi scria "Inchide", nu mai primea apasarea: meniul deschis nu se mai
     putea inchide decat alegand o legatura sau revenind din browser. */
  .antet .marca,.buton-meniu{position:relative;z-index:2}
}

/* ---------- butoane ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:52px;padding:0 34px;
  font:500 12px/1 var(--f);letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;border:1px solid transparent;transition:var(--t);cursor:pointer;
}
.btn-p{background:var(--aur);color:var(--negru)}
.btn-p:hover{background:var(--alb)}
.btn-s{border-color:var(--aur);color:var(--alb);background:transparent}
.btn-s:hover{background:rgba(187,157,123,.12)}

/* ---------- sectiuni ---------- */
.sectiune{padding:128px 0;border-top:1px solid var(--linie)}
@media(max-width:640px){.sectiune{padding:72px 0}}

.grila{display:grid;gap:24px}
/* Praguri explicite, nu auto-fit: auto-fit alege singur numarul de coloane si
   produce randuri incomplete (opt carduri pe trei coloane = 3/3/2). Numarul de
   coloane scade doar la valori care impart exact continutul. */
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){
  .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .g2,.g3{grid-template-columns:1fr}
}
@media(max-width:640px){
  .g4{grid-template-columns:1fr}
}

/* ---------- cardul de piesa ---------- */
.piesa{
  display:block;text-decoration:none;background:var(--brun);
  border:1px solid var(--linie);transition:border-color var(--t);
}
.piesa:hover{border-color:var(--aur)}
.piesa .cadru{aspect-ratio:1;overflow:hidden;background:var(--negru)}
.piesa .cadru img{width:100%;height:100%;object-fit:cover;transition:transform 700ms cubic-bezier(.22,.61,.36,1)}
@media (hover:hover){.piesa:hover .cadru img{transform:scale(1.04)}}
.piesa .text{padding:24px}
.piesa .nivel{font:500 11px var(--f);letter-spacing:.18em;text-transform:uppercase;color:var(--aur);display:block;margin-bottom:8px}
.piesa .nume{font-weight:400;font-size:20px;letter-spacing:.02em;margin:0 0 8px}
.piesa .spec{font-family:var(--ft);font-size:13px;color:var(--fum)}

/* ---------- firimituri ---------- */
.firimituri{padding:116px 0 0}
.firimituri ol{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0;font-family:var(--ft);font-size:13px;color:var(--fum)}
.firimituri a{text-decoration:none;color:var(--fum)}
.firimituri a:hover{color:var(--aur)}
.firimituri li+li::before{content:"/";margin-right:10px;color:var(--linie)}

/* ---------- subsol ---------- */
.subsol{border-top:1px solid var(--linie);padding:80px 0 56px;color:var(--fum);font-size:16px}
.subsol .marca img{width:180px;margin-bottom:28px}
.subsol h4,.subsol .cap-subsol{font:500 11px var(--f);letter-spacing:.18em;text-transform:uppercase;color:var(--aur);margin:0 0 18px}
.subsol ul{list-style:none;margin:0;padding:0}
.subsol li{margin-bottom:10px}
.subsol a{text-decoration:none;transition:color var(--t)}
.subsol a:hover{color:var(--aur)}
.subsol .jos{margin-top:64px;padding-top:28px;border-top:1px solid var(--linie);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-family:var(--ft);font-size:13px}

/* ---------- aparitie la derulare ---------- */
.apare{opacity:0;transform:translateY(16px)}
.apare.vizibil{opacity:1;transform:none;transition:opacity var(--aparitie),transform var(--aparitie)}
@media(prefers-reduced-motion:reduce){
  .apare,.apare.vizibil{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .piesa .cadru img{transition:none}
}


/* ---------- componente comune mai multor pagini ---------- */
.doua-coloane{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:start}
.caseta{background:var(--brun);border:1px solid var(--linie);padding:40px 32px}
.caseta .numar{font:400 13px var(--ft);color:var(--aur);letter-spacing:.14em;display:block;margin-bottom:28px}
.caseta p{color:var(--fum);margin:0}
.cap-sectiune{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.nivel-card{display:block;text-decoration:none;background:var(--brun);border:1px solid var(--linie);padding:40px 32px;transition:border-color var(--t),transform var(--t)}
.nivel-card:hover{border-color:var(--aur)}
.nivel-card h3{margin:0 0 16px;font-size:21px}
.nivel-card .tehnic{color:var(--fum);margin:0}
.chemare{text-align:center;background:var(--brun)}
.chemare .intro{margin-left:auto;margin-right:auto;margin-bottom:48px}
.chemare p{margin-left:auto;margin-right:auto}
/* Numarul de telefon NU se mareste. Un numar urias e tactica de firma de servicii:
   cere, in loc sa anunte. Ierarhia o face pozitia, nu dimensiunea. */
.contact-mare{font-weight:300;font-size:clamp(20px,2.1vw,24px);line-height:1.4;
  letter-spacing:.05em;margin:0 0 10px;font-variant-numeric:tabular-nums}
.contact-mare a{text-decoration:none;color:var(--aur);transition:color var(--t);
  border-bottom:1px solid var(--fir);padding-bottom:3px}
.contact-mare a:hover{color:var(--alb);border-bottom-color:var(--alb)}

.specificatie{margin:0}
.specificatie dt{font:500 11px var(--f);letter-spacing:.18em;text-transform:uppercase;color:var(--aur);margin-top:28px}
.specificatie dt:first-child{margin-top:0}
.specificatie dd{margin:8px 0 0;color:var(--alb)}



/* ---------- intrebari (si datele structurate FAQ) ---------- */
.intrebari{margin-top:48px;border-top:1px solid var(--linie)}
.intrebare{border-bottom:1px solid var(--linie)}
.intrebare summary{list-style:none;cursor:pointer;padding:26px 48px 26px 0;position:relative;
  font-weight:300;font-size:clamp(19px,2.2vw,24px);letter-spacing:.01em;color:var(--alb);transition:color var(--t)}
.intrebare summary::-webkit-details-marker{display:none}
.intrebare summary:hover{color:var(--aur)}
.intrebare summary::after{content:"";position:absolute;right:8px;top:50%;width:13px;height:1px;
  background:var(--aur);transition:transform var(--t)}
.intrebare summary::before{content:"";position:absolute;right:14px;top:50%;width:1px;height:13px;
  margin-top:-6px;background:var(--aur);transition:opacity var(--t),transform var(--t)}
.intrebare[open] summary::before{opacity:0;transform:rotate(90deg)}
.intrebare .raspuns{padding:0 64px 30px 0}
.intrebare .raspuns p{margin:0;color:var(--fum);font-size:17px;max-width:72ch}
@media(prefers-reduced-motion:reduce){.intrebare summary::after,.intrebare summary::before{transition:none}}

/* ======================================================================
   Stratul de finisaj. Nimic din ce urmeaza nu schimba structura paginii:
   sunt detaliile care despart un site corect de unul scump.
   ====================================================================== */

/* 1. Granulatie. Negrul plat arata digital; o urma de granulatie ii da
      adancime, ca hartia fotografica. Fixa pe ecran, nu se misca la derulare. */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media(prefers-reduced-motion:reduce){body::after{opacity:.02}}

/* 2. Liniile. Un gri neutru taie imaginea; o linie calda, aproape invizibila,
      o imparte. Se pastreaza --linie pentru contururile care trebuie vazute. */
:root{--fir:rgba(187,157,123,.14)}
.sectiune,.subsol,.firimituri,.specificatie-grila,.specificatie-grila div,
.intrebari,.intrebare,.poveste-larga,.lista-clienti,.lista-clienti li,
.subsol .jos,.bara-privata{border-color:var(--fir)}
.sectiune{border-top-color:var(--fir)}

/* 3. Selectia si cursorul. Detalii pe care nimeni nu le cere si toata lumea le vede. */
::selection{background:var(--aur);color:var(--negru)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--negru)}
::-webkit-scrollbar-thumb{background:#2E2A26;border:3px solid var(--negru);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--aur-stins)}
html{scrollbar-color:#2E2A26 var(--negru);scrollbar-width:thin}

/* 4. Focalizarea la tastatura. Aur, nu albastrul browserului. */
:focus-visible{outline:1px solid var(--aur);outline-offset:3px}

/* 5. Cifrele tehnice, tabulare: coloanele de specificatie se aliniaza singure. */
.tehnic,.specificatie-grila dd,.piesa .spec,.subsol .tehnic,.firimituri ol{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* 6. Titlurile mari: spatiere optica. Peste 60px, aceeasi valoare arata rarefiata,
      asa ca se strange pe masura ce corpul creste. */
.titlu-mare{letter-spacing:.045em;word-spacing:.04em}
@media(min-width:1100px){.titlu-mare{letter-spacing:.038em}}

/* 7. Imaginile de produs: vigneta usoara, ca obiectul sa ramana centrul atentiei. */
.piesa .cadru,.galerie .principala{position:relative}
.piesa .cadru::after,.galerie .principala::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 45%,transparent 54%,rgba(0,0,0,.42) 100%)}

/* 8. Butonul principal: aurul nu se aprinde la hover, se linisteste.
      Un buton care straluceste cere; unul care se retrage asteapta. */
.btn-p:hover{background:var(--alb);color:var(--negru)}
.btn-s{backdrop-filter:blur(2px)}

/* 9. Antetul lipit: o linie de aur foarte stinsa in loc de gri. */
.antet.lipit{border-bottom-color:var(--fir)}

/* 10. Cardurile: o margine de lumina sus, ca obiectele sa para ridicate de pe fundal. */
.caseta,.piesa,.nivel-card,.blocat{position:relative}
.caseta::before,.nivel-card::before,.blocat::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(245,243,239,.09) 42%,transparent)}

/* ---------- subsolul legal ---------- */
.legal-subsol{margin-top:56px;padding-top:26px;border-top:1px solid var(--fir);
  display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.legal-subsol .identificare{margin:0;font-family:var(--ft);font-size:12.5px;color:var(--fum);max-width:none}
.legal-subsol .de-completat{color:var(--aur-stins);border-bottom:1px dashed var(--aur-stins)}
.legal-subsol .anpc{display:block;flex:none;line-height:0;border:1px solid var(--fir);
  padding:7px;background:#fff;transition:border-color var(--t)}
.legal-subsol .anpc:hover{border-color:var(--aur)}
.legal-subsol .anpc img{width:124px;height:124px;display:block}
@media(max-width:700px){.legal-subsol .anpc img{width:104px;height:104px}}
.legaturi-legale{display:flex;gap:22px;flex-wrap:wrap}
.legaturi-legale a{text-decoration:none;transition:color var(--t)}
.legaturi-legale a:hover{color:var(--aur)}
.subsol .jos{align-items:center}
@media(max-width:700px){.subsol .jos{flex-direction:column;align-items:flex-start;gap:16px}}

/* ---------- text pe doua coloane, echilibrate de browser ----------
   Un singur flux, nu doua blocuri scrise separat: asa coloanele ies egale
   indiferent cat de lungi sunt paragrafele. */
.text-echilibrat{columns:2;column-gap:64px;column-fill:balance}
.text-echilibrat p{margin:0 0 20px;max-width:none}
.text-echilibrat p:last-child{margin-bottom:0}
@media(max-width:860px){.text-echilibrat{columns:1}}

/* ---------- bara de informare despre cookies ---------- */
.bara-cookies{position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:rgba(11,11,11,.96);backdrop-filter:blur(16px);
  border-top:1px solid var(--fir);
  transform:translateY(100%);transition:transform 420ms cubic-bezier(.22,.61,.36,1)}
.bara-cookies.vizibila{transform:none}
.bara-cookies .continut{display:flex;align-items:center;justify-content:space-between;
  gap:40px;padding:22px var(--margine);flex-wrap:wrap}
.bara-cookies p{margin:0;color:var(--fum);font-size:15px;line-height:1.7;max-width:84ch}
.actiuni-cookies{display:flex;align-items:center;gap:26px;flex-shrink:0}
.actiuni-cookies .afla{font:500 11px var(--f);letter-spacing:.18em;text-transform:uppercase;
  color:var(--alb);text-decoration:none;padding-bottom:3px;border-bottom:1px solid var(--fir);
  transition:border-color var(--t),color var(--t);white-space:nowrap}
.actiuni-cookies .afla:hover{border-bottom-color:var(--aur);color:var(--aur)}
.actiuni-cookies .btn{height:44px;padding:0 28px}
@media(max-width:760px){
  .bara-cookies .continut{gap:20px}
  .bara-cookies p{font-size:14px}
  .actiuni-cookies{width:100%;justify-content:space-between;gap:16px}
}
@media(prefers-reduced-motion:reduce){.bara-cookies{transition:none}}

/* comutatorul de limbă, în meniu */
.meniu .limba{font-variant-numeric:tabular-nums;opacity:.72;letter-spacing:.2em}
.meniu .limba:hover{opacity:1}
@media(min-width:1001px){.meniu .limba{margin-left:8px;padding-left:28px;border-left:1px solid var(--fir);border-bottom:0}}


/* ---------- ecrane care se ating ----------
   Degetul acopera un patrat de circa 44 de pixeli si, spre deosebire de cursor,
   nu vede ce atinge: 44 e pragul din ghidul Apple, 48 cel de la Google. Regulile
   se aplica DOAR prin pointer:coarse, ca desenul de pe desktop sa ramana exact
   cum a fost aprobat. Legaturile dinauntrul unui paragraf fac exceptie, ca si in
   WCAG 2.5.8: marite, ar rupe randul in care stau. */
@media (pointer:coarse){
  a,button,summary,input{-webkit-tap-highlight-color:rgba(187,157,123,.2)}

  .buton-meniu{min-height:46px;min-width:46px;padding:12px}
  .meniu a{min-height:50px;display:inline-flex;align-items:center;justify-content:center}
  .meniu .limba{min-width:50px}

  /* Legaturile cresc la 44px, dar ultima firimitura nu e legatura: fara
     alinierea pe mijloc, textul ei ramanea lipit de marginea de sus a
     randului, cu un pas mai sus decat celelalte. */
  .firimituri ol{align-items:center}
  .firimituri a{display:inline-flex;align-items:center;min-height:44px}

  .contact-mare a{display:inline-flex;align-items:center;min-height:46px}

  .subsol li{margin-bottom:0}
  .subsol li a{display:inline-flex;align-items:center;min-height:46px}
  .subsol .tehnic li{min-height:46px;display:flex;align-items:center}
  .subsol .jos a{display:inline-flex;align-items:center;min-height:46px}
  .legaturi-legale{gap:28px}
  .legaturi-legale a{display:inline-flex;align-items:center;min-height:46px}

  .actiuni-cookies .afla{display:inline-flex;align-items:center;min-height:46px;padding-bottom:0}
  .atribuire a{display:inline-block;padding:11px 0}

  .miniaturi button{min-width:46px;min-height:46px}

  /* Telefonul si adresa din casetele de contact sunt actiunea principala a
     paginii pe un telefon: se apasa, nu se citesc. */
  .date-contact dd a{display:inline-flex;align-items:center;min-height:46px}

  /* Legaturile dinauntrul unui paragraf nu se pot inalta fara sa rupa randul.
     Umplutura pe verticala a unui element inline mareste insa suprafata de
     atins fara sa miste textul din jur. */
  .legal p a,.surse a,.coordonate a{padding-top:11px;padding-bottom:11px}
}

/* ---------- ecrane cu decupaj ----------
   Pe un telefon tinut culcat, marginea ecranului trece pe sub camera si pe sub
   bara de jos. max() pastreaza marginea noastra acolo unde e mai mare. */
@supports (padding:max(0px)){
  .antet{
    padding-left:max(var(--margine),env(safe-area-inset-left));
    padding-right:max(var(--margine),env(safe-area-inset-right));
  }
  .cuprins{
    padding-left:max(var(--margine),env(safe-area-inset-left));
    padding-right:max(var(--margine),env(safe-area-inset-right));
  }
  .bara-cookies .continut{padding-bottom:max(22px,env(safe-area-inset-bottom))}
}

/* ---------- subsolul pe telefon ----------
   Patru blocuri unul sub altul, cu legaturi de 46px fiecare, faceau un subsol
   de o mie cinci sute de pixeli: aproape doua ecrane de subsol sub fiecare
   pagina. Cele doua coloane de legaturi scurte stau alaturi; marca si datele
   de contact, care au randuri lungi, raman pe toata latimea. */
@media(max-width:640px){
  .subsol{padding:56px 0 40px}
  .subsol .grila.g4{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}
  .subsol .grila.g4 > :first-child,
  .subsol .grila.g4 > :last-child{grid-column:1 / -1}
  .subsol .marca img{width:150px;margin-bottom:20px}
  .subsol .jos{margin-top:44px;padding-top:22px}
  .legaturi-legale{gap:18px}
}

/* ---------- bara de cookies pe telefon ----------
   Doua fraze si doua butoane ocupau un sfert din ecran. Pe telefon ramane
   fraza care spune lucrul esential; a doua, despre ce se pastreaza in browser,
   se citeste in politica, la o atingere distanta. */
@media(max-width:640px){
  .bara-cookies .continut{padding:16px var(--margine) 18px;gap:14px}
  .bara-cookies p{font-size:13px;line-height:1.6}
  .bara-cookies .amanunt{display:none}
  .actiuni-cookies{gap:12px}
  .actiuni-cookies .btn{height:46px;padding:0 22px;font-size:11px}
}

/* ---------- trecerea intre pagini (F3, 18.10) ----------
   Fara ecran intre pagini: browserul topeste pagina veche in cea noua (View Transitions
   intre documente, nativ; unde nu exista, navigarea ramane cea obisnuita). Fotografia
   ceasului trece din card in locul ei din fisa si inapoi: numele «piesa-foto» il pune
   scriptul din capul paginii, doar pe cardul apasat (Baza.astro). Aceeasi regula de
   500 ms ca aparitiile; la miscare redusa nu se misca nimic. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:320ms}
::view-transition-group(piesa-foto){animation-duration:500ms;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
::view-transition-old(piesa-foto),::view-transition-new(piesa-foto){height:100%;object-fit:cover}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}

/* ---------- aparitiile ca fraza, masca fotografiilor, firul auriu (F3, 18.10) ----------
   Ce intra deodata in ecran apare pe rand, in ordinea din pagina, la 80 ms (app.js pune
   intarzierea in --int). Fotografiile din carduri si din galerii nu se aprind: se deschid
   de jos in sus, printr-o masca, si se asaza din 1,08 la marimea lor. Linia dintre sectiuni
   se traseaza de la stanga, aurie, apoi se raceste la culoarea firului. La miscare redusa,
   nimic din toate astea (regula de mai sus pentru .apare, iar app.js nu porneste firul). */
.apare.vizibil{transition-delay:var(--int,0ms)}
.apare .cadru,.apare.foto button{clip-path:inset(100% 0 0 0)}
.apare.vizibil .cadru,.apare.vizibil.foto button{clip-path:inset(0);
  transition:clip-path 900ms cubic-bezier(.22,.61,.36,1) calc(var(--int,0ms) + 100ms)}
.apare .cadru img,.apare.foto img{scale:1.08}
.apare.vizibil .cadru img{scale:1;transition:transform 700ms cubic-bezier(.22,.61,.36,1),scale 1400ms cubic-bezier(.22,.61,.36,1) calc(var(--int,0ms) + 100ms)}
.apare.vizibil.foto img{scale:1;transition:transform 500ms cubic-bezier(.22,.61,.36,1),scale 1400ms cubic-bezier(.22,.61,.36,1) calc(var(--int,0ms) + 100ms)}
/* cardul din care s-a venit inapoi (trecerea intre pagini) se arata pe loc, fara aparitie */
.apare.imediat,.apare.imediat *{transition:none!important}

@property --fir-c{syntax:'<color>';inherits:false;initial-value:rgba(187,157,123,.14)}
.sectiune.fir{border-top-color:transparent;
  background:linear-gradient(var(--fir-c),var(--fir-c)) no-repeat 0 0/0 1px;background-origin:border-box}
.sectiune.fir.trasat{animation:fir-trasat 2200ms both}
@keyframes fir-trasat{
  0%{background-size:0 1px;--fir-c:rgba(187,157,123,.8);animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  55%{background-size:100% 1px;--fir-c:rgba(187,157,123,.8);animation-timing-function:ease-out}
  100%{background-size:100% 1px;--fir-c:rgba(187,157,123,.14)}
}

@media(prefers-reduced-motion:reduce){
  .apare .cadru,.apare.foto button{clip-path:none}
  .apare .cadru img,.apare.foto img{scale:1}
}