/* ===========================================================================
   Mișcarea
   ---------------------------------------------------------------------------
   Trei feluri de animație, cu roluri diferite:

     1. INTRAREA   — o singură dată, la încărcare. Cinematică, lentă.
     2. VIAȚA      — continuă, foarte discretă. Pagina nu trebuie să pară
                     înghețată nici când nimeni nu o atinge.
     3. REACȚIILE  — la mouse, focus, click. Scurte și precise.

   Regula pe care am ținut-o: nimic nu sare, nimic nu clipește, nimic nu se
   repetă atât de repede încât să distragă de la citit.
   =========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════
   1. INTRAREA ÎN SCENĂ
   ═══════════════════════════════════════════════════════════════════════ */

/*
 * Ordinea este gândită ca o secvență de film: întâi se face lumină, apoi
 * apare obiectul, apoi detaliile, apoi ceea ce poți folosi.
 * Întârzierile sunt stabilite aici, nu în JavaScript, ca să poată fi
 * schimbate fără să umbli în cod.
 */

.poarta .scena-fundal { animation: apare-lumina 1600ms var(--asezare) both; }
.poarta .strat-halou  { animation: apare-lumina 1800ms var(--asezare) 200ms both; }
.poarta .strat-raze   { animation: apare-raze   2200ms var(--asezare) 400ms both; }
.poarta .strat-frunze { animation: apare-lumina 1800ms var(--asezare) 300ms both; }

/*
 * Rafturile au propria animatie pentru ca `apare-lumina` se termina la
 * `opacity: 1`, iar `both` pastreaza acea valoare dupa rulare. Cu ea, cei
 * `opacity: 0.5` scrisi in `layout.css` erau anulati si silueta de rafturi
 * ramanea la dublul intensitatii gandite. Se vede doar cand scena WebGL nu
 * porneste (panza o acopera altfel), dar atunci se vedea prea tare.
 */
.poarta .strat-rafturi { animation: apare-rafturi 1800ms var(--asezare) 300ms both; }

/* Cartea: coboară, se așază și abia apoi devine complet opacă. */
.poarta .carte { animation: aseaza-cartea 1500ms var(--asezare) 320ms both; }

/* Elementele din pagini apar unul după altul. */
.poarta .pagina-stanga  .pagina-continut > * { animation: urca-usor 700ms var(--usor) both; }
.poarta .pagina-dreapta .pagina-continut > * { animation: urca-usor 700ms var(--usor) both; }

.poarta .pagina-stanga  .pagina-continut > *:nth-child(1) { animation-delay: 900ms; }
.poarta .pagina-stanga  .pagina-continut > *:nth-child(2) { animation-delay: 1000ms; }
.poarta .pagina-stanga  .pagina-continut > *:nth-child(3) { animation-delay: 1080ms; }
.poarta .pagina-stanga  .pagina-continut > *:nth-child(4) { animation-delay: 1160ms; }
.poarta .pagina-stanga  .pagina-continut > *:nth-child(5) { animation-delay: 1240ms; }
.poarta .pagina-stanga  .pagina-continut > *:nth-child(6) { animation-delay: 1320ms; }

.poarta .pagina-dreapta .pagina-continut > *:nth-child(1) { animation-delay: 1100ms; }
.poarta .pagina-dreapta .pagina-continut > *:nth-child(2) { animation-delay: 1180ms; }
.poarta .pagina-dreapta .pagina-continut > *:nth-child(3) { animation-delay: 1280ms; }
.poarta .pagina-dreapta .pagina-continut > *:nth-child(4) { animation-delay: 1400ms; }
.poarta .pagina-dreapta .pagina-continut > *:nth-child(5) { animation-delay: 1480ms; }

/* Pana intră ultima, alunecând de sus. */
.poarta .pana { animation: intra-pana 1400ms var(--asezare) 1500ms both; }

.poarta .subsol { animation: urca-usor 800ms var(--usor) 1800ms both; }

@keyframes apare-lumina {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes apare-rafturi {
  from { opacity: 0; }
  to   { opacity: 0.5; }   /* aceeasi valoare ca in layout.css */
}

@keyframes apare-raze {
  from { opacity: 0; transform: translateX(-3%) scaleY(1.1); }
  to   { opacity: 1; transform: translateX(0) scaleY(1); }
}

/*
 * Cartea nu „cade": pornește puțin mai sus, ușor înclinată pe spate și mai
 * mică, apoi se așază. Curba `--asezare` nu are revenire, deci nu apare
 * senzația de jucărie care sare.
 */
@keyframes aseaza-cartea {
  from {
    opacity: 0;
    transform: translateY(-46px) scale(0.94) rotateX(12deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
  }
}

@keyframes urca-usor {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes intra-pana {
  from { opacity: 0; transform: translateZ(70px) translateY(-60px) rotate(22deg); }
  to   { opacity: 1; transform: translateZ(70px) translateY(0) rotate(6deg); }
}

/* ═══════════════════════════════════════════════════════════════════════
   2. VIAȚA CONTINUĂ
   ═══════════════════════════════════════════════════════════════════════ */

/*
 * „Respirația" cărții.
 *
 * Prima variantă mișca întreaga carte cu trei pixeli, la fiecare șapte
 * secunde. Arăta bine, dar avea un defect pe care l-am descoperit încercând
 * să apăs butonul: formularul nu stătea niciodată locului. Diferența este
 * mică, însă un câmp de text și un buton care plutesc continuu sunt mai greu
 * de folosit — în special pentru cineva cu mâna nesigură — și, la o verificare
 * automată, butonul devine de-a dreptul imposibil de apăsat, pentru că nu
 * ajunge niciodată într-o poziție stabilă.
 *
 * Acum se mișcă doar decorul: coperta de piele și umbra de pe masă. Paginile,
 * și odată cu ele tot ce se poate apăsa, stau nemișcate. Viața paginii vine
 * din particule, din halou și din înclinarea la mișcarea mouse-ului — care se
 * oprește de la sine când mouse-ul se oprește.
 */
.coperta      { animation: respira 7s ease-in-out 2.4s infinite; }
.carte-umbra  { animation: respira-umbra 7s ease-in-out 2.4s infinite; }

@keyframes respira {
  0%, 100% { transform: translateZ(-34px) translateY(0) scale(1); }
  50%      { transform: translateZ(-34px) translateY(-3px) scale(1.004); }
}

/* Umbra face invers: când cartea urcă, umbra se micșorează și se estompează,
   pentru că sursa de lumină rămâne pe loc. */
@keyframes respira-umbra {
  0%, 100% { transform: translateZ(-60px) rotateX(72deg) scaleY(0.55) scaleX(1); opacity: 1; }
  50%      { transform: translateZ(-60px) rotateX(72deg) scaleY(0.55) scaleX(0.97); opacity: 0.82; }
}

/* Haloul cald pulsează foarte lent, ca o lumânare la distanță. */
.strat-halou { animation: pulsatie-lumina 9s ease-in-out infinite alternate; }

@keyframes pulsatie-lumina {
  from { opacity: 0.75; filter: blur(6px); }
  to   { opacity: 1;    filter: blur(9px); }
}

/* Razele se deplasează încet lateral. */
.strat-raze { animation: aluneca-raze 26s linear infinite; }

@keyframes aluneca-raze {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: 260px 0, -200px 0, 180px 0; }
}

/* Pana se leagănă abia perceptibil. */
.pana-desen { animation: legana-pana 6.5s ease-in-out infinite; transform-origin: 70% 8%; }

@keyframes legana-pana {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-2.2deg); }
}

/* Vârful penei licărește. */
.pana-lumina { animation: licareste 3.2s ease-in-out infinite; }

@keyframes licareste {
  0%, 100% { opacity: 0.35; r: 3; }
  50%      { opacity: 1;    r: 5; }
}

/* Titlul caligrafic primește, din când în când, o trecere de lumină — ca și
   cum cerneala ar prinde o rază. */
/*
 * Trecerea de lumină peste titlu.
 *
 * `background-clip: text` cere ca umplerea literei să fie transparentă, ca să
 * se vadă gradientul prin ea. Problema: `text-shadow` se desenează sub
 * literă, iar prin umplerea transparentă se vedea umbra — literele ieșeau
 * gri-argintii în loc de cerneală maro. Umbra este deci scoasă exact aici,
 * unde punem gradientul, și nimic nu se schimbă în restul cascadei.
 */
.titlu-caligrafic {
  position: relative;
  background-image: linear-gradient(100deg,
    var(--cerneala) 0%, var(--cerneala) 42%,
    var(--aur-adanc) 50%,
    var(--cerneala) 58%, var(--cerneala) 100%);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  animation: trecere-lumina 11s ease-in-out 3s infinite;
}

/* Browserele fără `background-clip: text` primesc pur și simplu cerneală
   plină. Fără această regulă, textul ar fi invizibil acolo. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .titlu-caligrafic {
    background: none;
    -webkit-text-fill-color: var(--cerneala);
    color: var(--cerneala);
  }
}

@keyframes trecere-lumina {
  0%, 62%, 100% { background-position: 100% 0; }
  82%           { background-position: 0 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   3. REACȚII
   ═══════════════════════════════════════════════════════════════════════ */

/* Butonul: o dâră de lumină trece peste el la trecerea cu mouse-ul. */
.buton-stralucire {
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(240, 214, 152, 0.30), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.buton-intra:hover:not(:disabled) .buton-stralucire { animation: trece-stralucirea 900ms var(--moale); }

@keyframes trece-stralucirea {
  from { left: -60%; }
  to   { left: 120%; }
}

@keyframes rotire { to { transform: rotate(360deg); } }

/* Formularul tremură scurt când datele sunt greșite. Trei mișcări mici,
   într-o treime de secundă: suficient cât să fie observat, prea puțin cât să
   deranjeze. */
.formular.gresit { animation: tremur 340ms var(--moale); }

@keyframes tremur {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-7px); }
  45%      { transform: translateX(6px); }
  70%      { transform: translateX(-3px); }
}

/* ═══════════════════════════════════════════════════════════════════════
   4. IEȘIREA DIN SCENĂ ȘI TRANZIȚIA
   ═══════════════════════════════════════════════════════════════════════ */

/* După autentificarea reușită, cartea se retrage în adâncime. */
.carte.se-retrage {
  animation: retrage-cartea 1100ms var(--asezare) both;
}

@keyframes retrage-cartea {
  from { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
  to   { opacity: 0; transform: scale(0.9) translateY(24px); filter: blur(5px); }
}

.pana.pleaca { animation: pleaca-pana 700ms var(--usor) both; }

@keyframes pleaca-pana {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateZ(70px) translate(-40px, 40px) rotate(-8deg); }
}

.tranzitie.apare .tranzitie-fundal { animation: apare-lumina 700ms var(--moale) both; }

/* Cerneala scrisului: fiecare literă este un traseu desenat progresiv.
   `stroke-dashoffset` este pus din JavaScript, pentru că depinde de lungimea
   reală a fiecărui traseu. */
.scris-traseu {
  fill: none;
  stroke: var(--aur-clar);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(240, 214, 152, 0.55));
}

/* Destinațiile apar una câte una. */
.destinatie { animation: urca-usor 620ms var(--usor) both; }
.destinatie:nth-child(1) { animation-delay: 80ms; }
.destinatie:nth-child(2) { animation-delay: 200ms; }
.destinatie:nth-child(3) { animation-delay: 320ms; }

.destinatii-salut  { animation: urca-usor 700ms var(--usor) both; }
.destinatii-titlu  { animation: urca-usor 700ms var(--usor) 100ms both; }
.destinatii-iesire { animation: urca-usor 700ms var(--usor) 480ms both; }

/* ═══════════════════════════════════════════════════════════════════════
   5. FĂRĂ MIȘCARE
   ═══════════════════════════════════════════════════════════════════════
   Regula generală din base.css oprește deja toate animațiile. Aici ne
   asigurăm că oprirea nu lasă nimic invizibil: elementele care apar prin
   animație trebuie să rămână vizibile. */

@media (prefers-reduced-motion: reduce) {
  .poarta .carte,
  .poarta .pana,
  .poarta .subsol,
  .poarta .pagina-continut > *,
  .destinatie,
  .destinatii-salut,
  .destinatii-titlu,
  .destinatii-iesire {
    opacity: 1 !important;
    transform: none !important;
  }

  .titlu-caligrafic {
    background: none;
    -webkit-text-fill-color: var(--cerneala);
    color: var(--cerneala);
  }

  /* Scrisul de mână este înlocuit cu textul obișnuit, afișat dintr-odată. */
  .scris-panza { display: none; }
  .scris-text-simplu { display: block; }
}

/* ---------------------------------------------------------------------------
   Inelele din jurul siglei
   ---------------------------------------------------------------------------
   Se rotesc în sensuri opuse și foarte lent — un tur complet la 40, respectiv
   28 de secunde. La viteza asta nu se vede mișcarea propriu-zisă, se vede doar
   că sigla „trăiește". O rotire rapidă ar transforma-o într-un element care
   distrage de la formular.
   --------------------------------------------------------------------------- */

.si-inel-exterior { transform-origin: 60px 60px; animation: roteste-inel 40s linear infinite; }
.si-inel-punctat  { transform-origin: 60px 60px; animation: roteste-inel-invers 28s linear infinite; }
.si-scantei       { transform-origin: 60px 60px; animation: roteste-inel 40s linear infinite; }

@keyframes roteste-inel        { to { transform: rotate(360deg); } }
@keyframes roteste-inel-invers { to { transform: rotate(-360deg); } }

/* Discul respiră odată cu lumina caldă din scenă. */
.sigla-disc { animation: sigla-pulsatie 6.5s ease-in-out infinite; }

@keyframes sigla-pulsatie {
  0%, 100% { box-shadow:
      0 4px 14px rgba(20, 10, 4, 0.5),
      inset 0 1px 0 rgba(251, 238, 194, 0.22),
      0 0 0 1px rgba(220, 180, 95, 0.55),
      0 0 0 4px rgba(107, 31, 31, 0.35),
      0 0 22px rgba(220, 180, 95, 0.20); }
  50%      { box-shadow:
      0 4px 14px rgba(20, 10, 4, 0.5),
      inset 0 1px 0 rgba(251, 238, 194, 0.3),
      0 0 0 1px rgba(220, 180, 95, 0.8),
      0 0 0 4px rgba(107, 31, 31, 0.42),
      0 0 34px rgba(220, 180, 95, 0.34); }
}

@media (prefers-reduced-motion: reduce) {
  .si-inel-exterior, .si-inel-punctat, .si-scantei, .sigla-disc { animation: none !important; }
}