/* =============================================================
   LIQUID GLASS — MATERIALE
   Spec §4: ogni taglia combina tre strati (base, lensing, specular).
   Layer: material

   Regola d'uso:  <div class="lg lg-2"> ... </div>
   `lg` porta lensing + specular + riempimento; `lg-N` sceglie la sfocatura.
   ============================================================= */

@layer material {

  /* ── Base comune ───────────────────────────────────────────
     Il riempimento e il bordo valgono anche senza backdrop-filter,
     cosi' il degrado e' graduale e mai una superficie invisibile. */
  :root[data-ds="lg"] .lg {
    position: relative;
    background-color: var(--lg-fill);
    border: 1px solid var(--lg-edge);
    box-shadow:
      inset 0 1px 0 var(--lg-spec-top),
      inset 0 -1px 0 var(--lg-spec-bottom),
      var(--lg-shadow-2);
    transition: background-color var(--lg-base) var(--lg-ease),
                border-color var(--lg-base) var(--lg-ease),
                box-shadow var(--lg-base) var(--lg-ease);
  }

  /* ── Lensing ───────────────────────────────────────────────
     Bordo rifrattivo: un conic-gradient mascherato in modo da restare
     solo sulla cornice di 1px. E' l'approssimazione in CSS puro della
     rifrazione: la spec esclude feDisplacementMap per non gravare sul
     WebGL gia' presente (§2.2). */
  :root[data-ds="lg"] .lg::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from 210deg,
      rgba(255,255,255,.55), rgba(255,255,255,.05) 25%,
      rgba(255,255,255,.42) 50%, rgba(255,255,255,.05) 75%,
      rgba(255,255,255,.55));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
  }

  /* ── Le quattro taglie ─────────────────────────────────── */
  :root[data-ds="lg"] .lg-1 { backdrop-filter: blur(var(--lg-1)) saturate(var(--lg-sat)); -webkit-backdrop-filter: blur(var(--lg-1)) saturate(var(--lg-sat)); border-radius: var(--lg-r-chip); }
  :root[data-ds="lg"] .lg-2 { backdrop-filter: blur(var(--lg-2)) saturate(var(--lg-sat)); -webkit-backdrop-filter: blur(var(--lg-2)) saturate(var(--lg-sat)); border-radius: var(--lg-r-card);  box-shadow: inset 0 1px 0 var(--lg-spec-top), inset 0 -1px 0 var(--lg-spec-bottom), var(--lg-shadow-2); }
  :root[data-ds="lg"] .lg-3 { backdrop-filter: blur(var(--lg-3)) saturate(var(--lg-sat)); -webkit-backdrop-filter: blur(var(--lg-3)) saturate(var(--lg-sat)); border-radius: var(--lg-r-panel); box-shadow: inset 0 1px 0 var(--lg-spec-top), inset 0 -1px 0 var(--lg-spec-bottom), var(--lg-shadow-3); }
  :root[data-ds="lg"] .lg-4 { backdrop-filter: blur(var(--lg-4)) saturate(var(--lg-sat)); -webkit-backdrop-filter: blur(var(--lg-4)) saturate(var(--lg-sat)); border-radius: var(--lg-r-modal); box-shadow: inset 0 1px 0 var(--lg-spec-top), inset 0 -1px 0 var(--lg-spec-bottom), var(--lg-shadow-4); }

  /* Pill: raggio pieno, taglia 1 */
  :root[data-ds="lg"] .lg-pill { border-radius: var(--lg-r-pill); }

  /* ── Stato interattivo ─────────────────────────────────────
     Solo colore ed elevazione: nessuna trasformazione che sposti
     il layout degli elementi vicini. */
  :root[data-ds="lg"] a.lg:hover,
  :root[data-ds="lg"] button.lg:hover,
  :root[data-ds="lg"] .lg-interactive:hover {
    background-color: var(--lg-fill-strong);
    border-color: var(--lg-edge-strong);
  }
  :root[data-ds="lg"] .lg:focus-visible,
  :root[data-ds="lg"] .lg-interactive:focus-visible {
    outline: 2px solid #7c5cff;
    outline-offset: 2px;
  }

  /* ── FALLBACK 1: browser senza backdrop-filter ─────────────
     Il vetro diventa una superficie solida: mai testo su sfondo mosso
     e illeggibile. (Criterio di accettazione 3 della spec.) */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root[data-ds="lg"] .lg {
      background-color: rgba(12, 16, 30, 0.92);
    }
    :root[data-ds="lg"] .lg::before { opacity: .35; }
  }

  /* ── FALLBACK 2: utente che chiede meno trasparenza ────────
     prefers-reduced-transparency e' onorato oggi in 1 file su 20:
     qui vale per l'intero materiale in un colpo solo. */
  @media (prefers-reduced-transparency: reduce) {
    :root[data-ds="lg"] .lg {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background-color: rgba(12, 16, 30, 0.94);
    }
    :root[data-ds="lg"] .lg::before { display: none; }
  }

  /* ── FALLBACK 3: motion ridotto ─────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    :root[data-ds="lg"] .lg { transition: none; }
  }

  /* ── Contrasto forzato ─────────────────────────────────── */
  @media (forced-colors: active) {
    :root[data-ds="lg"] .lg {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border: 1px solid CanvasText;
      background-color: Canvas;
    }
    :root[data-ds="lg"] .lg::before { display: none; }
  }
}