/* OSIRIS — prima pagină, secțiunea 11 „The paperwork” (#legal, pasul 5b): DOSARELE care se deschid în evantai, după exemplul 29
   „Interactive Folder Gallery” (21st.dev) și cercetare/sectiuni/dosare/fisa.md. Măsurat pe demo.mp4: dosar întunecat, colțuri rotunjite, cu o
   plăcuță de nume jos în mijloc; cardurile stau ÎN dosar și se văd ~45 % deasupra lui; la clic urcă și se desfac în evantai în ~0,2 s (arc cu
   depășire mică), stau așa ~0,3 s; închiderea e mai scurtă (~0,4 s), fără depășire. Aici: 4 dosare = cele 4 pagini legale REALE (Terms, Privacy,
   Cookies, Risk; „Refunds” nu există ca pagină sau secțiune, deci nu e dosar); „foile” sunt hârtie deschisă cu titlul paginii, prima propoziție
   reală și două titluri reale de capitole (src/data/legal/*.html). Tot dosarul e legătura spre pagină (TradingView, Raycast: cardul întreg
   e <a>). Hover / focus de tastatură (:focus-visible) / .is-open (atingere, legal-home.js) deschid evantaiul; Enter sau a doua atingere
   duc la pagină. Culorile: paleta E + hârtia (alb --text stins); fonturile doar prin tokeni (--font-sans, --font-mono = fontul „datelor”).
   Animate DOAR transform + opacity, pe tranziții (nimic nu rulează în repaus). Fără JS: legături simple, hover-ul tot deschide. Prefix lg-. */

.lg-row{--lg-h:16rem;--lg-front:7.25rem;--lg-sheet:8.5rem;--lg-lift:-4.9rem;--lg-rot:14deg;--lg-shift:24%;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem);margin:0;padding:0;list-style:none}
.lg-item{min-width:0}
.lg-folder{position:relative;display:block;height:var(--lg-h);border-radius:var(--r-card);color:var(--text);-webkit-tap-highlight-color:transparent;outline-offset:4px}
.lg-folder:focus-visible{outline:2px solid var(--accent)}
/* spatele dosarului (cu „urechea” din stânga sus, ca un dosar de Mac) și fața lui (cu plăcuța de nume) */
.lg-back,.lg-front{position:absolute;left:4%;right:4%;bottom:0;border-radius:14px 14px 16px 16px}
.lg-back{height:calc(var(--lg-front) + 1.75rem);background:#0a0e18;border:1px solid var(--line)}
.lg-back::before{content:"";position:absolute;left:-1px;top:-.7rem;width:38%;height:1.2rem;border-radius:9px 9px 0 0;background:#0a0e18;border:1px solid var(--line);border-bottom:0}
.lg-front{height:var(--lg-front);display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem;padding:1rem 1.1rem;
  background:linear-gradient(180deg,#151b2a,#0e121c);border:1px solid var(--line-strong);box-shadow:0 1px 0 var(--fill-soft) inset,0 24px 40px -28px var(--black);
  transform-origin:50% 100%;transition:transform .55s var(--ease),border-color var(--d-fast),box-shadow .55s var(--ease)}
.lg-tab{min-width:0}
.lg-tab b{display:block;font-size:1rem;font-weight:600;letter-spacing:-.005em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-tab small{display:block;margin-top:.2rem;font-family:var(--font-mono);font-size:var(--t-micro);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.lg-tab small i{font-style:normal}
.lg-arr{flex:0 0 auto;width:1.1rem;height:1.1rem;margin-bottom:.1rem;color:var(--muted);transition:transform var(--d-med) var(--ease),color var(--d-fast)}
.lg-arr svg{width:100%;height:100%;fill:currentColor}
/* foile: hârtie deschisă; stau în dosar (jos, sub față), ies ~2,2 rem deasupra lui în repaus */
.lg-sheets{position:absolute;left:12%;right:12%;bottom:1.25rem;height:var(--lg-sheet);pointer-events:none;z-index:0}   /* context propriu: foaia din mijloc (z 1) stă sub fața dosarului */
.lg-front{z-index:1}
.lg-sheet{--r:0deg;--x:0;--y:0;--d:0s;position:absolute;inset:0;padding:.8rem .85rem;border-radius:8px;overflow:hidden;
  background:linear-gradient(180deg,#eef2f8,#dde4ee);color:#0e121c;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 8px 22px -14px rgba(0,0,0,.8);
  transform-origin:50% 100%;transform:translate(var(--x),var(--y)) rotate(var(--r));
  transition:transform .38s var(--ease) var(--d),box-shadow .38s var(--ease)}
.lg-sheet b{display:block;font-size:.8125rem;font-weight:600;line-height:1.25;letter-spacing:-.005em}
.lg-sheet span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin-top:.35rem;font-size:.75rem;line-height:1.4;color:#3d4756}
.lg-sheet--l b,.lg-sheet--r b{opacity:0;transition:opacity .2s var(--ease)}   /* în repaus foile din spate fără litere (fragmente tăiate); apar la deschidere */
.lg-folder:hover .lg-sheet--l b,.lg-folder:hover .lg-sheet--r b,.lg-folder:focus-visible .lg-sheet--l b,.lg-folder:focus-visible .lg-sheet--r b,.lg-folder.is-open .lg-sheet--l b,.lg-folder.is-open .lg-sheet--r b{opacity:1;transition-delay:.1s}
.lg-sheet--l{--r:-4deg;--x:-9%;--y:.35rem}
.lg-sheet--r{--r:4deg;--x:9%;--y:.35rem;text-align:right}   /* titlul foii din dreapta iese de după foaia din mijloc */
.lg-sheet--c{--y:-.15rem;z-index:1}
/* deschis: foile urcă și se desfac (29: ~0,2 s, arc cu depășire); fața se apleacă puțin spre noi; închiderea e lină, fără depășire */
.lg-folder:hover .lg-sheet,.lg-folder:focus-visible .lg-sheet,.lg-folder.is-open .lg-sheet{transition:transform .4s cubic-bezier(.34,1.45,.64,1) var(--d),box-shadow .4s var(--ease)}
.lg-folder:hover .lg-sheet--c,.lg-folder:focus-visible .lg-sheet--c,.lg-folder.is-open .lg-sheet--c{--y:var(--lg-lift);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 22px 40px -18px rgba(0,0,0,.9)}
.lg-folder:hover .lg-sheet--l,.lg-folder:focus-visible .lg-sheet--l,.lg-folder.is-open .lg-sheet--l{--y:calc(var(--lg-lift) + .9rem);--x:calc(var(--lg-shift) * -1);--r:calc(var(--lg-rot) * -1);--d:.04s}
.lg-folder:hover .lg-sheet--r,.lg-folder:focus-visible .lg-sheet--r,.lg-folder.is-open .lg-sheet--r{--y:calc(var(--lg-lift) + .9rem);--x:var(--lg-shift);--r:var(--lg-rot);--d:.08s}
.lg-folder:hover .lg-front,.lg-folder:focus-visible .lg-front,.lg-folder.is-open .lg-front{transform:perspective(700px) rotateX(-7deg);border-color:var(--line-hover);box-shadow:0 1px 0 var(--fill-soft) inset,0 30px 50px -30px var(--black)}
.lg-folder:hover .lg-arr,.lg-folder:focus-visible .lg-arr,.lg-folder.is-open .lg-arr{transform:translateX(.2em);color:var(--accent)}
.lg-folder:active .lg-front{transform:perspective(700px) rotateX(-7deg) translateY(1px);transition-duration:.08s}
/* pe telefon dosarul deschis își spune a doua atingere */
.lg-folder .lg-tab small>span{display:none}
.lg-folder.is-open .lg-tab small>span{display:inline;color:var(--accent)}
.lg-folder.is-open .lg-tab small>i{display:none}

@media (max-width:1280px){.lg-row{--lg-shift:19%}}   /* evantai puțin mai strâns: la 1280 foaia din stânga a primului dosar ieșea 4 px din ecran */
@media (max-width:900px){.lg-row{--lg-shift:15%}}   /* la 820 foaia din stânga a primului dosar ieșea 5 px din ecran */
@media (max-width:1024px){.lg-row{--lg-h:15rem;--lg-front:6.75rem;--lg-sheet:8rem;--lg-lift:-4.6rem}
  .lg-tab b{font-size:.9375rem;white-space:normal;overflow:visible;text-overflow:clip}}   /* dosarul are ~223 px: numele trece pe două rânduri, nu se taie cu „…” */
@media (max-width:760px){
  .lg-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;--lg-h:14.5rem;--lg-front:6.25rem;--lg-sheet:7.75rem;--lg-lift:-4.4rem;--lg-rot:11deg;--lg-shift:15%}
  .lg-sheets{left:10%;right:10%}
  .lg-front{padding:.85rem .9rem}
  .lg-tab b{font-size:.9375rem;white-space:normal;overflow:visible;text-overflow:clip}
}
@media (max-width:420px){
  .lg-row{--lg-h:13.5rem;--lg-front:6rem;--lg-sheet:7.25rem;--lg-lift:-4.1rem;--lg-rot:9deg;--lg-shift:12%;gap:.75rem}
  .lg-sheet{padding:.65rem .7rem}
  .lg-tab small{letter-spacing:.03em}
  .lg-arr,.lg-upd{display:none}                 /* plăcuța are ~105 px: fără săgeată și fără cuvântul „Updated”, ca numele și data să încapă */
  .lg-tab b{font-size:.875rem}
}