/* NORMERA PPWR - pagina de intrare.
 *
 * Numai pagina gazda. Widgetul (normera.css) ramane neatins, ca sa poata fi
 * pus si in alta pagina, cu alta infatisare.
 *
 * Fonturile nu se aduc de nicaieri: pagina promite, mai jos, ca nu cere
 * nimic din afara si nu lasa nimic in browser. Un font de la Google ar fi
 * o cerere catre alt server, deci ar face promisiunea neadevarata. Numele
 * marcii stau primele in liste: cine le gazduieste candva langa pagina le
 * ia de acolo, fara sa schimbe nimic aici.
 */
/* Culorile sunt aceleasi cu ale widgetului de dedesubt (`normera.css`), sub
   alte nume: pagina si unealta n-au voie sa arate a doua firme. Daca se
   schimba acolo, se schimba si aici.
     cerneala #14261F · linii #D5D8D1 · secundar #5C6167
     verde    #87A54F · deschis #A8C46F · verde-scris #4E6B2A          */
:root {
  --ink: #14261F;
  --paper: #ffffff;
  --rule: #D5D8D1;
  --muted: #5C6167;
  --green: #87A54F;      /* verdele siglei - semnul si butonul */
  --deep: #4E6B2A;       /* acelasi verde, coborat pana unde se poate CITI */
  --pe-verde: #14261F;   /* ce se scrie peste verdele siglei; vezi .buton */
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Public Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  /* Ecranul de pornire e alb, cum se cuvine unei pagini de lege. Cine si-a
     pus sistemul pe intuneric primeste negativul siglei, nu o pagina alba
     in fata. */
  :root {
    --ink: #E8EAE6;
    --paper: #101A16;
    --rule: #2C3A33;
    --muted: #9AA39C;
    --green: #A8C46F;
    --deep: #A8C46F;   /* pe intuneric verdele se citeste si ca litera */
  }
}

* { box-sizing: border-box; }

/* Saritura la chestionar se face lin. Cine a cerut liniste o primeste
   dintr-o data - vezi si blocul de la sfarsitul fisierului. */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* Cat tine cortina, pagina nu se poate misca. Se ridica singura, sau la
   prima atingere - vezi landing.js. */
html.blocat, html.blocat body { overflow: hidden; }

.lat { max-width: 46rem; margin: 0 auto; padding: 0 1.2rem; }

a { color: var(--deep); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* ---------- ecranul de intrare ---------- */

.erou {
  position: relative;              /* reper pentru masurarea siglei */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.2rem 3rem;
  gap: 1.6rem;
}

.sigla-cutie { width: 124px; flex: none; }
.sigla-cutie svg { display: block; width: 100%; height: auto; color: var(--green); }

/* Sigla porneste mare si in mijlocul ecranului, apoi se aseaza deasupra
   textului. Se misca din `transform`, nu din latime: asa nu se re-aseaza
   pagina la fiecare cadru, si nu tresare nimic. Cele doua marimi le
   masoara landing.js. */
html.js .sigla-cutie {
  transform: translateY(var(--ridicare, 0px)) scale(var(--marire, 2.6));
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
html.js.gata .sigla-cutie { transform: none; }

/* `text-wrap: balance` imparte randurile in bucati egale in loc sa umple
   primul rand si sa lase o coada in al doilea. Se aplica la titluri si la
   fraze scurte - adica exact la tot ce e pe ecranul asta. Unde nu e
   cunoscut, textul curge ca inainte: nu se strica nimic. */
.erou h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(29px, 5vw, 45px);
  letter-spacing: -.015em;
  line-height: 1.1;
  margin: 0;
  /* 24ch = doua randuri pentru titlul englezesc, trei pentru cel roman,
     care e mai lung. Sub atat, engleza se rupea in trei. */
  max-width: 24ch;
  text-wrap: balance;
  /* Titlul romanesc isi cere singur ruptura, dupa «ambalajelor,» - sta ca
     `\n` in landing.js. Fara `pre-line` randul acela s-ar strange intr-un
     spatiu obisnuit si n-ar rupe nimic. Engleza n-are niciunul, deci
     curge mai departe cum stia. */
  white-space: pre-line;
}

/* Cele doua titluri nu au aceeasi lungime, deci nu pot avea aceeasi
   masura. «citită pentru firma dumneavoastră.» are 34 de semne si trebuie
   sa incapa pe un rand; la 24ch, cat ii trebuie englezei, s-ar rupe in
   trei. Limba o scrie pe `<html>` chiar functia care schimba textele. */
html[lang="ro"] .erou h1 { max-width: 36ch; }

/* Singura fraza a paginii. Are voie sa fie mai lata decat titlul, dar nu
   mai lata decat se citeste dintr-o privire. Randul mai stramt decat era
   (52ch) si echilibrat: sub un titlu mare, doua randuri egale stau mai
   bine decat unul plin si o coada. */
.erou p.subtitlu { margin: 0; max-width: 52ch; font-size: 1.04rem;
  line-height: 1.55; color: var(--muted); text-wrap: balance; }

/* Invitatia: singurul lucru din pagina care cere o apasare. */
.invitatie { display: flex; flex-direction: column; align-items: center; gap: .6rem; }

/* Butonul poarta verdele siglei. Peste el se scrie cu verdele-cerneala al
   marcii, nu cu alb: albul pe #87A54F iese la 2,4:1 si nu se poate citi in
   soare, iar cerneala iese la 5,7:1. Culoarea scrisului nu se schimba la
   intuneric - acolo verdele se deschide si mai mult, deci raportul creste. */
.buton {
  display: inline-block;
  font: inherit;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  color: var(--pe-verde);
  background: var(--green);
  border: 0;
  border-radius: 3px;
  padding: .8rem 1.9rem;
  cursor: pointer;
  margin-top: .3rem;
}
.buton:hover { filter: brightness(1.09); }

/* Semnatura de sub buton. Nu e text marunt cu majuscule, cum era eticheta
   dinainte: e cine raspunde de ce scrie in pagina, deci trebuie sa se
   citeasca dintr-o data. Sta putin mai jos, ca sa nu para o urmare a
   butonului. */
.semnatura { margin: .55rem 0 0; font-size: .86rem; line-height: 1.45;
  color: var(--muted); text-wrap: balance; }

/* Cele doua limbi. Stau sus, in coltul paginii, si se arata odata cu textul. */
.limbi { position: absolute; top: 1.1rem; right: 1.2rem; display: flex;
  border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.limbi button { font: inherit; font-size: .8rem; font-weight: 500; letter-spacing: .04em;
  background: transparent; color: var(--muted); border: 0; padding: .34rem .7rem;
  cursor: pointer; }
.limbi button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* Scurtatura pentru cine nu vrea sa astepte. Apare abia dupa o secunda:
   inainte n-ar avea ce sari. */
.sari { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%);
  font: inherit; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); background: transparent;
  border: 0; padding: .5rem .8rem; cursor: pointer; opacity: 0;
  transition: opacity .4s ease; pointer-events: none; }
html.js .sari.vizibil { opacity: 1; pointer-events: auto; }
html.js.gata .sari { opacity: 0 !important; pointer-events: none; visibility: hidden; }
.sari:hover { color: var(--ink); }

/* Ce se descopera dupa ce se aseaza sigla. Fara JavaScript se vede tot,
   de la inceput: textul unei legi nu are voie sa depinda de un script. */
/* Cat sunt nevazute, nu se pot si apasa: altfel primul clic - cel care sare
   peste cortina - ar cadea pe butonul de sub el si ar deschide chestionarul
   fara ca cineva sa fi vrut. */
html.js .revelat { opacity: 0; transform: translateY(14px); pointer-events: none; }
html.js.gata .revelat {
  opacity: 1; transform: none; pointer-events: auto;
  transition: opacity .9s ease-out var(--pas, 0s), transform .9s cubic-bezier(.2,.7,.2,1) var(--pas, 0s);
}

/* ---------- chestionarul ---------- */

.chestionar { padding: 3.5rem 0 1rem; border-top: 1px solid var(--rule); }
#normera-ppwr { padding: 0 1.2rem; }
.chestionar:focus { outline: none; }

/* Ecranul de intrare e un ecran, nu inceputul unei pagini lungi: pana la
   apasarea butonului nu exista nimic dedesubt, nici chestionarul, nici
   subsolul. Cine deruleaza nu da peste ele din intamplare.

   Deschiderea nu trece prin niciun script: butonul e ancora `#chestionar`,
   iar `:target` arata sectiunea si ce vine dupa ea. Browserul face restul,
   inclusiv saritura. Merge deci si daca JavaScript-ul lipseste, si daca a
   ramas o versiune veche a lui in cache - iar «inapoi» inchide la loc. */
html.js .chestionar, html.js .subsol { display: none; }
html.js .chestionar:target,
html.js .chestionar:target ~ .subsol { display: block; }

/* Titlul si subtitlul widgetului raman: aici incepe unealta, si e bine sa
   se vada de unde. Ce se ia de aici e doar ancorarea in pagina. */

/* ---------- subsolul ---------- */

.subsol { max-width: 46rem; margin: 3rem auto 0; padding: 1.4rem 1.2rem 3.5rem;
  border-top: 1px solid var(--rule); color: var(--muted); font-size: .85rem; }
.subsol h2 { font-size: .95rem; color: var(--ink); margin: 0 0 .4rem; font-weight: 500; }
.subsol p { margin: .4rem 0; }
.subsol .semn { margin-top: 1.2rem; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; }

/* ---------- sigla in miscare ----------
 *
 * Aceeasi coregrafie ca in `normera-sigla-animata.html`, cu doua schimbari:
 * copacul creste mai repede decat acolo - se asteapta o pagina, nu se
 * priveste o sigla -, iar rotatia si literele se lungesc inapoi, fiindca
 * ele sunt sfarsitul si sfarsitul are nevoie de aer.
 *
 * Timpii, in ordine: copacul .25-1,55s · linia se traseaza 1,61-2,35s ·
 * se roteste 2,42-4,02s · NORMERA 3,55-4,29s · apoi textul paginii.
 * Intarzierile literelor sunt scrise in SVG si le pune `tools/fa_sigla.py`;
 * daca se schimba aici, se schimba si acolo.
 *
 * Starea desenata implicit e cea de la sfarsit. Miscarea o adauga clasa
 * `js`: daca scriptul nu porneste, sigla e intreaga, nu goala.
 */
.mark .ring { stroke-dasharray: 1; transform-box: view-box; transform-origin: 500px 515.5px; }
.mark .wipe { transform-box: fill-box; transform-origin: bottom; transform: scaleY(1); }
.mark .bloom { transform-box: view-box; transform-origin: 500px 500px; transform: scale(430); }
.mark .nm { opacity: 1; }
.mark text { fill: currentColor; }

html.js .mark.play .wipe  { animation: wipe 0.68s cubic-bezier(.4,0,.25,1) .25s both; }
html.js .mark.play .bloom { animation: bloom 0.93s cubic-bezier(.25,.6,.3,1) .62s both; }
html.js .mark.play .nm    { animation: fadein 0.55s ease-out both; }
html.js .mark.play .ring  { animation: draw 0.74s cubic-bezier(.3,0,.2,1) 1.61s both,
                                       turns 1.60s cubic-bezier(.4,0,.15,1) 2.42s both; }

@keyframes draw   { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } }
@keyframes wipe   { from { transform: scaleY(0) } to { transform: scaleY(1) } }
@keyframes bloom  { from { transform: scale(0) }  to { transform: scale(430) } }
@keyframes fadein { from { opacity: 0 }           to { opacity: 1 } }
@keyframes turns  { from { transform: rotate(0) } to { transform: rotate(360deg) } }

/* Cine a cerut sistemului sa nu miste nimic primeste pagina asezata, dintr-o
   data: sigla intreaga, textul la locul lui, nicio asteptare. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .mark.play * { animation: none !important; }
  html.js .sigla-cutie { transform: none !important; transition: none !important; }
  html.js .revelat { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.js .sari { display: none; }
}

@media (max-width: 560px) {
  .erou { gap: 1.3rem; padding-top: 3.2rem; }
  .sigla-cutie { width: 104px; }
}

@media print {
  .erou { min-height: 0; padding: 1rem 0 2rem; }
  .limbi, .sari, .buton { display: none !important; }
  html.js .revelat { opacity: 1 !important; transform: none !important; }
}