/* ============================================================
   Progressive Blur — faixas de blur no topo e fundo da viewport
   Uso:
     <div class="progressive-blur top" aria-hidden="true">
       <div></div><div></div><div></div><div></div><div></div><div></div>
     </div>
     <div class="progressive-blur bottom" aria-hidden="true">
       <div></div><div></div><div></div><div></div><div></div><div></div>
     </div>
   ============================================================ */

.progressive-blur {
  position: fixed;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 30;
}

/* Blur do topo cobre a header (96px desktop) + faixa de transição suave */
.progressive-blur.top    { top: 0;    height: 200px; transform: scaleY(-1); }
.progressive-blur.bottom { bottom: 0; height: 140px; }

@media (max-width: 991px) {
  .progressive-blur.top    { height: 140px; }
  .progressive-blur.bottom { height: 90px; }
}

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

/* 6 camadas com blur crescente + máscaras em faixas sobrepostas */
.progressive-blur > div:nth-child(1) {
  -webkit-backdrop-filter: blur(0.5px); backdrop-filter: blur(0.5px);
  -webkit-mask: linear-gradient(to bottom, transparent 0%, #000 12.5%, #000 25%, transparent 37.5%);
          mask: linear-gradient(to bottom, transparent 0%, #000 12.5%, #000 25%, transparent 37.5%);
}
.progressive-blur > div:nth-child(2) {
  -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
  -webkit-mask: linear-gradient(to bottom, transparent 12.5%, #000 25%, #000 37.5%, transparent 50%);
          mask: linear-gradient(to bottom, transparent 12.5%, #000 25%, #000 37.5%, transparent 50%);
}
.progressive-blur > div:nth-child(3) {
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  -webkit-mask: linear-gradient(to bottom, transparent 25%, #000 37.5%, #000 50%, transparent 62.5%);
          mask: linear-gradient(to bottom, transparent 25%, #000 37.5%, #000 50%, transparent 62.5%);
}
.progressive-blur > div:nth-child(4) {
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  -webkit-mask: linear-gradient(to bottom, transparent 37.5%, #000 50%, #000 62.5%, transparent 75%);
          mask: linear-gradient(to bottom, transparent 37.5%, #000 50%, #000 62.5%, transparent 75%);
}
.progressive-blur > div:nth-child(5) {
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  -webkit-mask: linear-gradient(to bottom, transparent 50%, #000 62.5%, #000 75%, transparent 87.5%);
          mask: linear-gradient(to bottom, transparent 50%, #000 62.5%, #000 75%, transparent 87.5%);
}
.progressive-blur > div:nth-child(6) {
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  -webkit-mask: linear-gradient(to bottom, transparent 62.5%, #000 75%, #000 100%);
          mask: linear-gradient(to bottom, transparent 62.5%, #000 75%, #000 100%);
}