/* Progressive Blur Implementation */

.progressive-blur-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    border-radius: 100px;
}

.progressive-blur-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.progressive-blur-container>.blur-filter {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/* Layer 1 */
.progressive-blur-container>.blur-filter:nth-child(1) {
    backdrop-filter: blur(1px);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 40%);
}

/* Layer 2 */
.progressive-blur-container>.blur-filter:nth-child(2) {
    backdrop-filter: blur(2px);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 50%);
}

/* Layer 3 */
.progressive-blur-container>.blur-filter:nth-child(3) {
    backdrop-filter: blur(4px);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 60%);
}

/* Layer 4 */
.progressive-blur-container>.blur-filter:nth-child(4) {
    backdrop-filter: blur(8px);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 70%);
}

/* Layer 5 */
.progressive-blur-container>.blur-filter:nth-child(5) {
    backdrop-filter: blur(16px);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 90%);
}

/* Layer 6 */
.progressive-blur-container>.blur-filter:nth-child(6) {
    backdrop-filter: blur(32px);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 1) 80%);
}

/* Layer 7 */
.progressive-blur-container>.blur-filter:nth-child(7) {
    backdrop-filter: blur(64px);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 1) 100%);
}