/* Gruppo CORIME – barra in alto "vetro liquido"
   --------------------------------------------------
   Attiva con <html ... data-barra="liquida">. Per la barra classica: data-barra="classica"
   (oppure, solo per provare, aggiungi ?barra=classica all'indirizzo).
   Su Chrome, Edge e Opera si aggiunge la rifrazione ai bordi (assets/js/site.js);
   su Safari e Firefox resta lo stesso vetro, senza distorsione.
*/

html[data-barra="liquida"] .testata {
  background: transparent; border-bottom: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  top: 0; padding: 12px var(--margine) 0;
  pointer-events: none; /* solo la pillola riceve i clic */
}
html[data-barra="liquida"] .testata::after { display: none; }

/* la pillola di vetro */
html[data-barra="liquida"] .testata-in {
  pointer-events: auto; position: relative; isolation: isolate;
  max-width: calc(var(--larghezza) - 2 * var(--margine) + 36px);
  padding: 10px 12px 10px 18px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.06) 100%);
  backdrop-filter: blur(3px) saturate(1.7);
  -webkit-backdrop-filter: blur(3px) saturate(1.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),         /* luce sul bordo alto */
    inset 0 -1px 0 rgba(255,255,255,.35),        /* riflesso sul bordo basso */
    inset 0 0 0 1px rgba(255,255,255,.38),       /* contorno del vetro */
    inset 0 -10px 22px -14px rgba(255,255,255,.7),
    0 10px 34px rgba(18,28,40,.14), 0 1px 3px rgba(18,28,40,.10);
  transition: background .4s ease, box-shadow .4s ease;
}
/* riflesso speculare morbido in alto a sinistra */
html[data-barra="liquida"] .testata-in::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background:
    radial-gradient(120% 140% at 12% -30%, rgba(255,255,255,.55), transparent 45%),
    radial-gradient(80% 120% at 92% 140%, rgba(255,255,255,.22), transparent 50%);
}
/* sottile filo rosso-verde lungo il bordo inferiore, dentro la pillola */
html[data-barra="liquida"] .testata-in::after {
  content: ""; position: absolute; left: 26px; right: 26px; bottom: 0; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--rosso) 18%, var(--rosso) 50%, var(--verde) 50%, var(--verde) 82%, transparent);
  opacity: .55;
}
/* con rifrazione (Chrome, Edge, Opera): il vetro piega ciò che sta sotto, come una lente */
html[data-barra="liquida"].rifrazione .testata-in {
  backdrop-filter: url(#vetro-liquido) blur(1.5px) saturate(1.7);
}

/* sopra le fasce scure: vetro fumé */
html[data-barra="liquida"] .testata.scura { background: transparent; }
html[data-barra="liquida"] .testata.scura .testata-in {
  background: linear-gradient(180deg, rgba(30,40,46,.55) 0%, rgba(16,22,26,.35) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(255,255,255,.12), inset 0 -10px 22px -14px rgba(255,255,255,.18),
    0 10px 34px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.3);
}
html[data-barra="liquida"] .testata.scura .testata-in::before {
  background: radial-gradient(120% 140% at 12% -30%, rgba(255,255,255,.16), transparent 45%);
}

/* menu del telefono: un pannello dello stesso vetro sotto la pillola */
@media (max-width: 1020px) {
  html[data-barra="liquida"] .testata { padding: 10px max(12px, calc(var(--margine) - 8px)) 0; }
  html[data-barra="liquida"] .testata-in { padding: 8px 8px 8px 14px; border-radius: 24px; }
  html[data-barra="liquida"] .tendina:not([hidden]) {
    pointer-events: auto; margin-top: 8px; padding: 6px 20px 10px; border: 0; border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.55));
    backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.4), 0 14px 40px rgba(18,28,40,.16);
  }
  html[data-barra="liquida"] .testata.scura .tendina:not([hidden]) {
    background: linear-gradient(180deg, rgba(30,40,46,.82), rgba(16,22,26,.7));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.1), 0 14px 40px rgba(0,0,0,.4);
  }
}

/* stile antracite: il vetro parte già fumé */
html[data-barra="liquida"][data-tema="c"] .testata-in {
  background: linear-gradient(180deg, rgba(40,50,54,.5) 0%, rgba(18,23,25,.3) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.1), 0 10px 34px rgba(0,0,0,.4);
}

/* voci del menu più decise, perché il vetro lascia vedere ciò che passa sotto */
html[data-barra="liquida"] .menu a { color: var(--grafite); font-weight: 600; }
html[data-barra="liquida"] .testata.scura .menu a { color: #E3E9E6; }
html[data-barra="liquida"] .marchio-testo, html[data-barra="liquida"] .menu a { text-shadow: 0 0 10px rgba(255,255,255,.7); }
html[data-barra="liquida"] .testata.scura .marchio-testo, html[data-barra="liquida"] .testata.scura .menu a { text-shadow: 0 0 10px rgba(0,0,0,.5); }

/* ---------- Safari: illusione della lente ----------
   Safari non supporta la distorsione vera. Qui il vetro è fatto da due strati:
   uno limpido su tutta la pillola e un anello lungo il bordo più sfocato e luminoso,
   come lo spessore bombato del vetro; in più un riflesso curvo e una lieve frangia di colore. */
html[data-barra="liquida"].vetro-safari .testata-in {
  isolation: auto; backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: box-shadow .4s ease; /* Safari sbaglia la transizione fra sfondi a più strati */
  background:
    linear-gradient(90deg, transparent, var(--rosso) 18%, var(--rosso) 50%, var(--verde) 50%, var(--verde) 82%, transparent) center bottom / calc(100% - 52px) 2px no-repeat,
    radial-gradient(120% 140% at 12% -30%, rgba(255,255,255,.5), transparent 45%),
    radial-gradient(80% 120% at 92% 140%, rgba(255,255,255,.2), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.06) 100%);
  box-shadow:
    inset 0 2px 1px -1px rgba(255,255,255,1),          /* riflesso curvo sul bordo alto */
    inset 0 -2px 5px -2px rgba(255,255,255,.75),        /* riflesso sul bordo basso */
    inset 2px 0 2px -1px rgba(255,60,90,.22),           /* frangia calda a sinistra */
    inset -2px 0 2px -1px rgba(40,150,255,.22),         /* frangia fredda a destra */
    inset 0 0 0 1px rgba(255,255,255,.45),
    0 10px 34px rgba(18,28,40,.14), 0 1px 3px rgba(18,28,40,.10);
}
html[data-barra="liquida"].vetro-safari .testata-in::before,
html[data-barra="liquida"].vetro-safari .testata-in::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: none; opacity: 1; left: 0; right: 0; height: auto;
}
/* strato limpido su tutta la pillola */
html[data-barra="liquida"].vetro-safari .testata-in::before {
  -webkit-backdrop-filter: blur(3px) saturate(1.7); backdrop-filter: blur(3px) saturate(1.7);
}
/* anello lungo il bordo: più sfocato e luminoso, come il vetro che si incurva */
html[data-barra="liquida"].vetro-safari .testata-in::after {
  padding: 9px; box-sizing: border-box;
  -webkit-backdrop-filter: blur(9px) saturate(2.1) brightness(1.08); backdrop-filter: blur(9px) saturate(2.1) brightness(1.08);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* fumé sopra le fasce scure e nello stile antracite */
html[data-barra="liquida"].vetro-safari .testata.scura .testata-in,
html[data-barra="liquida"][data-tema="c"].vetro-safari .testata-in {
  background:
    linear-gradient(90deg, transparent, var(--rosso) 18%, var(--rosso) 50%, var(--verde) 50%, var(--verde) 82%, transparent) center bottom / calc(100% - 52px) 2px no-repeat,
    radial-gradient(120% 140% at 12% -30%, rgba(255,255,255,.14), transparent 45%),
    linear-gradient(180deg, rgba(30,40,46,.55) 0%, rgba(16,22,26,.35) 100%);
  box-shadow:
    inset 0 2px 1px -1px rgba(255,255,255,.35), inset 0 -2px 5px -2px rgba(255,255,255,.12),
    inset 2px 0 2px -1px rgba(255,60,90,.2), inset -2px 0 2px -1px rgba(40,150,255,.2),
    inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 34px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.3);
}
html[data-barra="liquida"].vetro-safari .testata.scura .testata-in::after,
html[data-barra="liquida"][data-tema="c"].vetro-safari .testata-in::after {
  -webkit-backdrop-filter: blur(9px) saturate(1.6) brightness(1.15); backdrop-filter: blur(9px) saturate(1.6) brightness(1.15);
}
/* Safari a volte non ridisegna il colore dei testi in transizione sopra i livelli di vetro */
html.vetro-safari .menu a, html.vetro-safari .marchio-testo span, html.vetro-safari .hamb { transition: none; }

/* =====================================================================
   PIÈ DI PAGINA IN VETRO
   Attivo con <html ... data-piede="vetro">; per quello classico data-piede="classico"
   (solo per provare: ?piede=classico nell'indirizzo).
   ===================================================================== */
html[data-piede="vetro"] .piede {
  background: var(--placca); overflow: hidden; isolation: isolate;
  padding: clamp(60px, 8vw, 110px) var(--margine) clamp(24px, 3vw, 36px);
}
html[data-piede="vetro"] .filo { display: none; }

/* il simbolo del logo dietro il vetro, intero e allineato come nell'originale; "respira" piano */
html[data-piede="vetro"] .piede-fondo { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
html[data-piede="vetro"] .pf-logo {
  position: absolute; left: 50%; top: 56%; width: min(400px, 40vw); height: auto; opacity: .85;
  transform: translate(-50%, -50%); animation: respira 18s ease-in-out infinite alternate;
}
html[data-piede="vetro"] .pf-rosso { fill: var(--rosso); }
html[data-piede="vetro"] .pf-verde { fill: var(--verde); }
html[data-piede="vetro"] .piede:not(.in-vista) .pf-logo { animation-play-state: paused; }
@keyframes respira { from { transform: translate(-50%, -50%) scale(.95); } to { transform: translate(-50%, -50%) scale(1.04); } }

/* il pannello di vetro */
html[data-piede="vetro"] .piede-in {
  max-width: var(--larghezza); margin: 0 auto; border-radius: 34px;
  padding: clamp(32px, 4.5vw, 54px) clamp(22px, 4.5vw, 56px) clamp(22px, 2.5vw, 30px);
  background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.32) 100%);
  backdrop-filter: blur(30px) saturate(1.4); -webkit-backdrop-filter: blur(30px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.4),
    inset 0 0 0 1px rgba(255,255,255,.45), inset 0 -24px 40px -30px rgba(255,255,255,.8),
    0 24px 60px rgba(18,28,40,.14), 0 2px 6px rgba(18,28,40,.06);
  color: var(--ardesia);
}
html[data-piede="vetro"] .piede-in::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(90% 120% at 8% -20%, rgba(255,255,255,.55), transparent 40%);
}
html[data-piede="vetro"] .piede-in > * { position: relative; }
html[data-piede="vetro"] .piede-base { border-top-color: rgba(30,36,40,.12); }
html[data-piede="vetro"] .piede-gruppo a { color: #3E4851; }
html[data-piede="vetro"] .piede-gruppo a:hover { color: var(--grafite); }
/* con rifrazione (Chrome, Edge, Opera): i bordi del pannello piegano il logo che sta dietro */
html[data-piede="vetro"].rifrazione-piede .piede-in {
  backdrop-filter: url(#vetro-piede) blur(28px) saturate(1.4);
}

/* stile antracite: pannello fumé */
html[data-piede="vetro"][data-tema="c"] .piede { background: var(--placca); }
html[data-piede="vetro"][data-tema="c"] .piede-in {
  background: linear-gradient(180deg, rgba(30,40,44,.62), rgba(18,23,25,.5));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.1), 0 24px 60px rgba(0,0,0,.45);
}
html[data-piede="vetro"][data-tema="c"] .piede-in::before { background: radial-gradient(90% 120% at 8% -20%, rgba(255,255,255,.12), transparent 40%); }
html[data-piede="vetro"][data-tema="c"] .piede-gruppo a { color: #B8C3BE; }
html[data-piede="vetro"][data-tema="c"] .piede-base { border-top-color: rgba(255,255,255,.12); }

/* Safari: stessa illusione della lente usata nella barra */
html[data-piede="vetro"].vetro-safari .piede-in {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.32) 100%);
  box-shadow:
    inset 0 2px 1px -1px rgba(255,255,255,1), inset 0 -2px 6px -2px rgba(255,255,255,.8),
    inset 3px 0 3px -2px rgba(255,60,90,.22), inset -3px 0 3px -2px rgba(40,150,255,.22),
    inset 0 0 0 1px rgba(255,255,255,.5), 0 24px 60px rgba(18,28,40,.14), 0 2px 6px rgba(18,28,40,.06);
}
html[data-piede="vetro"].vetro-safari .piede-in::before {
  z-index: -1;
  background: radial-gradient(90% 120% at 8% -20%, rgba(255,255,255,.55), transparent 40%);
  -webkit-backdrop-filter: blur(30px) saturate(1.4); backdrop-filter: blur(30px) saturate(1.4);
}
html[data-piede="vetro"].vetro-safari .piede-in::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  padding: 16px; box-sizing: border-box;
  -webkit-backdrop-filter: blur(34px) saturate(1.9) brightness(1.1); backdrop-filter: blur(34px) saturate(1.9) brightness(1.1);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
html[data-piede="vetro"].vetro-safari .piede-in { isolation: auto; }

@media (prefers-reduced-motion: reduce) {
  html[data-piede="vetro"] .pf-logo { animation: none; }
}

@media (max-width: 760px) {
  html[data-piede="vetro"] .pf-logo { width: 80vw; top: 54%; opacity: .75; }
}