/* ==========================================================================
   MUHCINE / gradual blur
   Two strips pinned to the top and the bottom of the window. They sit above
   the page and below the header, the bar and an open project, and they never
   take a click.
   ========================================================================== */

.blur {
  position: fixed;
  inset-inline: 0;
  z-index: 80;
  pointer-events: none;
  /* The layers inside are what carry the blur. The strip itself is a frame. */
  will-change: transform;
}

.blur[hidden] {
  display: none;
}

.blur--top {
  top: 0;
}

.blur--bottom {
  bottom: 0;
}

.blur__layer {
  position: absolute;
  inset: 0;
}

/* A whole stack of backdrop filters is expensive to redraw, and someone who
   has asked for less movement is unlikely to want it. */
@media (prefers-reduced-motion: reduce) {
  .blur {
    display: none;
  }
}

/* Nothing to soften where nothing is behind it. Safari before 18 draws a grey
   sheet instead of a blur when backdrop-filter is unsupported, so the strips
   only appear where the browser can actually do the work. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .blur {
    display: none;
  }
}