/* ===========================================================================
   Decorul scenei
   ---------------------------------------------------------------------------
   Tot ce este obiect desenat: antetul de deasupra cărții, plăcuța de jos,
   ferecăturile de metal, iedera, chenarele paginilor și frunzișul din colțuri.

   Scena a avut la un moment dat și un teanc de cărți, o lanternă și un glob,
   desenate cu forme plate. Lângă peisajul calculat de shader arătau ca niște
   autocolante — aceeași imagine, două calități diferite — așa că au fost
   scoase. Fundalul este acum dintr-o singură bucată.

   Nimic din ce urmează nu este o fotografie. Toate sunt forme SVG și
   gradienți CSS, deci scena arată identic și fără conexiune la internet — și
   se poate recolora dintr-un singur loc, din `theme.css`.
   =========================================================================== */

/* Blocul cu formele refolosite nu trebuie să ocupe loc în pagină. */
.forme-ascunse {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════
   1. ANTETUL DE DEASUPRA CĂRȚII
   ═══════════════════════════════════════════════════════════════════════ */

.antet-scena {
  position: absolute;
  top: clamp(0.9rem, 2.4vh, 2.2rem);
  left: 50%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}

.antet-titlu-rand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

/* Roza vânturilor */
.roza-vanturilor {
  width: clamp(30px, 3vw, 44px);
  height: auto;
  flex: 0 0 auto;
}
.rv-cerc          { fill: none; stroke: var(--aur-55); stroke-width: 1.2; }
.rv-cerc-interior { fill: none; stroke: var(--aur-30); stroke-width: 0.9; stroke-dasharray: 3 4; }
.rv-stea-mare     { fill: var(--aur-cald); }
.rv-stea-mica     { fill: var(--aur-clar); opacity: 0.9; }
.rv-miez          { fill: var(--noapte-adanca); stroke: var(--aur); stroke-width: 1; }

.antet-titlu {
  margin: 0;
  font-family: var(--font-academic);
  font-size: clamp(1.5rem, 0.9rem + 1.7vw, 2.5rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  /* Auriu cu volum: mai deschis sus, mai adânc jos, ca o literă turnată. */
  background-image: linear-gradient(180deg, #fdf3d6 0%, #e8c877 38%, #c9992f 72%, #8a6420 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(212, 169, 78, 0.35));
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .antet-titlu { background: none; -webkit-text-fill-color: var(--aur-cald); color: var(--aur-cald); }
}

.antet-subtitlu {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

/* Liniile ornamentale de o parte și de alta a subtitlului. Se subțiază spre
   capete, deci nu se termină brusc. */
.antet-linie {
  width: clamp(38px, 6vw, 92px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--aur-55), transparent);
}
.antet-linie::after {
  content: "";
  display: block;
  width: 4px; height: 4px;
  margin: -2px auto 0;
  border: 1px solid var(--aur-55);
  transform: rotate(45deg);
}

.antet-text {
  font-family: var(--font-academic);
  font-size: clamp(0.6rem, 0.5rem + 0.28vw, 0.78rem);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--aur-cald);
  white-space: nowrap;
}

.antet-diamant {
  font-size: 0.62rem;
  color: var(--aur-55);
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. PLĂCUȚA DE JOS
   ═══════════════════════════════════════════════════════════════════════ */

.placuta {
  position: absolute;
  bottom: clamp(0.3rem, 1vh, 0.7rem);
  left: 50%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.5rem 1.7rem 0.55rem;
  transform: translateX(-50%);
  text-align: center;

  /* Placă de metal patinat, cu ramă aurie dublă. */
  border: 1px solid var(--aur-30);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(23, 38, 78, 0.94) 0%, rgba(10, 16, 36, 0.96) 100%);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.5),
    inset 0 0 0 3px rgba(10, 16, 36, 0.9),
    inset 0 0 0 4px var(--aur-18);
}

/* Colțurile teșite ale plăcuței */
.placuta::before,
.placuta::after {
  content: "";
  position: absolute;
  top: 6px; bottom: 6px;
  width: 10px;
  border: 1px solid var(--aur-30);
  border-radius: 4px;
}
.placuta::before { left: 6px;  border-right: 0; }
.placuta::after  { right: 6px; border-left: 0; }

.placuta-ornament {
  position: absolute;
  top: -0.62rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 0.4rem;
  background: var(--noapte-adanca);
  font-size: 0.7rem;
  color: var(--aur-cald);
}

.placuta-text {
  margin: 0;
  font-family: var(--font-academic);
  font-size: clamp(0.68rem, 0.6rem + 0.2vw, 0.8rem);
  line-height: 1.45;
  color: var(--pergament);
  letter-spacing: 0.015em;
}

/* Cele două sigle din plăcuță: a instituției și a platformei. */
.placuta-sigle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.25rem;
}

/* Sigla universității are inelul de text scris cu alb, deci pe fundalul
   bleumarin al plăcuței se vede exact așa cum a fost gândită. */
.placuta-sigla-upg {
  width: clamp(26px, 2.3vw, 34px);
  height: auto;
}

.placuta-separator {
  width: 1px;
  height: 18px;
  background: linear-gradient(180deg, transparent, var(--aur-30), transparent);
}

/*
 * Sigla platformei sta pe o placuta aurie, exact ca in antetul si subsolul
 * restului site-ului (`assets/core/tema-premium.css`, sectiunea 25).
 *
 * De ce trebuie: `footer-logo.png` are interiorul TRANSPARENT, iar textul
 * „AdventureNet.ro" este scris cu bleumarin inchis. Asezat direct pe placuta
 * de metal patinat (care este tot bleumarin), textul ajungea aproape invizibil
 * — se vedea doar chenarul in degrade al fisierului. Aceeasi imagine este
 * corect tratata peste tot altundeva pe site; doar poarta o lasase fara placa.
 *
 * `box-sizing: content-box` tine latimea de mai jos pentru IMAGINE, iar placa
 * se intinde in afara ei cu padding-ul — altfel imaginea s-ar micsora in
 * interiorul placii.
 */
.placuta-logo {
  width: clamp(68px, 6vw, 88px);
  height: auto;
  box-sizing: content-box;
  padding: 4px 6px;
  border-radius: 11px;
  background: linear-gradient(158deg, #fbeec2 0%, #dcb45f 42%, #b8933f 78%, #eed597 100%);
  box-shadow:
    0 0 0 1px rgba(120, 88, 20, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 6px 14px rgba(4, 8, 18, 0.40);
}

/* ═══════════════════════════════════════════════════════════════════════
   2b. INSIGNA DE ACCES PRIVAT
   Sta in afara cartii, in coltul din stanga jos — aceeasi placa de metal
   patinat ca placuta cu motto, doar mai mica.
   ═══════════════════════════════════════════════════════════════════════ */

.insigna-acces {
  position: absolute;
  left: clamp(0.8rem, 2vw, 2rem);
  bottom: clamp(0.8rem, 2.4vh, 1.8rem);
  z-index: 20;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  max-width: 240px;
  padding: 0.6rem 0.9rem 0.65rem;
  border: 1px solid var(--aur-30);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(23, 38, 78, 0.94) 0%, rgba(10, 16, 36, 0.96) 100%);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.5),
    inset 0 0 0 3px rgba(10, 16, 36, 0.9),
    inset 0 0 0 4px var(--aur-18);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--pergament);
}
.insigna-acces svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin-top: 2px;
  color: var(--aur-cald);
}
.insigna-acces strong { color: var(--aur-clar); }

/* Cand apar destinatiile, insigna dispare odata cu restul scenei. */
.poarta.in-tranzitie .insigna-acces { opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }

@media (max-width: 900px) {
  .insigna-acces {
    position: static;
    margin: 1rem auto 0;
    max-width: 320px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   3. FERECĂTURILE DE METAL ALE CĂRȚII
   ═══════════════════════════════════════════════════════════════════════ */

.feronerie {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}

/* Colțarele: patru piese identice, rotite. */
.coltar { width: clamp(34px, 3.6vw, 52px); height: auto; }

.coltar-ss { top: -11px; left: -11px; }
.coltar-sd { top: -11px; right: -11px; transform: scaleX(-1); }
.coltar-js { bottom: -11px; left: -11px; transform: scaleY(-1); }
.coltar-jd { bottom: -11px; right: -11px; transform: scale(-1); }

.cm-corp    { fill: #c79a3e; }
.cm-lumina  { fill: rgba(255, 245, 214, 0.55); }
.cm-umbra   { fill: rgba(70, 46, 12, 0.55); }
.cm-nit     { fill: #6b4a12; stroke: rgba(255, 245, 214, 0.5); stroke-width: 0.8; }
.cm-gravura { stroke: rgba(90, 62, 16, 0.55); stroke-width: 1.1; fill: none; }

/* Închizătorile de pe marginile laterale */
.inchizatoare { width: clamp(20px, 2.1vw, 30px); height: auto; top: 50%; }
.inchizatoare-stanga  { left: -13px;  transform: translateY(-50%); }
.inchizatoare-dreapta { right: -13px; transform: translateY(-50%) scaleX(-1); }

.im-corp       { fill: #c79a3e; }
.im-lumina     { fill: rgba(255, 245, 214, 0.45); }
.im-buton      { fill: #8a6420; stroke: rgba(255, 245, 214, 0.6); stroke-width: 1.2; }
.im-buton-miez { fill: #f0d698; }
.im-curea      { fill: #4a2e1b; }

/* ═══════════════════════════════════════════════════════════════════════
   4. CHENARELE PAGINILOR
   ═══════════════════════════════════════════════════════════════════════ */

.chenar-pagina {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.ch-linie-ext {
  fill: none;
  stroke: rgba(138, 100, 32, 0.5);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}
.ch-linie-int {
  fill: none;
  stroke: rgba(138, 100, 32, 0.28);
  stroke-width: 0.9;
  vector-effect: non-scaling-stroke;
}

/* Florile din colțurile chenarului */
.colt {
  position: absolute;
  z-index: 2;
  width: clamp(26px, 2.6vw, 38px);
  height: auto;
  pointer-events: none;
}
.colt-ss { top: 10px;    left: 10px; }
.colt-sd { top: 10px;    right: 10px;  transform: scaleX(-1); }
.colt-js { bottom: 10px; left: 10px;   transform: scaleY(-1); }
.colt-jd { bottom: 10px; right: 10px;  transform: scale(-1); }

.fc-linie  { stroke: rgba(138, 100, 32, 0.55); stroke-width: 1.2; }
.fc-frunza { fill: rgba(138, 100, 32, 0.26); }
.fc-punct  { fill: rgba(138, 100, 32, 0.6); }
.fc-vrej   { stroke: rgba(138, 100, 32, 0.4); stroke-width: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   5. IEDERA
   ═══════════════════════════════════════════════════════════════════════ */

.iedera {
  position: absolute;
  top: -3%;
  z-index: 8;
  width: clamp(56px, 6vw, 96px);
  height: 106%;
  pointer-events: none;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.45));
}
.iedera-stanga  { left: -34px; }
.iedera-dreapta { right: -34px; transform: scaleX(-1); }

.ie-vrej   { stroke: #3f6b3a; stroke-width: 3.2; stroke-linecap: round; }
.ie-frunze { fill: #4a7d42; }
.ie-frunze path:nth-child(even) { fill: #3d6b37; }
.ie-bobite { fill: var(--aur-clar); }

/* ═══════════════════════════════════════════════════════════════════════
   9. FRUNZIȘUL
   ═══════════════════════════════════════════════════════════════════════ */

.strat-frunze { position: absolute; inset: 0; pointer-events: none; will-change: transform; }

.frunze {
  position: absolute;
  width: clamp(180px, 20vw, 340px);
  height: auto;
  filter: blur(3px);
}
.frunze-stanga  { top: -3vh; left: -3vw; }
.frunze-dreapta { top: 2vh; right: -3vw; }

.frunza-grup path { fill: #2f5230; opacity: 0.62; }
.frunza-grup path:nth-child(even) { fill: #26472a; opacity: 0.5; }

/* ═══════════════════════════════════════════════════════════════════════
   11. SCÂNTEILE DE LA VÂRFUL PENEI
   ═══════════════════════════════════════════════════════════════════════ */

.pana-scantei {
  position: absolute;
  left: -34%;
  bottom: -6%;
  width: 62%;
  height: auto;
  pointer-events: none;
}
.scantei-grup circle { fill: var(--aur-clar); }

/* ═══════════════════════════════════════════════════════════════════════
   12. ECRANE MICI
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Obiectele mari din scenă ar înghesui cartea; le scoatem și păstrăm doar
     atmosfera de fundal. */
  .iedera { display: none; }
  .feronerie { display: none; }

  /*
   * Frunzișul din colțuri iese cu câțiva zeci de pixeli în afara ecranului:
   * este așezat cu `right: -3vw` peste un strat care are el însuși `inset: -8%`.
   * Pe desktop nu se vede, pentru că nimic nu poate fi derulat lateral; pe un
   * telefon însă, pagina căpăta derulare pe orizontală. Îl ținem în interior.
   */
  /* Ambele clase in selector: layout.css are .strat cu inset:-8%, iar
     decor.css este incarcat inaintea lui — la specificitate egala ar pierde. */
  .strat.strat-frunze { overflow: hidden; inset: 0; }
  .frunze-stanga  { left: -8vw; }
  .frunze-dreapta { right: -8vw; }

  .antet-scena { position: static; transform: none; margin: 1.4rem auto 0.6rem; }

  /*
   * Placuta de subsol pe ecran mic.
   *
   * Aici erau doua defecte care se ascundeau unul pe altul:
   *
   * 1. `position: static` facea ca `z-index: 20` din regula de baza sa NU mai
   *    aiba niciun efect — `z-index` se aplica doar elementelor pozitionate.
   *    Panza WebGL (`position: absolute; z-index: 1`) acoperea astfel intreaga
   *    placuta: masurat, `elementFromPoint` intorcea canvasul in tot
   *    dreptunghiul subsolului, iar un contur rosu fortat pe element nu se
   *    vedea deloc. Deci pe telefon subsolul disparea complet sub fundal.
   *
   * 2. Trecerea la `position: relative` (necesara pentru punctul 1) reactiva
   *    `left: 50%` din regula de baza, iar `transform: none` de aici anula
   *    exact compensarea `translateX(-50%)` care il aducea inapoi in centru.
   *    Rezultatul: placuta impinsa jumatate de ecran la dreapta si taiata —
   *    se vedea doar coltul cu siglele, descentrat.
   *
   * Corect: pozitionat (ca z-index-ul sa conteze), dar fara offseturile de
   * pozitionare absoluta, si centrat din `margin: auto` ca orice bloc.
   */
  .placuta {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    margin: 1.4rem auto 2rem;
  }
  .frunze { width: 150px; opacity: 0.5; }
}

@media (max-width: 560px) {
  .antet-text { letter-spacing: 0.18em; font-size: 0.58rem; }
  .antet-linie { width: 26px; }
  .placuta { padding: 0.65rem 1.2rem 0.75rem; }
}