/* ════════════════════════════════════════════════════════════════════════════
   FINHANCE — COSMIC FINANCE / LIQUID GLASS (formula esatta)
   Una sola classe principale .liquid-glass usata su tutti gli elementi vetro
   (navbar, card, riquadri sopra video, pillole).
   Prefissi -webkit per Safari iOS.
════════════════════════════════════════════════════════════════════════════ */

.liquid-glass {
    background: rgba(255, 255, 255, 0.01);
    background-blend-mode: luminosity;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border: none;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}
.liquid-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.4px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.45) 0%,
        rgba(255, 255, 255, 0.15) 20%,
        rgba(255, 255, 255, 0.00) 40%,
        rgba(255, 255, 255, 0.00) 60%,
        rgba(255, 255, 255, 0.15) 80%,
        rgba(255, 255, 255, 0.45) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

/* Hover: leggero alone + bordo più visibile */
.liquid-glass.is-hoverable { transition: background 280ms var(--ease-soft); }
.liquid-glass.is-hoverable:hover { background: rgba(255, 255, 255, 0.05); }

/* Fallback browser senza backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .liquid-glass { background: rgba(20, 22, 40, 0.55); }
}