/* Il vetro delle lettere del primo schermo, senza liquido: lo stesso materiale per tutti i bottoni. */
:root {
  --glass-body: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .05) 48%, rgba(255, 255, 255, .02) 54%, rgba(255, 255, 255, .1));
  /* Due strisce di luce di traverso, e la luce che si raccoglie sul fondo del vetro. */
  --glass-streak: linear-gradient(112deg, transparent 14%, rgba(255, 255, 255, .15) 22%, rgba(255, 255, 255, .03) 30%, transparent 34%, transparent 66%, rgba(255, 255, 255, .08) 72%, transparent 78%);
  --glass-caustic: radial-gradient(62% 46% at 50% 112%, rgba(255, 255, 255, .3), transparent 100%);
  --glass-text: linear-gradient(180deg, #fff 0%, #f7f7fb 46%, #cdd2dc 54%, #fafafd 100%);
  --glass-depth:
    inset 0 1px 1px rgba(255, 255, 255, .85),
    inset 0 -2px 3px rgba(255, 255, 255, .24),
    inset 3px 0 6px -3px rgba(255, 255, 255, .34),
    inset -3px 0 6px -3px rgba(255, 255, 255, .34),
    0 1px 0 rgba(255, 255, 255, .3),
    0 3px 0 -1px rgba(205, 210, 225, .2),
    0 9px 20px rgba(0, 0, 0, .5),
    0 2px 5px rgba(0, 0, 0, .4);
  --glass-lit:
    inset 0 1px 1px rgba(255, 255, 255, .95),
    inset 0 -2px 3px rgba(255, 255, 255, .34),
    inset 3px 0 7px -3px rgba(255, 255, 255, .5),
    inset -3px 0 7px -3px rgba(255, 255, 255, .5),
    0 1px 0 rgba(255, 255, 255, .4),
    0 4px 0 -1px rgba(205, 210, 225, .24),
    0 13px 26px rgba(0, 0, 0, .55),
    0 3px 7px rgba(0, 0, 0, .4);
  /* Scelto: resta trasparente, ma una luce rossa sta dietro al vetro. */
  --glass-picked:
    inset 0 1px 1px rgba(255, 255, 255, .9),
    inset 0 -2px 3px rgba(255, 190, 175, .4),
    inset 0 0 18px rgba(255, 42, 26, .62),
    0 1px 0 rgba(255, 255, 255, .3),
    0 3px 0 -1px rgba(255, 130, 110, .3),
    0 0 24px rgba(255, 42, 26, .5),
    0 9px 20px rgba(0, 0, 0, .5);
}

:is(.skip, .chrome-cta, .langs a, #guide, .compare-tabs button, .compare-label, .a-choose button,
    .contact-links a, .contact-form .radio span, .send, .send-options button, .send-options a, .cookie-actions button) {
  background: var(--glass-text), var(--glass-streak), var(--glass-caustic), var(--glass-body), linear-gradient(var(--tint, transparent), var(--tint, transparent));
  -webkit-background-clip: text, padding-box, padding-box, padding-box, padding-box;
  background-clip: text, padding-box, padding-box, padding-box, padding-box;
  color: transparent;
  border: var(--edge-width, 1px) solid var(--edge, rgba(255, 255, 255, .34));
  border-top-color: var(--edge-top, rgba(255, 255, 255, .62));
  border-radius: var(--radius, 13px);
  box-shadow: var(--shadow, var(--glass-depth));
  -webkit-backdrop-filter: blur(9px) saturate(1.5) brightness(1.08);
  backdrop-filter: blur(9px) saturate(1.5) brightness(1.08);
  text-decoration: none;
  transition: transform .22s var(--ease-out), box-shadow .22s, border-color .22s;
}

/* Il riflesso alto e il lampo di luce che attraversa il vetro. */
:is(.chrome-cta, .langs a, .compare-tabs button, .a-choose button, .contact-links a, .contact-form .radio span, .send, .send-options button, .send-options a, .cookie-actions button) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
:is(#guide, .chrome-cta, .langs a, .compare-tabs button, .a-choose button, .contact-links a, .contact-form .radio span, .send, .send-options button, .send-options a, .cookie-actions button)::before {
  content: ""; position: absolute; z-index: -1; left: 3px; right: 3px; top: 2px; height: 46%;
  border-radius: 10px 10px 40% 40% / 10px 10px 8px 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .36), rgba(255, 255, 255, .04));
  pointer-events: none;
}
:is(#guide, .chrome-cta, .langs a, .compare-tabs button, .a-choose button, .contact-links a, .contact-form .radio span, .send, .send-options button, .send-options a, .cookie-actions button)::after {
  content: ""; position: absolute; z-index: -1; inset: 0 auto 0 -45%; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg);
  transition: left .75s var(--ease-out);
  pointer-events: none;
}

:is(#guide, .chrome-cta, .langs a, .compare-tabs button, .a-choose button, .contact-links a, .send, .send-options button, .send-options a, .cookie-actions button):hover,
.radio:hover input + span {
  transform: translateY(-2px);
  --edge: rgba(255, 255, 255, .6);
  --shadow: var(--glass-lit);
}
:is(#guide, .chrome-cta, .langs a, .compare-tabs button, .a-choose button, .contact-links a, .send, .send-options button, .send-options a, .cookie-actions button):hover::after,
.radio:hover input + span::after { left: 125%; }
:is(#guide, .chrome-cta, .langs a, .compare-tabs button, .a-choose button, .contact-links a, .send, .send-options button, .send-options a, .cookie-actions button):active {
  transform: translateY(1px) scale(.99);
  --shadow: var(--glass-depth);
}

.compare-tabs [aria-pressed="true"], .a-choose [aria-pressed="true"],
.contact-form .radio input:checked + span,
html[lang="it"] .langs [data-lang-link="it"], html[lang="en"] .langs [data-lang-link="en"] {
  --edge: rgba(255, 150, 130, .85);
  --edge-top: rgba(255, 190, 175, .95);
  --shadow: var(--glass-picked);
}
:is(.compare-tabs [aria-pressed="true"], .a-choose [aria-pressed="true"]):hover,
.radio:hover input:checked + span { --shadow: var(--glass-picked); }

/* Misure: il vetro ha bisogno di più spazio del bordo sottile di prima. */
.langs a { padding: 5px 9px; --radius: 9px; font-size: .72rem; }
.chrome-cta { padding: .66em 1.15em; }
.send { min-height: 58px; --radius: 16px; --edge-width: 1.5px; --shadow: var(--glass-depth), 0 0 34px rgba(255, 42, 26, .32); }
.send:hover { --shadow: var(--glass-lit), 0 0 46px rgba(255, 42, 26, .5); }

/* Sopra i finti siti chiari il vetro è più scuro, altrimenti la scritta non si legge. */
:is(.skip, #guide, .compare-label) { --tint: rgba(8, 8, 14, .58); }
.skip:focus { transform: none; }
/* La guida è fissa in basso: sta qui fuori, non può diventare relative come gli altri. */
#guide { --radius: 2em; overflow: hidden; isolation: isolate; transition: opacity .35s, transform .22s var(--ease-out), box-shadow .22s, border-color .22s; }
/* I due tasti che spiegano il sito attirano l'occhio con un lampo ogni tanto. */
#guide::after, .compare-play::after { animation: glass-glint 5.5s ease-in-out infinite; }
.compare-play { --edge: rgba(255, 150, 130, .7); }
@keyframes glass-glint { 0%, 74% { left: -45%; } 100% { left: 125%; } }
#guide span { color: transparent; }
#guide i { border-color: #fff; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .7)); }
.compare-label { --radius: 8px; }
.is-after-label { --edge: rgba(255, 150, 130, .85); --edge-top: rgba(255, 190, 175, .95); --shadow: var(--glass-picked); }

/* Prima e dopo: la cornice è una lastra spessa, la maniglia una lente. */
.compare::after {
  content: ""; position: absolute; inset: -7px; z-index: 2; border-radius: 19px; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .36);
  border-top-color: rgba(255, 255, 255, .66);
  box-shadow:
    inset 0 0 0 6px rgba(255, 255, 255, .07),
    inset 0 1px 1px rgba(255, 255, 255, .7),
    inset 0 0 0 7px rgba(255, 255, 255, .22),
    0 3px 0 -1px rgba(205, 210, 225, .18),
    0 18px 44px rgba(0, 0, 0, .55);
}
.compare-handle { z-index: 3; }
.compare-handle::before {
  width: 6px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .1) 30%, rgba(255, 255, 255, .06) 70%, rgba(255, 255, 255, .55));
  box-shadow: 0 0 0 1px rgba(10, 10, 16, .32), 0 0 14px rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(4px) brightness(1.15);
  backdrop-filter: blur(4px) brightness(1.15);
}
.compare-handle i {
  width: 46px; height: 46px; margin-top: -23px;
  background:
    radial-gradient(60% 34% at 40% 18%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 100%),
    radial-gradient(70% 34% at 58% 92%, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .02) 52%, rgba(255, 255, 255, .26) 100%),
    rgba(8, 8, 14, .18);
  border: 1px solid rgba(255, 255, 255, .62);
  box-shadow:
    inset 0 0 8px rgba(255, 255, 255, .5),
    inset 0 -3px 6px rgba(255, 255, 255, .22),
    0 3px 0 -1px rgba(205, 210, 225, .24),
    0 10px 22px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(3px) saturate(1.7) brightness(1.2);
  backdrop-filter: blur(3px) saturate(1.7) brightness(1.2);
}
.compare-handle i::before { font-size: 17px; text-shadow: 0 1px 3px rgba(0, 0, 0, .75); }

/* Chi chiede meno trasparenza ha comunque bottoni ben leggibili. */
@media (prefers-reduced-transparency: reduce) {
  :is(.skip, .chrome-cta, .langs a, #guide, .compare-tabs button, .compare-label, .a-choose button,
      .contact-links a, .contact-form .radio span, .send, .send-options button, .send-options a, .cookie-actions button) {
    background: #171924;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #fff;
  }
  #guide span { color: #fff; }
}