/* ===========================================================================
   Cartea
   ---------------------------------------------------------------------------
   DE CE ESTE DESENATĂ ÎN SVG, ȘI NU DIN DREPTUNGHIURI CSS

   Prima variantă folosea două elemente dreptunghiulare, rotite ușor pe axa Y.
   Arăta ca două cartonașe puse alături, pentru că o carte adevărată nu are
   nicio linie dreaptă: fiecare pagină este o foaie curbată, marginea de sus
   coboară spre cotor, iar sub ea se vede blocul de foi stivuite.

   Curbele nu se pot descrie cu `border-radius` sau cu `clip-path: polygon()`.
   Se pot însă descrie exact cu trasee Bézier, adică SVG. Așa că silueta cărții
   — coperta, blocul de foi, cele două pagini, umbra din cotor — este un desen
   SVG, iar textul și formularul stau deasupra, în cutii poziționate procentual.

   Pentru că SVG-ul și cutiile de conținut folosesc același sistem de
   coordonate procentuale, rămân aliniate la orice dimensiune a ecranului.

   Sistemul de coordonate al desenului: 1200 × 700, cotorul la x = 600.
   =========================================================================== */

.carte-scena {
  position: relative;
  width: var(--carte-latime);
  /*
   * Raportul cadrului desenului: 1008/588, adică exact conturul cărții.
   *
   * Prima variantă folosea un cadru de 1200×700, în care cartea ocupa doar
   * 82% din lățime — restul era spațiu gol, iar cartea apărea cu o cincime
   * mai mică decât locul pe care îl primea în pagină. Cadrul este acum strâns
   * pe desen, deci cartea umple tot ce i se dă.
   */
  aspect-ratio: 1008 / 588;
  transform-style: preserve-3d;

  /*
   * Cartea devine „container" pentru textul din ea.
   *
   * Fără asta, mărimile de literă s-ar calcula după lățimea ECRANULUI, iar
   * cartea își schimbă lățimea și după înălțimea ecranului — deci pe un ecran
   * lat și scund textul ieșea din pagini. Cu `container-type`, unitatea `cqw`
   * înseamnă „un procent din lățimea cărții", deci textul se scalează exact
   * odată cu ea, oricare ar fi motivul pentru care ea s-a micșorat.
   */
  container-type: inline-size;
  container-name: carte;
}

.carte-desen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 34px 60px rgba(0, 0, 0, 0.62));
}

/* ---------------------------------------------------------------------------
   Coperta de piele
   --------------------------------------------------------------------------- */

.cp-piele      { fill: url(#gPiele); }
.cp-margine    { fill: none; stroke: #1c0e05; stroke-width: 2; opacity: 0.7; }
.cp-filet      { fill: none; stroke: rgba(212, 169, 78, 0.42); stroke-width: 1.6; }
.cp-textura    { fill: url(#gPieleTextura); opacity: 0.5; }

/* ---------------------------------------------------------------------------
   Blocul de foi — miile de pagini stivuite, văzute pe muchie
   --------------------------------------------------------------------------- */

.bf-masa    { fill: url(#gFoiMasa); }
.bf-linie   { fill: none; stroke: rgba(120, 96, 58, 0.30); stroke-width: 0.9; }
.bf-umbra   { fill: url(#gFoiUmbra); }

/* ---------------------------------------------------------------------------
   Paginile
   --------------------------------------------------------------------------- */

.pg-hartie  { fill: url(#gHartieStanga); }
.pg-hartie-dreapta { fill: url(#gHartieDreapta); }

/* Îmbătrânirea hârtiei: pete difuze, ca de vechime. */
.pg-pete    { fill: url(#gPete); opacity: 0.55; mix-blend-mode: multiply; }

/* Umbra din adâncitura cotorului: partea cea mai întunecată a cărții. */
.pg-cotor-umbra { fill: url(#gCotorUmbra); }

/* Lumina care cade pe partea bombată a fiecărei pagini. */
.pg-lumina  { fill: url(#gPaginaLumina); mix-blend-mode: soft-light; }

/* Chenarul ornamental, care urmează curbura paginii. */
.pg-chenar-ext { fill: none; stroke: rgba(138, 100, 32, 0.55); stroke-width: 2.2; }
.pg-chenar-int { fill: none; stroke: rgba(138, 100, 32, 0.30); stroke-width: 1.1; }

/* ---------------------------------------------------------------------------
   Ferecăturile
   --------------------------------------------------------------------------- */

.fr-metal   { fill: url(#gAlama); }
.fr-lumina  { fill: rgba(255, 246, 214, 0.5); }
.fr-umbra   { fill: rgba(70, 46, 12, 0.5); }
.fr-nit     { fill: #6b4a12; stroke: rgba(255, 246, 214, 0.55); stroke-width: 0.9; }
.fr-gravura { fill: none; stroke: rgba(96, 66, 18, 0.5); stroke-width: 1.2; }
.fr-piele   { fill: #38200f; }

/* ---------------------------------------------------------------------------
   Conținutul, așezat peste pagini
   ---------------------------------------------------------------------------
   Procentele sunt calculate din același sistem de coordonate ca desenul:
     pagina stângă  ocupă x 158…600, y 170…620
     pagina dreaptă ocupă x 600…1042, y 170…620
   Cutiile stau puțin mai înăuntru, ca textul să nu atingă chenarul auriu.
   --------------------------------------------------------------------------- */

.continut-pagina {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  text-align: center;
  color: var(--cerneala);
}

/*
 * Procentele vin din coordonatele desenului, prin regula:
 *     x_procent = (x - 96) / 1008        y_procent = (y - 124) / 588
 * Pagina stângă ocupă x 158…600 și y 170…620; cutia stă mai înăuntru cu
 * circa 40 de unități, ca textul să nu atingă chenarul auriu.
 */
.continut-stanga  { left: 10.4%; right: 54.6%; top: 20.5%; bottom: 22%; }
/* Caseta din dreapta este ridicata cu trei procente fata de cea din stanga:
   pagina se curbeaza in jos spre blocul de foi, iar ultimul rand de text
   ajungea peste zona curbata si parea taiat. */
.continut-dreapta { left: 55%;   right: 11%;   top: 11%;   bottom: 20%; }

/* ---------------------------------------------------------------------------
   Ecrane mici
   ---------------------------------------------------------------------------
   Sub 900 px cartea desenată devine prea îngustă ca textul să încapă în ea.
   Ascundem desenul și punem conținutul pe două foi de pergament obișnuite,
   una sub alta. Se pierde iluzia de volum, dar rămâne totul lizibil — iar
   pagina de autentificare trebuie, înainte de orice, să poată fi folosită.
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .carte-scena {
    aspect-ratio: auto;
    width: min(520px, 92vw);
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .carte-desen { display: none; }

  .continut-pagina {
    position: static;
    padding: 1.6rem 1.3rem;
    border-radius: 14px;
    background: linear-gradient(160deg, var(--pergament) 0%, var(--pergament-cald) 46%, var(--pergament-umbra) 100%);
    box-shadow: var(--umbra-volum), inset 0 0 0 1px rgba(138, 100, 32, 0.3);
  }
}


/* ---------------------------------------------------------------------------
   Mărimile textului, raportate la lățimea cărții
   ---------------------------------------------------------------------------
   Valorile în `vw` de mai jos sunt cele de rezervă, pentru browserele fără
   container queries (Firefox sub 110, Safari sub 16). Imediat sub ele,
   aceleași proprietăți sunt rescrise în `cqw` pentru browserele care le
   înțeleg — acolo textul urmărește exact lățimea cărții.
   --------------------------------------------------------------------------- */

.continut-pagina .titlu-caligrafic { font-size: clamp(1.4rem, 0.6rem + 1.7vw, 2.5rem); }
.continut-pagina .tip-lucrare      { font-size: clamp(0.8rem, 0.6rem + 0.5vw, 1.1rem); }
.continut-pagina .date-rand dt,
.continut-pagina .date-rand dd     { font-size: clamp(0.66rem, 0.55rem + 0.34vw, 0.86rem); }
.continut-pagina .camp > label     { font-size: clamp(0.66rem, 0.56rem + 0.3vw, 0.82rem); }
.continut-pagina .camp-cutie input { font-size: clamp(0.7rem, 0.6rem + 0.32vw, 0.88rem); }
.continut-pagina .buton-text       { font-size: clamp(0.78rem, 0.64rem + 0.4vw, 1rem); }
.continut-pagina .acces-privat     { font-size: clamp(0.62rem, 0.54rem + 0.26vw, 0.78rem); }
.continut-pagina .subtitlu-academic{ font-size: clamp(0.54rem, 0.48rem + 0.2vw, 0.68rem); }

/* Rampa in `cqw` se aplica DOAR cartii late (aspect de carte deschisa).
   Cu `min-width: 1px` se potrivea la orice latime: pe un telefon, cartea
   are ~358px si 1.18cqw = 4,2px — etichetele „Utilizator"/„Parola" erau
   ilizibile. Sub 620px raman variantele clamp() de mai sus. */
@container carte (min-width: 620px) {
  .continut-pagina .titlu-caligrafic { font-size: 3.7cqw; }
  .continut-pagina .tip-lucrare      { font-size: 1.62cqw; }
  .continut-pagina .date-rand dt,
  .continut-pagina .date-rand dd     { font-size: 1.24cqw; }
  .continut-pagina .camp > label     { font-size: 1.18cqw; }
  .continut-pagina .camp-cutie input { font-size: 1.3cqw; }
  .continut-pagina .camp-cutie input::placeholder { font-size: 1.28cqw; }
  .continut-pagina .buton-text       { font-size: 1.46cqw; }
  .continut-pagina .acces-privat     { font-size: 1.08cqw; line-height: 1.45; }

  /* Spațierile se scalează și ele, altfel pe o carte mică rămân prea mari. */
  .continut-pagina        { gap: 0.75cqw; }
  .continut-pagina .formular { gap: 0.95cqw; }
  .continut-pagina .date-academice { gap: 0.75cqw; margin-top: 0.6cqw; }
  .continut-pagina .camp-cutie input { padding: 1.05cqw 0.8cqw; }
  .continut-pagina .buton-intra { padding: 1.15cqw 1.4cqw; }
  .continut-pagina .loc-sigla { width: 12.5cqw; }
  .continut-pagina .camp-icoana { width: 1.55cqw; height: 1.55cqw; flex-basis: 1.55cqw; }
  .continut-pagina .acces-privat svg { width: 1.5cqw; height: 1.5cqw; flex-basis: 1.5cqw; }
}

/*
 * Fără `overflow: hidden`: tăia umbra emblemei și vârful literelor înalte
 * atunci când conținutul umplea exact cutia. Cutiile sunt dimensionate cu
 * rezervă, iar textele se scalează cu `cqw`, deci revărsarea reală nu se
 * poate produce — nu are de ce să fie amputată preventiv.
 */
.continut-pagina { overflow: visible; }

/* ---------------------------------------------------------------------------
   Iedera, prinsă de marginile cărții
   --------------------------------------------------------------------------- */

.carte-scena > .iedera {
  position: absolute;
  top: 24%;
  height: 62%;
  width: auto;
  z-index: 5;
}
.carte-scena > .iedera-stanga  { left: 1.5%; }
.carte-scena > .iedera-dreapta { right: 1.5%; }

/* Mesajul de acces privat se așază pe trei rânduri, ca în referință: pe unul
   singur ajungea la marginea paginii și părea tăiat. */
@container carte (min-width: 1px) {
  .continut-pagina .acces-privat { max-width: 29cqw; gap: 0.6cqw; }
  .continut-pagina .acces-privat br { display: initial; }
}


/* ---------------------------------------------------------------------------
   Emblema platformei, pe pagina formularului
   --------------------------------------------------------------------------- */

/*
 * Emblema platformei, singură și centrată.
 *
 * Avea și numele scris alături, dar numele apare deja de două ori pe ecran —
 * în antetul de deasupra cărții și, caligrafiat, pe pagina din stânga. A treia
 * oară nu mai spunea nimic nou și înghesuia emblema într-o jumătate de rând,
 * din care se vedea prost. Singură, are tot spațiul.
 */
.emblema-platforma {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Cadrul emblemei: același disc bleumarin cu inele aurii rotitoare ca la
   sigla universității de pe pagina stângă — cele două stau acum pereche. */
.emblema-cadru {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  width: 6.8em;
  aspect-ratio: 1;
}

/* Absolut, ca dimensiunea intrinsecă a imaginii (128px) să nu forțeze rândul
   grilei mai înalt decât lățimea — discul devenea oval. Imaginea umple
   aproape tot discul, cu o margine subțire cât să nu atingă rama aurie. */
.emblema-platforma-img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

@container carte (min-width: 1px) {
  /* Aceeasi dimensiune ca sigla universitatii, iar centrele celor doua
     discuri stau la aceeasi inaltime: cutia din stanga incepe la 20.5% din
     inaltimea scenei, cea din dreapta la 11% — diferenta (9.5% din inaltime)
     este ~5.5cqw la raportul scenei de 1008:588. */
  .emblema-platforma        { margin-top: 5.5cqw; margin-bottom: 0.9cqw; }
  .emblema-cadru            { width: 12.5cqw; }
}