.progressive-blur {
  --progressive-blur-tint-strong: rgba(9, 9, 15, 0.85);
  --progressive-blur-tint-mid: rgba(9, 9, 15, 0.45);

  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

[data-theme="light"] .progressive-blur {
  --progressive-blur-tint-strong: rgba(250, 250, 250, 0.85);
  --progressive-blur-tint-mid: rgba(250, 250, 250, 0.45);
}

.progressive-blur-layer {
  position: absolute;
  inset: 0;
}

.progressive-blur-layer:nth-child(1) {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.progressive-blur-layer:nth-child(2) {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.progressive-blur-layer:nth-child(3) {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.progressive-blur-top .progressive-blur-layer:nth-child(1) {
  -webkit-mask-image: radial-gradient(ellipse 68% 100% at 50% 0%, #000 30%, transparent 85%);
  mask-image: radial-gradient(ellipse 68% 100% at 50% 0%, #000 30%, transparent 85%);
}

.progressive-blur-top .progressive-blur-layer:nth-child(2) {
  -webkit-mask-image: radial-gradient(ellipse 54% 84% at 50% 0%, #000 20%, transparent 72%);
  mask-image: radial-gradient(ellipse 54% 84% at 50% 0%, #000 20%, transparent 72%);
}

.progressive-blur-top .progressive-blur-layer:nth-child(3) {
  -webkit-mask-image: radial-gradient(ellipse 44% 68% at 50% 0%, #000 5%, transparent 60%);
  mask-image: radial-gradient(ellipse 44% 68% at 50% 0%, #000 5%, transparent 60%);
}

.progressive-blur-bottom .progressive-blur-layer:nth-child(1) {
  -webkit-mask-image: radial-gradient(ellipse 68% 100% at 50% 100%, #000 30%, transparent 85%);
  mask-image: radial-gradient(ellipse 68% 100% at 50% 100%, #000 30%, transparent 85%);
}

.progressive-blur-bottom .progressive-blur-layer:nth-child(2) {
  -webkit-mask-image: radial-gradient(ellipse 54% 84% at 50% 100%, #000 20%, transparent 72%);
  mask-image: radial-gradient(ellipse 54% 84% at 50% 100%, #000 20%, transparent 72%);
}

.progressive-blur-bottom .progressive-blur-layer:nth-child(3) {
  -webkit-mask-image: radial-gradient(ellipse 44% 68% at 50% 100%, #000 5%, transparent 60%);
  mask-image: radial-gradient(ellipse 44% 68% at 50% 100%, #000 5%, transparent 60%);
}

/* Blur alone keeps the underlying contrast, which overlaid text loses against.
   The tint restores it, fading on the same curve as the blur. */
.progressive-blur-tint {
  position: absolute;
  inset: 0;
}

.progressive-blur-top .progressive-blur-tint {
  background: linear-gradient(to bottom, var(--progressive-blur-tint-strong) 0%, var(--progressive-blur-tint-mid) 50%, transparent 100%);
}

.progressive-blur-bottom .progressive-blur-tint {
  background: linear-gradient(to top, var(--progressive-blur-tint-strong) 0%, var(--progressive-blur-tint-mid) 50%, transparent 100%);
}


.progressive-blur-left { --progressive-blur-flow: to right; }
.progressive-blur-right { --progressive-blur-flow: to left; }
:is(.progressive-blur-left, .progressive-blur-right) .progressive-blur-layer:nth-child(1) {
  -webkit-mask-image: linear-gradient(var(--progressive-blur-flow), #000 0%, transparent 100%);
  mask-image: linear-gradient(var(--progressive-blur-flow), #000 0%, transparent 100%);
}
:is(.progressive-blur-left, .progressive-blur-right) .progressive-blur-layer:nth-child(2) {
  -webkit-mask-image: linear-gradient(var(--progressive-blur-flow), #000 0%, transparent 75%);
  mask-image: linear-gradient(var(--progressive-blur-flow), #000 0%, transparent 75%);
}
:is(.progressive-blur-left, .progressive-blur-right) .progressive-blur-layer:nth-child(3) {
  -webkit-mask-image: linear-gradient(var(--progressive-blur-flow), #000 0%, transparent 50%);
  mask-image: linear-gradient(var(--progressive-blur-flow), #000 0%, transparent 50%);
}
:is(.progressive-blur-left, .progressive-blur-right) .progressive-blur-tint {
  background: linear-gradient(var(--progressive-blur-flow), var(--progressive-blur-tint-strong), var(--progressive-blur-tint-mid) 50%, transparent);
}