/* ============================================================
   Progressive blur — fixed strip at the bottom of the viewport.
   8 stacked layers, each centered at a vertical position with a
   smooth bell-shaped mask (no flat plateaus, generous overlap)
   so adjacent blur amounts cross-fade instead of stepping.
   The bottom-most layer anchors fully opaque to 100% so the
   maximum blur reaches the viewport edge.
   ============================================================ */

.pb-stack {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  pointer-events: none;
  z-index: 60;
  isolation: isolate;
}

.pb-stack > .pb-layer {
  position: absolute;
  inset: 0;
}

/* --- Layer 1 — center 10%, tiny blur, eases in from the top edge --- */
.pb-stack > .pb-layer:nth-child(1) {
  -webkit-backdrop-filter: blur(0.2px);
  backdrop-filter: blur(0.2px);
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.35) 4%,
    rgba(0, 0, 0, 0.75) 8%,
    rgba(0, 0, 0, 1) 12%,
    rgba(0, 0, 0, 0.75) 18%,
    rgba(0, 0, 0, 0.35) 24%,
    rgba(0, 0, 0, 0) 30%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.35) 4%,
    rgba(0, 0, 0, 0.75) 8%,
    rgba(0, 0, 0, 1) 12%,
    rgba(0, 0, 0, 0.75) 18%,
    rgba(0, 0, 0, 0.35) 24%,
    rgba(0, 0, 0, 0) 30%
  );
}

/* --- Layer 2 — center 24% --- */
.pb-stack > .pb-layer:nth-child(2) {
  -webkit-backdrop-filter: blur(0.4px);
  backdrop-filter: blur(0.4px);
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 8%,
    rgba(0, 0, 0, 0.35) 14%,
    rgba(0, 0, 0, 0.75) 20%,
    rgba(0, 0, 0, 1) 26%,
    rgba(0, 0, 0, 0.75) 32%,
    rgba(0, 0, 0, 0.35) 38%,
    rgba(0, 0, 0, 0) 44%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 8%,
    rgba(0, 0, 0, 0.35) 14%,
    rgba(0, 0, 0, 0.75) 20%,
    rgba(0, 0, 0, 1) 26%,
    rgba(0, 0, 0, 0.75) 32%,
    rgba(0, 0, 0, 0.35) 38%,
    rgba(0, 0, 0, 0) 44%
  );
}

/* --- Layer 3 — center 38% --- */
.pb-stack > .pb-layer:nth-child(3) {
  -webkit-backdrop-filter: blur(0.8px);
  backdrop-filter: blur(0.8px);
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 22%,
    rgba(0, 0, 0, 0.35) 28%,
    rgba(0, 0, 0, 0.75) 34%,
    rgba(0, 0, 0, 1) 40%,
    rgba(0, 0, 0, 0.75) 46%,
    rgba(0, 0, 0, 0.35) 52%,
    rgba(0, 0, 0, 0) 58%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 22%,
    rgba(0, 0, 0, 0.35) 28%,
    rgba(0, 0, 0, 0.75) 34%,
    rgba(0, 0, 0, 1) 40%,
    rgba(0, 0, 0, 0.75) 46%,
    rgba(0, 0, 0, 0.35) 52%,
    rgba(0, 0, 0, 0) 58%
  );
}

/* --- Layer 4 — center 52% --- */
.pb-stack > .pb-layer:nth-child(4) {
  -webkit-backdrop-filter: blur(1.4px);
  backdrop-filter: blur(1.4px);
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 36%,
    rgba(0, 0, 0, 0.35) 42%,
    rgba(0, 0, 0, 0.75) 48%,
    rgba(0, 0, 0, 1) 54%,
    rgba(0, 0, 0, 0.75) 60%,
    rgba(0, 0, 0, 0.35) 66%,
    rgba(0, 0, 0, 0) 72%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 36%,
    rgba(0, 0, 0, 0.35) 42%,
    rgba(0, 0, 0, 0.75) 48%,
    rgba(0, 0, 0, 1) 54%,
    rgba(0, 0, 0, 0.75) 60%,
    rgba(0, 0, 0, 0.35) 66%,
    rgba(0, 0, 0, 0) 72%
  );
}

/* --- Layer 5 — center 66% --- */
.pb-stack > .pb-layer:nth-child(5) {
  -webkit-backdrop-filter: blur(2.2px);
  backdrop-filter: blur(2.2px);
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0.35) 56%,
    rgba(0, 0, 0, 0.75) 62%,
    rgba(0, 0, 0, 1) 68%,
    rgba(0, 0, 0, 0.75) 74%,
    rgba(0, 0, 0, 0.35) 80%,
    rgba(0, 0, 0, 0) 86%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0.35) 56%,
    rgba(0, 0, 0, 0.75) 62%,
    rgba(0, 0, 0, 1) 68%,
    rgba(0, 0, 0, 0.75) 74%,
    rgba(0, 0, 0, 0.35) 80%,
    rgba(0, 0, 0, 0) 86%
  );
}

/* --- Layer 6 — center 80% --- */
.pb-stack > .pb-layer:nth-child(6) {
  -webkit-backdrop-filter: blur(3.2px);
  backdrop-filter: blur(3.2px);
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 64%,
    rgba(0, 0, 0, 0.35) 70%,
    rgba(0, 0, 0, 0.75) 76%,
    rgba(0, 0, 0, 1) 82%,
    rgba(0, 0, 0, 0.75) 88%,
    rgba(0, 0, 0, 0.35) 94%,
    rgba(0, 0, 0, 0.15) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 64%,
    rgba(0, 0, 0, 0.35) 70%,
    rgba(0, 0, 0, 0.75) 76%,
    rgba(0, 0, 0, 1) 82%,
    rgba(0, 0, 0, 0.75) 88%,
    rgba(0, 0, 0, 0.35) 94%,
    rgba(0, 0, 0, 0.15) 100%
  );
}

/* --- Layer 7 — center 92% --- */
.pb-stack > .pb-layer:nth-child(7) {
  -webkit-backdrop-filter: blur(4.6px);
  backdrop-filter: blur(4.6px);
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 76%,
    rgba(0, 0, 0, 0.35) 82%,
    rgba(0, 0, 0, 0.75) 88%,
    rgba(0, 0, 0, 1) 94%,
    rgba(0, 0, 0, 0.85) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 76%,
    rgba(0, 0, 0, 0.35) 82%,
    rgba(0, 0, 0, 0.75) 88%,
    rgba(0, 0, 0, 1) 94%,
    rgba(0, 0, 0, 0.85) 100%
  );
}

/* --- Layer 8 — anchors the strongest blur to the viewport edge --- */
.pb-stack > .pb-layer:nth-child(8) {
  -webkit-backdrop-filter: blur(6.5px);
  backdrop-filter: blur(6.5px);
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 86%,
    rgba(0, 0, 0, 0.5) 94%,
    rgba(0, 0, 0, 1) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 86%,
    rgba(0, 0, 0, 0.5) 94%,
    rgba(0, 0, 0, 1) 100%
  );
}

/* Soft white tint — eases the blurred content toward the page bg.
   Curve uses extra stops so it doesn't kink. */
.pb-stack > .pb-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.02) 30%,
    rgba(255, 255, 255, 0.07) 55%,
    rgba(255, 255, 255, 0.15) 80%,
    rgba(255, 255, 255, 0.25) 100%
  );
}

@media print {
  .pb-stack { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pb-stack > .pb-layer:nth-child(1),
  .pb-stack > .pb-layer:nth-child(2),
  .pb-stack > .pb-layer:nth-child(3),
  .pb-stack > .pb-layer:nth-child(4),
  .pb-stack > .pb-layer:nth-child(5),
  .pb-stack > .pb-layer:nth-child(6),
  .pb-stack > .pb-layer:nth-child(7) {
    display: none;
  }
  .pb-stack > .pb-layer:nth-child(8) {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }
}