/* Materiale vetro reattivo: le variabili vengono aggiornate da glass-material.js. */
[data-live-glass] {
  isolation: isolate;
  /* Il profilo deve essere disegnato soltanto dal layer dinamico: il bordo
     originario resterebbe fisso e renderebbe opaco il cambio di contesto. */
  border-color: transparent !important;
}

[data-live-glass] > .glass-material-edge {
  position: absolute;
  z-index: 0;
  inset: 0;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  opacity: .98;
  background:
    linear-gradient(180deg, var(--glass-edge-top, rgba(183, 190, 255, .78)), transparent 23%, transparent 75%, var(--glass-edge-bottom, rgba(255, 214, 190, .54))) border-box,
    linear-gradient(90deg, var(--glass-edge-left, rgba(159, 169, 255, .52)), transparent 28%, transparent 72%, var(--glass-edge-right, rgba(255, 207, 181, .42))) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  box-shadow: inset 0 1px 0 var(--glass-specular, rgba(255, 255, 255, .55)), inset 0 -1px 0 var(--glass-edge-bottom, rgba(188, 194, 255, .32));
  transition: background .22s linear, box-shadow .22s linear;
}

[data-live-glass] > .glass-material-edge::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: .20;
  background: radial-gradient(72% 125% at var(--glass-light-x, 50%) var(--glass-light-y, 0%), var(--glass-specular, rgba(255, 255, 255, .7)), transparent 58%);
  mix-blend-mode: screen;
  transition: background .22s linear;
}

[data-live-glass] > *:not(.glass-material-edge) { position: relative; z-index: 1; }

/* Barra: un vetro più spesso non è una cornice più luminosa. Qui i riflessi
   restano sotto ai contenuti, prendono la posizione del punto luce calcolato
   dallo script e lasciano il profilo cromatico al layer campionato. */
.nav-inner[data-live-glass] {
  background-color: color-mix(in srgb, var(--glass-edge-top, #d8dcff) 6%, transparent) !important;
  backdrop-filter: blur(25px) saturate(1.22) brightness(1.02) !important;
  -webkit-backdrop-filter: blur(25px) saturate(1.22) brightness(1.02) !important;
}

.nav-inner[data-live-glass]::before,
.nav-inner[data-live-glass]::after {
  content: "" !important;
  position: absolute;
  z-index: 0;
  inset: 0 !important;
  height: auto !important;
  border-radius: inherit;
  pointer-events: none;
}

.nav-inner[data-live-glass]::before {
  background:
    radial-gradient(38% 150% at var(--glass-light-x, 50%) var(--glass-light-y, 0%), var(--glass-specular, rgba(255,255,255,.6)), transparent 56%),
    linear-gradient(108deg, transparent 24%, color-mix(in srgb, var(--glass-edge-left, #c5caff) 23%, transparent) 43%, transparent 57%),
    linear-gradient(286deg, transparent 50%, color-mix(in srgb, var(--glass-edge-right, #ffe0cb) 20%, transparent) 77%, transparent);
  mix-blend-mode: screen;
  opacity: .34;
  transition: background .22s linear, opacity .22s linear;
}

.nav-inner[data-live-glass]::after {
  padding: 1px;
  background:
    linear-gradient(104deg, var(--glass-edge-left, rgba(182,190,255,.62)), transparent 19% 66%, var(--glass-edge-right, rgba(255,214,190,.48))),
    linear-gradient(180deg, var(--glass-specular, rgba(255,255,255,.8)), transparent 19% 76%, var(--glass-edge-bottom, rgba(188,194,255,.42)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .62;
  transition: background .22s linear, opacity .22s linear;
}

.nav-inner[data-live-glass] > .glass-material-edge { z-index: 2; opacity: .72; }

@media (prefers-color-scheme: dark) {
  .nav-inner[data-live-glass] {
    background-color: color-mix(in srgb, var(--glass-edge-top, #6970c7) 9%, rgba(17,18,28,.82)) !important;
    backdrop-filter: blur(27px) saturate(1.14) brightness(.92) !important;
    -webkit-backdrop-filter: blur(27px) saturate(1.14) brightness(.92) !important;
  }
  .nav-inner[data-live-glass]::before { opacity: .24; }
  .nav-inner[data-live-glass]::after { opacity: .48; }
}

@media (prefers-reduced-motion: reduce) {
  [data-live-glass] > .glass-material-edge,
  [data-live-glass] > .glass-material-edge::after,
  .nav-inner[data-live-glass]::before,
  .nav-inner[data-live-glass]::after { transition: none; }
}