/*Progressive blur effect*/
.gradient-blur {
    position: absolute;
    pointer-events: none;
    top: 0;
    inset: 0 0 auto 0;
    pointer-events: none;
    width: 100%;
    height: 100px;
    z-index: 1;
    overflow: hidden;
    background: linear-gradient(rgba(var(--backgroundColor), 0.2), rgba(var(--backgroundColor), 0));
}

.gradient-blur>div,
.gradient-blur::before,
.gradient-blur::after {
    position: absolute;
    inset: 0;
}

/* Strongest blur at top (z-index: 7) */
.gradient-blur::before {
    content: "";
    z-index: 7;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /* Starts at 0% and fades out by 20% (40px) */
    mask-image: linear-gradient(to bottom, white 0%, transparent 20%);
    -webkit-mask-image: linear-gradient(to bottom, white 0%, transparent 20%);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/* High blur fading (z-index: 6) */
.gradient-blur>div:nth-of-type(1) {
    z-index: 6;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    /* Starts at 0% and fades out by 40% (80px) */
    mask-image: linear-gradient(to bottom, white 0%, transparent 40%);
    -webkit-mask-image: linear-gradient(to bottom, white 0%, transparent 40%);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/* Mid blur (z-index: 5) */
.gradient-blur>div:nth-of-type(2) {
    z-index: 5;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Starts at 0% and fades out by 60% (120px) */
    mask-image: linear-gradient(to bottom, white 0%, transparent 60%);
    -webkit-mask-image: linear-gradient(to bottom, white 0%, transparent 60%);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/* Medium blur taper (z-index: 4) */
.gradient-blur>div:nth-of-type(3) {
    z-index: 4;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    /* Starts at 0% and fades out by 80% (160px) */
    mask-image: linear-gradient(to bottom, white 0%, transparent 80%);
    -webkit-mask-image: linear-gradient(to bottom, white 0%, transparent 80%);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/* Light blur (z-index: 3) */
.gradient-blur>div:nth-of-type(4) {
    z-index: 3;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    /* Starts at 0% and fades out by 90% (180px) */
    mask-image: linear-gradient(to bottom, white 0%, transparent 90%);
    -webkit-mask-image: linear-gradient(to bottom, white 0%, transparent 90%);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/* Very subtle blur near bottom (z-index: 2) */
.gradient-blur>div:nth-of-type(5) {
    z-index: 2;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    /* Starts at 0% and fades out by 96% (192px) */
    mask-image: linear-gradient(to bottom, white 0%, transparent 96%);
    -webkit-mask-image: linear-gradient(to bottom, white 0%, transparent 96%);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/* Fading tail (z-index: 1) */
.gradient-blur::after {
    content: "";
    z-index: 1;
    backdrop-filter: blur(0.5px);
    -webkit-backdrop-filter: blur(0.5px);
    /* Starts at 0% and fades out by 100% (200px) */
    mask-image: linear-gradient(to bottom, white 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, white 0%, transparent 100%);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}