﻿.glass {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

    .glass::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        inset: 0;
        backdrop-filter: blur(4px);
        filter: url('#glass-distortion') saturate(120%) brightness(1.15);
    }

    .glass > * {
        z-index: 3;
    }



@keyframes floatDistort {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 0% 0%;
    }
}


/* Glass Card Container */
.glass-preview {
    background-image: url('https://images.pexels.com/photos/2563854/pexels-photo-2563854.jpeg');
    animation: preview-bg-move 5s ease-in-out infinite alternate;
}

@keyframes preview-bg-move {
    from {
        background-position: center center;
    }

    to {
        background-position: center bottom;
    }
}