/* Edge blur: progressive bottom-of-viewport blur, rebuilt 1:1 from piet.website
   (Framer "Progressive Blur": 8 stacked backdrop-filter layers, radii doubling
   0.15625px -> 20px, each masked to an overlapping 25%-tall band, 150px tall,
   fixed to the viewport bottom. No tint, no SVG filter.)

   Markup (paste just before </body>):
   <div class="edge-blur" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
*/

.edge-blur {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  z-index: 80;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}

.edge-blur > i {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(var(--eb-r));
  backdrop-filter: blur(var(--eb-r));
  -webkit-mask-image: var(--eb-m);
  mask-image: var(--eb-m);
}

.edge-blur > i:nth-child(1) { z-index: 1; --eb-r: 0.15625px; --eb-m: linear-gradient(to bottom, rgba(0,0,0,0) 0%,    #000 12.5%, #000 25%,   rgba(0,0,0,0) 37.5%); }
.edge-blur > i:nth-child(2) { z-index: 2; --eb-r: 0.3125px;  --eb-m: linear-gradient(to bottom, rgba(0,0,0,0) 12.5%, #000 25%,   #000 37.5%, rgba(0,0,0,0) 50%); }
.edge-blur > i:nth-child(3) { z-index: 3; --eb-r: 0.625px;   --eb-m: linear-gradient(to bottom, rgba(0,0,0,0) 25%,   #000 37.5%, #000 50%,   rgba(0,0,0,0) 62.5%); }
.edge-blur > i:nth-child(4) { z-index: 4; --eb-r: 1.25px;    --eb-m: linear-gradient(to bottom, rgba(0,0,0,0) 37.5%, #000 50%,   #000 62.5%, rgba(0,0,0,0) 75%); }
.edge-blur > i:nth-child(5) { z-index: 5; --eb-r: 2.5px;     --eb-m: linear-gradient(to bottom, rgba(0,0,0,0) 50%,   #000 62.5%, #000 75%,   rgba(0,0,0,0) 87.5%); }
.edge-blur > i:nth-child(6) { z-index: 6; --eb-r: 5px;       --eb-m: linear-gradient(to bottom, rgba(0,0,0,0) 62.5%, #000 75%,   #000 87.5%, rgba(0,0,0,0) 100%); }
.edge-blur > i:nth-child(7) { z-index: 7; --eb-r: 10px;      --eb-m: linear-gradient(to bottom, rgba(0,0,0,0) 75%,   #000 87.5%, #000 100%); }
.edge-blur > i:nth-child(8) { z-index: 8; --eb-r: 20px;      --eb-m: linear-gradient(to bottom, rgba(0,0,0,0) 87.5%, #000 100%); }

/* Fun mode: off */
html.fun-mode .edge-blur { display: none; }

/* No backdrop-filter support, or the user asked for less transparency:
   plain fade into the page ground (cream in light, #1c1c1c in dark). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .edge-blur > i { display: none; }
  .edge-blur { background: linear-gradient(to bottom, transparent, var(--bg-cream)); }
}

@media (prefers-reduced-transparency: reduce) {
  .edge-blur > i { display: none; }
  .edge-blur { background: linear-gradient(to bottom, transparent, var(--bg-cream)); }
}