.nexpi-glitch-link {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
}

.nexpi-glitch-image {
    position: relative;
    display: inline-block;
    width: var(--ngi-width, 100%);
    max-width: var(--ngi-max-width, 640px);
    overflow: hidden;
    border-radius: var(--ngi-radius, 0px);
    line-height: 0;
    isolation: isolate;
}

.nexpi-glitch-image__base {
    display: block;
    width: 100%;
    height: auto;
    object-fit: var(--ngi-fit, cover);
    border-radius: inherit;
}

.nexpi-glitch-image__layer,
.nexpi-glitch-image__scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
}

.nexpi-glitch-image__layer {
    background-image: var(--ngi-image);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: var(--ngi-opacity, 0.75);
    z-index: 2;
    mix-blend-mode: screen;
    will-change: clip-path, transform, opacity;
}

.nexpi-glitch-image__layer--red {
    transform: translateX(calc(var(--ngi-shift, 5px) * -1));
    filter: drop-shadow(calc(var(--ngi-shift, 5px) * -1) 0 0 rgba(255, 0, 68, 0.85));
}

.nexpi-glitch-image__layer--cyan {
    transform: translateX(var(--ngi-shift, 5px));
    filter: drop-shadow(var(--ngi-shift, 5px) 0 0 rgba(0, 255, 255, 0.85));
}

.nexpi-glitch-image__layer--white {
    opacity: calc(var(--ngi-opacity, 0.75) * 0.55);
    mix-blend-mode: lighten;
}

.nexpi-glitch-image__scanlines {
    z-index: 3;
    opacity: var(--ngi-scanlines, 0.22);
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.35) 0,
        rgba(255, 255, 255, 0.35) 1px,
        rgba(0, 0, 0, 0.18) 2px,
        rgba(0, 0, 0, 0.18) 4px
    );
    mix-blend-mode: overlay;
}

.nexpi-glitch-image--off .nexpi-glitch-image__layer,
.nexpi-glitch-image--off .nexpi-glitch-image__scanlines {
    display: none;
}

.nexpi-glitch-image:not(.nexpi-glitch-image--rgb) .nexpi-glitch-image__layer--red,
.nexpi-glitch-image:not(.nexpi-glitch-image--rgb) .nexpi-glitch-image__layer--cyan {
    display: none;
}

.nexpi-glitch-image--always .nexpi-glitch-image__layer--red {
    animation: nexpi-glitch-red var(--ngi-speed, 1.2s) infinite steps(2, end);
}

.nexpi-glitch-image--always .nexpi-glitch-image__layer--cyan {
    animation: nexpi-glitch-cyan calc(var(--ngi-speed, 1.2s) * 1.15) infinite steps(2, end);
}

.nexpi-glitch-image--always .nexpi-glitch-image__layer--white {
    animation: nexpi-glitch-white calc(var(--ngi-speed, 1.2s) * 0.85) infinite steps(2, end);
}

.nexpi-glitch-image--hover .nexpi-glitch-image__layer,
.nexpi-glitch-image--hover .nexpi-glitch-image__scanlines {
    opacity: 0;
}

.nexpi-glitch-image--hover:hover .nexpi-glitch-image__scanlines,
.nexpi-glitch-link:focus .nexpi-glitch-image--hover .nexpi-glitch-image__scanlines {
    opacity: var(--ngi-scanlines, 0.22);
}

.nexpi-glitch-image--hover:hover .nexpi-glitch-image__layer--red,
.nexpi-glitch-link:focus .nexpi-glitch-image--hover .nexpi-glitch-image__layer--red {
    opacity: var(--ngi-opacity, 0.75);
    animation: nexpi-glitch-red var(--ngi-speed, 1.2s) infinite steps(2, end);
}

.nexpi-glitch-image--hover:hover .nexpi-glitch-image__layer--cyan,
.nexpi-glitch-link:focus .nexpi-glitch-image--hover .nexpi-glitch-image__layer--cyan {
    opacity: var(--ngi-opacity, 0.75);
    animation: nexpi-glitch-cyan calc(var(--ngi-speed, 1.2s) * 1.15) infinite steps(2, end);
}

.nexpi-glitch-image--hover:hover .nexpi-glitch-image__layer--white,
.nexpi-glitch-link:focus .nexpi-glitch-image--hover .nexpi-glitch-image__layer--white {
    opacity: calc(var(--ngi-opacity, 0.75) * 0.55);
    animation: nexpi-glitch-white calc(var(--ngi-speed, 1.2s) * 0.85) infinite steps(2, end);
}

@keyframes nexpi-glitch-red {
    0%, 100% {
        clip-path: inset(0 0 0 0);
        transform: translateX(0);
    }
    8% {
        clip-path: inset(8% 0 80% 0);
        transform: translate(calc(var(--ngi-intensity, 8px) * -1), 0);
    }
    18% {
        clip-path: inset(45% 0 42% 0);
        transform: translate(calc(var(--ngi-intensity, 8px) * -0.55), 0);
    }
    31% {
        clip-path: inset(68% 0 12% 0);
        transform: translate(calc(var(--ngi-intensity, 8px) * -1.2), 0);
    }
    43%, 64% {
        clip-path: inset(0 0 0 0);
        transform: translateX(0);
    }
    74% {
        clip-path: inset(24% 0 60% 0);
        transform: translate(calc(var(--ngi-intensity, 8px) * -0.75), 0);
    }
    88% {
        clip-path: inset(82% 0 6% 0);
        transform: translate(calc(var(--ngi-intensity, 8px) * -1.05), 0);
    }
}

@keyframes nexpi-glitch-cyan {
    0%, 100% {
        clip-path: inset(0 0 0 0);
        transform: translateX(0);
    }
    11% {
        clip-path: inset(12% 0 74% 0);
        transform: translate(var(--ngi-intensity, 8px), 0);
    }
    24% {
        clip-path: inset(58% 0 26% 0);
        transform: translate(calc(var(--ngi-intensity, 8px) * 0.85), 0);
    }
    38% {
        clip-path: inset(34% 0 52% 0);
        transform: translate(calc(var(--ngi-intensity, 8px) * 1.15), 0);
    }
    52%, 71% {
        clip-path: inset(0 0 0 0);
        transform: translateX(0);
    }
    83% {
        clip-path: inset(76% 0 8% 0);
        transform: translate(calc(var(--ngi-intensity, 8px) * 0.65), 0);
    }
}

@keyframes nexpi-glitch-white {
    0%, 100% {
        clip-path: inset(0 0 0 0);
        transform: translate(0, 0);
    }
    14% {
        clip-path: inset(18% 0 70% 0);
        transform: translate(calc(var(--ngi-intensity, 8px) * 0.4), calc(var(--ngi-intensity, 8px) * -0.2));
    }
    28% {
        clip-path: inset(60% 0 24% 0);
        transform: translate(calc(var(--ngi-intensity, 8px) * -0.35), calc(var(--ngi-intensity, 8px) * 0.2));
    }
    46%, 78% {
        clip-path: inset(0 0 0 0);
        transform: translate(0, 0);
    }
    91% {
        clip-path: inset(42% 0 42% 0);
        transform: translate(calc(var(--ngi-intensity, 8px) * 0.5), 0);
    }
}

@media (max-width: 767px) {
    .nexpi-glitch-image[data-mobile="0"] .nexpi-glitch-image__layer,
    .nexpi-glitch-image[data-mobile="0"] .nexpi-glitch-image__scanlines {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nexpi-glitch-image__layer {
        animation: none !important;
        clip-path: none !important;
        transform: none !important;
    }
}

.nexpi-glitch-warning {
    padding: 12px 14px;
    border-left: 4px solid #d63638;
    background: #fff5f5;
    color: #1d2327;
}

/* v1.2 - Bande glitch orizzontali irregolari e randomiche */
.nexpi-glitch-image--random-bands .nexpi-glitch-image__layer {
    animation: none !important;
}

.nexpi-glitch-image--random-bands .nexpi-glitch-image__scanlines {
    background:
        linear-gradient(to bottom,
            rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.22) 0.7%, transparent 0.9%, transparent 4.8%,
            rgba(0,0,0,0.18) 5.1%, rgba(0,0,0,0.18) 6.2%, transparent 6.5%, transparent 12.7%,
            rgba(255,255,255,0.16) 13.2%, rgba(255,255,255,0.16) 16.8%, transparent 17.2%, transparent 24.3%,
            rgba(0,0,0,0.16) 25.4%, rgba(0,0,0,0.16) 29.5%, transparent 29.9%, transparent 38.6%,
            rgba(255,255,255,0.18) 40.1%, rgba(255,255,255,0.18) 41.4%, transparent 41.9%, transparent 52.8%,
            rgba(0,0,0,0.20) 54.6%, rgba(0,0,0,0.20) 61.8%, transparent 62.3%, transparent 74.2%,
            rgba(255,255,255,0.14) 75.6%, rgba(255,255,255,0.14) 82.5%, transparent 83%, transparent 91.4%,
            rgba(0,0,0,0.15) 92.7%, rgba(0,0,0,0.15) 96.8%, transparent 97.3%),
        repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.22) 0,
            rgba(255, 255, 255, 0.22) 1px,
            rgba(0, 0, 0, 0.12) 3px,
            rgba(0, 0, 0, 0.12) 6px
        );
    background-position: 0 var(--ngi-random-y, 0px), 0 0;
    background-size: 100% 100%, 100% 9px;
}

/* v1.3 - Supporto widget Immagine Elementor tramite classe CSS */
.nexpi-glitch-image--elementor {
    width: auto;
    max-width: 100%;
    vertical-align: middle;
}

.nexpi-glitch-image--elementor picture {
    display: block;
    line-height: 0;
}

.nexpi-glitch-image--elementor .nexpi-glitch-image__base {
    max-width: 100%;
    height: auto;
}