/* ═══════════════════════════════════════════════════════════
   informs - sistem de ilustrație fără fotografie
   Compoziții din gradiente stratificate. Zero cereri de rețea.

   Fiecare variantă împarte aceleași reguli: grosime de linie 1px,
   aceeași logică de strălucire, accentul vine din --t1 / --t2.
   Tinta se dă ca triplet RGB ca să pot varia alpha liber.
   ═══════════════════════════════════════════════════════════ */

.art {
  --t1: 6 90 247;      /* accent principal  (blue)      */
  --t2: 123 50 214;    /* accent secundar   (purple-lt) */
  --line: 255 255 255;

  position: relative;
  overflow: hidden;
  background-color: #0E0138;
  isolation: isolate;
}

/* vinietă comună - leagă toate variantele între ele */
.art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(12,0,50,0) 55%, rgba(12,0,50,.55) 100%);
}

/* paleta pe variante: doar familia albastru-violet a brandului.
   Roz, galben și turcoaz au fost scoase: șase accente diferite
   fragmentau pagina, butoanele folosesc oricum doar albastrul. */
.art[data-tint="blue"]   { --t1: 6 90 247;    --t2: 4 55 153; }
.art[data-tint="purple"] { --t1: 123 50 214;  --t2: 6 90 247; }
.art[data-tint="deep"]   { --t1: 4 55 153;    --t2: 93 22 179; }

/* ── 1. grid - plan cartezian cu noduri ───────────────────── */
.art[data-art="grid"] {
  background-image:
    radial-gradient(64% 84% at 72% 26%, rgb(var(--t1) / .72), transparent 66%),
    radial-gradient(52% 70% at 20% 84%, rgb(var(--t2) / .55), transparent 68%),
    repeating-linear-gradient(90deg, rgb(var(--line) / .13) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(0deg,  rgb(var(--line) / .13) 0 1px, transparent 1px 30px),
    linear-gradient(160deg, #24106B, #0C0032);
}
/* noduri aprinse pe intersecții; fără dungi diagonale, la dimensiune
   mică se citeau ca un defect de randare, nu ca desen */
.art[data-art="grid"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgb(var(--line)) 0 3px, rgb(var(--line) / .26) 4px, transparent 13px),
    radial-gradient(circle, rgb(var(--t1)) 0 4px, rgb(var(--t1) / .34) 7px, transparent 20px),
    radial-gradient(circle, rgb(var(--line) / .8) 0 2px, rgb(var(--line) / .2) 3px, transparent 11px),
    radial-gradient(circle, rgb(var(--t2)) 0 3px, rgb(var(--t2) / .3) 5px, transparent 16px);
  background-repeat: no-repeat;
  background-size: 28px 28px, 42px 42px, 24px 24px, 34px 34px;
  background-position: 24% 30%, 56% 62%, 82% 24%, 40% 78%;
}

/* ── 2. arcs - inele concentrice dintr-un colț ────────────── */
.art[data-art="arcs"] {
  background-image:
    radial-gradient(56% 78% at 10% 88%, rgb(var(--t1) / .68), transparent 70%),
    radial-gradient(50% 64% at 88% 14%, rgb(var(--t2) / .42), transparent 72%),
    linear-gradient(150deg, #260D6E, #0C0032);
}
.art[data-art="arcs"]::before {
  content: "";
  position: absolute;
  left: 4%;
  bottom: -64%;
  width: 156%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at center,
      rgb(var(--line) / .30) 0 1px,
      transparent 1px 28px);
  mask-image: radial-gradient(circle at center, #000 34%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at center, #000 34%, transparent 78%);
}

/* ── 3. bars - histogramă abstractă ───────────────────────── */
.art[data-art="bars"] {
  background-image:
    radial-gradient(60% 80% at 80% 12%, rgb(var(--t2) / .42), transparent 70%),
    linear-gradient(160deg, #180847, #0C0032);
}
.art[data-art="bars"]::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 22%;
  height: 46%;
  background:
    linear-gradient(to top, rgb(var(--t1) / .85), rgb(var(--t1) / .15));
  /* înălțimi diferite pe coloane, tăiate dintr-o singură suprafață */
  mask-image: repeating-linear-gradient(90deg, #000 0 11px, transparent 11px 22px);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 11px, transparent 11px 22px);
  clip-path: polygon(0 62%, 11% 62%, 11% 34%, 22% 34%, 22% 78%, 33% 78%, 33% 12%,
                     44% 12%, 44% 48%, 55% 48%, 55% 26%, 66% 26%, 66% 66%,
                     77% 66%, 77% 4%, 88% 4%, 88% 40%, 100% 40%, 100% 100%, 0 100%);
}
.art[data-art="bars"]::after {
  background:
    linear-gradient(180deg, rgba(12,0,50,0) 55%, rgba(12,0,50,.55) 100%),
    linear-gradient(0deg, rgb(var(--line) / .18) 0 1px, transparent 1px);
  background-position: 0 0, 0 78%;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100% 1px;
}

/* ── 4. orbit - inele eliptice cu punct ───────────────────── */
/* Hub cu sateliți, nu planetă: miezul rămâne difuz, accentul cade
   pe inelele eliptice și pe nodurile de pe ele. */
.art[data-art="orbit"] {
  background-image:
    radial-gradient(30% 46% at 50% 50%, rgb(var(--t1) / .5), transparent 72%),
    radial-gradient(60% 80% at 84% 84%, rgb(var(--t2) / .3), transparent 72%),
    linear-gradient(150deg, #1C0A55, #0C0032);
}
.art[data-art="orbit"]::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 62%; aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgb(var(--line) / .85) 0 3px, transparent 4px),
    radial-gradient(circle at 50% 50%, rgb(var(--t1) / .26) 0 16%, transparent 17%);
}
/* două inele eliptice înclinate, cu noduri pe ele */
.art[data-art="orbit"]::after {
  background:
    linear-gradient(180deg, rgba(12,0,50,0) 62%, rgba(12,0,50,.5) 100%),
    radial-gradient(circle at 87% 50%,  rgb(var(--line)) 0 3px, transparent 4px),
    radial-gradient(circle at 21% 36%,  rgb(var(--t2)) 0 4px, transparent 5px),
    radial-gradient(circle at 66% 71%,  rgb(var(--line) / .75) 0 2px, transparent 3px),
    /* inelele au nevoie de un stop transparent final, altfel ultima
       culoare se întinde peste tot restul elementului */
    radial-gradient(ellipse 37% 15% at 50% 50%, transparent 96%, rgb(var(--line) / .38) 97.5%, transparent 99%),
    radial-gradient(ellipse 15% 37% at 50% 50%, transparent 96%, rgb(var(--line) / .22) 97.5%, transparent 99%);
}

/* ── 5. flow - trasee diagonale ───────────────────────────── */
.art[data-art="flow"] {
  background-image:
    radial-gradient(54% 70% at 84% 78%, rgb(var(--t1) / .48), transparent 70%),
    radial-gradient(44% 56% at 14% 20%, rgb(var(--t2) / .34), transparent 72%),
    repeating-linear-gradient(118deg,
      rgb(var(--line) / .10) 0 1px,
      transparent 1px 26px),
    linear-gradient(160deg, #1A0A52, #0C0032);
}
.art[data-art="flow"]::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  background: repeating-linear-gradient(118deg,
    rgb(var(--t1) / .5) 0 2px,
    transparent 2px 92px);
  mask-image: radial-gradient(ellipse 70% 60% at 70% 70%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 70%, #000, transparent 72%);
}

/* ── 6. pulse - unde radiale ──────────────────────────────── */
.art[data-art="pulse"] {
  background-image:
    radial-gradient(40% 56% at 50% 46%, rgb(var(--t1) / .52), transparent 68%),
    linear-gradient(160deg, #200B62, #0C0032);
}
.art[data-art="pulse"]::before {
  content: "";
  position: absolute;
  left: 50%; top: 46%;
  width: 120%; aspect-ratio: 1;
  translate: -50% -50%;
  background: repeating-radial-gradient(circle at center,
    rgb(var(--line) / .16) 0 1px,
    transparent 1px 26px);
  mask-image: radial-gradient(circle at center, #000 10%, transparent 62%);
  -webkit-mask-image: radial-gradient(circle at center, #000 10%, transparent 62%);
}

/* ── Monogram - cardurile de oameni, fără fotografie ──────── */
.mono {
  --t1: 6 90 247;
  --t2: 123 50 214;
  position: relative;
  overflow: hidden;
  background-color: #12023F;
  background-image:
    radial-gradient(70% 90% at 30% 10%, rgb(var(--t2) / .55), transparent 70%),
    radial-gradient(60% 70% at 85% 95%, rgb(var(--t1) / .45), transparent 72%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / .05) 0 1px, transparent 1px 22px);
}
.mono[data-tint="blue"]   { --t1: 6 90 247;   --t2: 4 55 153; }
.mono[data-tint="purple"] { --t1: 123 50 214; --t2: 6 90 247; }
.mono[data-tint="deep"]   { --t1: 4 55 153;   --t2: 93 22 179; }

/* În .pcard monograma e stratul care umple cardul. Fără regula asta,
   `position: relative` de mai sus bate `position: absolute` din
   style.css (aceeași specificitate, fișier încărcat mai târziu) și
   cardul rămâne cu înălțime 0. */
.pcard__art.mono { position: absolute; inset: 0; }

.mono__ini {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--f-head);
  font-size: clamp(30px, 7vw, 44px);
  font-weight: 300;
  letter-spacing: .04em;
  color: rgb(255 255 255 / .92);
  padding-bottom: 14%;
}
/* cerc subțire în jurul inițialelor */
.mono__ini::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  margin-top: -7%;
  width: 58%; aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .28);
}

/* ── Panou editorial mare (pagini interioare) ─────────────── */
.artpanel {
  border-radius: var(--card-r);
  aspect-ratio: 4 / 3;
  min-height: 300px;
}

/* aceeași ramă și pentru randările foto (assets/renders/) */
img.artpanel { height: auto; object-fit: cover; background: #0E0138; }

@media (max-width: 1023px) {
  .artpanel { aspect-ratio: 16 / 9; min-height: 0; }
}

/* ── Accesibilitate / motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .art::before, .art::after { animation: none !important; }
}