/* DentPartner — efecte vizuale, fiecare pornit separat.
   Se activeaza punand numele in data-ef pe <html>, separate prin spatiu:
     <html data-ef="gradient grain reveal">
   Fiecare efect e scris ca html[data-ef~="nume"], deci ordinea nu conteaza.
   Toate respecta prefers-reduced-motion: cine are animatiile oprite in sistem
   vede site-ul static, fara sa piarda continut. */

/* ============================================================ 1. GRADIENT
   Spalari fine de culoare pe erou, banda si chemare. Fara degrade tipatoare:
   accentul la 6-10% opacitate, cat sa se simta, nu cat sa se vada. */
html[data-ef~="gradient"] .erou {
  background:
    radial-gradient(120% 90% at 8% -10%, color-mix(in srgb, var(--accent-pata) 11%, transparent), transparent 62%),
    radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 58%);
}
html[data-ef~="gradient"] .banda {
  background: linear-gradient(180deg, var(--fundal-2), color-mix(in srgb, var(--accent-pata) 4%, var(--fundal-2)));
}
html[data-ef~="gradient"] .chem {
  background:
    radial-gradient(100% 120% at 85% 110%, color-mix(in srgb, var(--accent-pata) 26%, transparent), transparent 60%),
    var(--fundal-3);
}
html[data-ef~="gradient"] .bloc.alt {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 3%, var(--fundal-2)), var(--fundal-2));
}

/* =============================================================== 2. GRAIN
   Textura fina de film peste tot. Da senzatia de tipar, nu de ecran.
   SVG inline, deci zero cereri in plus. */
html[data-ef~="grain"] body::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  html[data-ef~="grain"]:not([data-mod="light"]) body::after { mix-blend-mode: screen; opacity: .05; }
}
html[data-ef~="grain"][data-mod="dark"] body::after { mix-blend-mode: screen; opacity: .05; }

/* ============================================================== 3. REVEAL
   Continutul urca si apare la derulare. Clasa .vine e pusa de efecte.js;
   .aici vine cand elementul intra in ecran. */
html[data-ef~="reveal"] .vine {
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s cubic-bezier(.2, .7, .3, 1), transform .5s cubic-bezier(.2, .7, .3, 1);
}
html[data-ef~="reveal"] .vine.aici { opacity: 1; transform: none; }
/* cardurile intr-o grila vin una dupa alta, nu toate odata */
html[data-ef~="reveal"] .grid .vine:nth-child(2) { transition-delay: .05s; }
html[data-ef~="reveal"] .grid .vine:nth-child(3) { transition-delay: .1s; }
html[data-ef~="reveal"] .grid .vine:nth-child(4) { transition-delay: .15s; }
html[data-ef~="reveal"] .grid .vine:nth-child(5) { transition-delay: .2s; }
html[data-ef~="reveal"] .grid .vine:nth-child(n+6) { transition-delay: .25s; }

/* ================================================================ 4. ZOOM
   Fotografia creste lent sub cursor. Decupajul rammane fix. */
html[data-ef~="zoom"] .card-poza { overflow: hidden; }
html[data-ef~="zoom"] .card-poza img { transition: transform .55s cubic-bezier(.2, .7, .3, 1); }
html[data-ef~="zoom"] .card:hover .card-poza img { transform: scale(1.055); }
html[data-ef~="zoom"] .poze img { transition: transform .4s ease; }
html[data-ef~="zoom"] .poze img:hover { transform: scale(1.02); }

/* ================================================================ 5. GLOW
   Umbra colorata in loc de gri. Cardul pare luminat de propria culoare. */
html[data-ef~="glow"] .card:hover {
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 14%, transparent),
              0 14px 38px color-mix(in srgb, var(--accent) 17%, transparent);
}
html[data-ef~="glow"] .buton:hover {
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent-pata) 42%, transparent);
}
html[data-ef~="glow"] .cat-card:hover {
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 13%, transparent);
}

/* ================================================================ 6. LINIE
   Linie care creste de la stanga sub legaturi. Mai discret decat subliniere. */
html[data-ef~="linie"] .meniu a, html[data-ef~="linie"] .leg, html[data-ef~="linie"] .jos a {
  position: relative; text-decoration: none;
}
html[data-ef~="linie"] .meniu a::after,
html[data-ef~="linie"] .leg::after,
html[data-ef~="linie"] .jos a::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: -3px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.2, .7, .3, 1);
}
html[data-ef~="linie"] .meniu a:hover::after,
html[data-ef~="linie"] .leg:hover::after,
html[data-ef~="linie"] .jos a:hover::after { transform: scaleX(1); }
html[data-ef~="linie"] .meniu a.act::after { transform: scaleX(1); background: var(--accent); }
html[data-ef~="linie"] .meniu a:hover, html[data-ef~="linie"] .leg:hover,
html[data-ef~="linie"] .jos a:hover { text-decoration: none; }

/* ============================================================== 7. STICLA
   Capul de pagina devine sticla mata, cu margine care apare la derulare. */
html[data-ef~="sticla"] .sus {
  background: color-mix(in srgb, var(--fundal) 62%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: transparent;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
html[data-ef~="sticla"] .sus.dus {
  border-bottom-color: var(--linie);
  box-shadow: 0 4px 24px color-mix(in srgb, var(--cerneala) 7%, transparent);
}

/* ============================================================== 8. CONTUR
   Marginea cardului devine degrade la trecerea cu cursorul. */
html[data-ef~="contur"] .card, html[data-ef~="contur"] .cat-card {
  position: relative; border-color: var(--linie);
}
html[data-ef~="contur"] .card::before, html[data-ef~="contur"] .cat-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  background: linear-gradient(135deg, var(--accent-pata), transparent 42%, transparent 58%, var(--accent));
  opacity: 0; transition: opacity .3s;
}
html[data-ef~="contur"] .card:hover, html[data-ef~="contur"] .cat-card:hover { border-color: transparent; }
html[data-ef~="contur"] .card:hover::before, html[data-ef~="contur"] .cat-card:hover::before { opacity: 1; }
html[data-ef~="contur"] .card, html[data-ef~="contur"] .cat-card { isolation: isolate; }

/* ================================================================ 9. MONO
   Cifrele si etichetele tehnice trec pe font cu latime fixa. Efect tipografic,
   nu de culoare: face site-ul sa arate ca o fisa de utilaj. */
html[data-ef~="mono"] .eticheta, html[data-ef~="mono"] .supra,
html[data-ef~="mono"] .numar, html[data-ef~="mono"] .pret,
html[data-ef~="mono"] .la-cerere, html[data-ef~="mono"] .tel,
html[data-ef~="mono"] .specs li, html[data-ef~="mono"] .jos h4 {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
html[data-ef~="mono"] .eticheta, html[data-ef~="mono"] .supra { letter-spacing: .04em; font-size: .72rem; }
html[data-ef~="mono"] .specs li { font-size: .88rem; }

/* ================================================================ 10. MARE
   Titluri supradimensionate, spatiere stransa. Privire editorial-tehnica. */
html[data-ef~="mare"] .erou h1 {
  font-size: clamp(2.4rem, 1.2rem + 5.4vw, 4.6rem); letter-spacing: -.035em;
  font-weight: 760; line-height: 1.02;
}
html[data-ef~="mare"] .erou .plumb { font-size: clamp(1.08rem, 1rem + .45vw, 1.3rem); }
html[data-ef~="mare"] h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.5rem); letter-spacing: -.028em; }
html[data-ef~="mare"] .cap h1, html[data-ef~="mare"] .produs-info h1 { letter-spacing: -.03em; }

/* =========================================================== accesibilitate
   Cine a cerut mai putina miscare in sistem nu primeste animatii, dar
   primeste tot continutul. Reveal-ul se dezactiveaza complet. */
@media (prefers-reduced-motion: reduce) {
  html[data-ef~="reveal"] .vine { opacity: 1 !important; transform: none !important; transition: none !important; }
  html[data-ef~="zoom"] .card-poza img, html[data-ef~="zoom"] .poze img { transition: none; }
  html[data-ef~="zoom"] .card:hover .card-poza img, html[data-ef~="zoom"] .poze img:hover { transform: none; }
  html[data-ef~="linie"] .meniu a::after, html[data-ef~="linie"] .leg::after,
  html[data-ef~="linie"] .jos a::after { transition: none; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* panoul de efecte din comutator */
#comutator .ef { display: flex; gap: 5px; flex-wrap: wrap; }
#comutator .ef button[aria-pressed="true"] { background: var(--accent-pata); color: var(--accent-pe); }