/*
 * Babajaga V2 - lente ottica inferiore del viewport.
 *
 * Maschera, velo e backdrop-filter condividono lo stesso livello: il filtro
 * legge quindi la pagina dietro la lente. Il componente non intercetta input
 * e resta limitato ai desktop con puntatore preciso.
 */

.viewport-lens-v2 {
    --lente-viewport-altezza: clamp(14rem, 32vh, 23rem);
    --lente-viewport-sfocatura: 10px;
    --lente-viewport-saturazione: 0.96;
    --lente-viewport-luminosita: 1.03;
    --lente-viewport-livello: 80;
    --lente-viewport-vetro: color-mix(
        in srgb,
        var(--colore-carta-fredda) 12%,
        transparent
    );
    --lente-viewport-vetro-profondo: color-mix(
        in srgb,
        var(--colore-carta-fredda) 24%,
        transparent
    );
    display: none;
}

@media (min-width: 64rem) and (hover: hover) and (pointer: fine) {
    .viewport-lens-v2 {
        position: fixed;
        z-index: var(--lente-viewport-livello);
        inset: auto -2vw -1px;
        display: block;
        block-size: var(--lente-viewport-altezza);
        inline-size: 104vw;
        overflow: hidden;
        box-sizing: border-box;
        background:
            radial-gradient(
                ellipse 78% 58% at 50% 118%,
                var(--colore-lente-viewport-ombra),
                transparent 74%
            ),
            linear-gradient(
                to bottom,
                transparent 0%,
                var(--lente-viewport-vetro) 46%,
                var(--lente-viewport-vetro-profondo) 100%
            ),
            linear-gradient(to bottom, transparent, var(--colore-lente-viewport-velo));
        pointer-events: none;
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            rgb(0 0 0 / 6%) 18%,
            rgb(0 0 0 / 28%) 42%,
            rgb(0 0 0 / 72%) 72%,
            var(--colore-maschera-opaca) 100%
        );
        mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            rgb(0 0 0 / 6%) 18%,
            rgb(0 0 0 / 28%) 42%,
            rgb(0 0 0 / 72%) 72%,
            var(--colore-maschera-opaca) 100%
        );
        -webkit-backdrop-filter:
            blur(var(--lente-viewport-sfocatura))
            saturate(var(--lente-viewport-saturazione))
            brightness(var(--lente-viewport-luminosita));
        backdrop-filter:
            blur(var(--lente-viewport-sfocatura))
            saturate(var(--lente-viewport-saturazione))
            brightness(var(--lente-viewport-luminosita));
    }
}

@media print, (forced-colors: active) {
    .viewport-lens-v2 {
        display: none !important;
    }
}