/**
 * Pixel Dissolve Effect — reusable pixel disintegration style
 * Apply .pixel-dissolve on any container wrapping an <img> for the effect.
 * Pixels stream from the left edge of the image toward the text area.
 *
 * Ultima modificare: 2026-02-05 01:45
 * Modificari:
 *   2026-02-05 01:45 — Added subtle right-side dissolve (mask + particles)
 *   2026-02-05 01:30 — Initial creation of pixel dissolve effect
 */


/* ─── Wrapper ─── */
.pixel-dissolve {
    position: relative;
    display: block;
    overflow: visible;
}

/* ─── Bilateral gradient mask: strong left, subtle right ─── */
.pixel-dissolve > img {
    position: relative;
    z-index: 1;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.08) 3%,
        rgba(0, 0, 0, 0.2) 6%,
        rgba(0, 0, 0, 0.38) 10%,
        rgba(0, 0, 0, 0.6) 15%,
        rgba(0, 0, 0, 0.82) 21%,
        black 28%,
        black 85%,
        rgba(0, 0, 0, 0.7) 91%,
        rgba(0, 0, 0, 0.4) 95%,
        rgba(0, 0, 0, 0.15) 98%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.08) 3%,
        rgba(0, 0, 0, 0.2) 6%,
        rgba(0, 0, 0, 0.38) 10%,
        rgba(0, 0, 0, 0.6) 15%,
        rgba(0, 0, 0, 0.82) 21%,
        black 28%,
        black 85%,
        rgba(0, 0, 0, 0.7) 91%,
        rgba(0, 0, 0, 0.4) 95%,
        rgba(0, 0, 0, 0.15) 98%,
        transparent 100%
    );
}

/* ─── Particle container ─── */
.pixel-dissolve-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}


/* ─── Individual pixel particle ─── */
.px {
    position: absolute;
    will-change: transform, opacity;
    border-radius: 1px;
    animation: px-stream var(--px-dur, 3s) var(--px-del, 0s) linear infinite;
}

/* Glow variant — bright/highlighted pixels */
.px--glow {
    box-shadow: 0 0 6px 2px var(--px-bg, rgba(99, 102, 241, 0.4));
}

/* Streak variant — thin horizontal lines (Matrix data-stream feel) */
.px--streak {
    border-radius: 0;
}

/* Bright highlight pixel */
.px--bright {
    box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.3);
}


/* ─── Main animation: stream left with fade ─── */
@keyframes px-stream {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: var(--px-o, 0.7);
    }
    55% {
        opacity: calc(var(--px-o, 0.7) * 0.65);
    }
    100% {
        transform: translate3d(var(--px-x, -150px), var(--px-y, 0px), 0) scale(var(--px-se, 0.4));
        opacity: 0;
    }
}


/* ─── Accessibility: respect reduced motion preference ─── */
@media (prefers-reduced-motion: reduce) {
    .px {
        animation: none !important;
        opacity: 0 !important;
    }

    .pixel-dissolve > img {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* ─── Responsive: disable on small screens ─── */
@media (max-width: 991px) {
    .pixel-dissolve > img {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .pixel-dissolve-particles {
        display: none;
    }
}