blur-hash {
    overflow: hidden;
    display: block;
}

blur-hash canvas {
        transition: opacity var(--blur-hash-time, 0.8s);
        opacity: var(--blur-hash-opacity, 0.4);
        height: 100%;
        width: 100%;
    }

blur-hash img {
        position: relative;
        top: -100%;
        transition: opacity var(--blur-hash-time, 0.8s);
        object-fit: cover;
    }

.blurry:is(blur-hash img) {
            opacity: 0;
            filter: blur(30px);
        }

.sharp:is(blur-hash img) {
            opacity: 1;
            animation: sharpen var(--blur-hash-time, 0.8s) both;
        }

@keyframes sharpen {
    from {
        filter: blur(30px);
    }
    to {
        filter: blur(0px)
    }
}
blur-hash {
    --blur-hash-opacity: 0.2;
    --blur-hash-time: 2s;
}
blur-hash img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }