/*
 * GAUSSIAN BLUR — статический вариант из демостраницы.
 * Радиус: 50%; горизонталь X: 20%; слоёв: 8; высота поля: 180px.
 * Расчётный максимум при полностью открытых масках: X = 6.656px, Y = 25.6px.
 * Направленный SVG-фильтр рассчитан на Chromium; запасной blur() круговой.
 * JavaScript для этого варианта не требуется.
 *
 * Подключите CSS и поместите SVG один раз в body (не задавайте display:none):
 * <link rel="stylesheet" href="gaussian_blur.css">
 * <svg class="gauss-blur-defs" xmlns="http://www.w3.org/2000/svg"
 *      width="0" height="0" aria-hidden="true" focusable="false">
 *   <defs>
 *     <filter id="gaussian-blur-1" x="-50%" y="-150%" width="200%" height="400%" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feGaussianBlur in="SourceGraphic" stdDeviation="0.071859 0.276382" edgeMode="duplicate" /></filter>
 *     <filter id="gaussian-blur-2" x="-50%" y="-150%" width="200%" height="400%" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feGaussianBlur in="SourceGraphic" stdDeviation="0.11691 0.449654" edgeMode="duplicate" /></filter>
 *     <filter id="gaussian-blur-3" x="-50%" y="-150%" width="200%" height="400%" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feGaussianBlur in="SourceGraphic" stdDeviation="0.223261 0.858697" edgeMode="duplicate" /></filter>
 *     <filter id="gaussian-blur-4" x="-50%" y="-150%" width="200%" height="400%" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feGaussianBlur in="SourceGraphic" stdDeviation="0.426358 1.639839" edgeMode="duplicate" /></filter>
 *     <filter id="gaussian-blur-5" x="-50%" y="-150%" width="200%" height="400%" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feGaussianBlur in="SourceGraphic" stdDeviation="0.814209 3.131573" edgeMode="duplicate" /></filter>
 *     <filter id="gaussian-blur-6" x="-50%" y="-150%" width="200%" height="400%" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feGaussianBlur in="SourceGraphic" stdDeviation="1.554881 5.980313" edgeMode="duplicate" /></filter>
 *     <filter id="gaussian-blur-7" x="-50%" y="-150%" width="200%" height="400%" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feGaussianBlur in="SourceGraphic" stdDeviation="2.969331 11.420503" edgeMode="duplicate" /></filter>
 *     <filter id="gaussian-blur-8" x="-50%" y="-150%" width="200%" height="400%" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feGaussianBlur in="SourceGraphic" stdDeviation="5.670481 21.809544" edgeMode="duplicate" /></filter>
 *   </defs>
 * </svg>
 *
 * В фиксированной шапке нужны ровно восемь span:
 * <header class="topbar">
 *   <div class="header-blur header-blur--directional" aria-hidden="true">
 *     <span></span><span></span><span></span><span></span>
 *     <span></span><span></span><span></span><span></span>
 *   </div>
 *   <a href="#top">Логотип</a>
 *   <a href="#contact">Контакты</a>
 * </header>
 * Оформление ссылок задайте в стилях сайта.
 */

.gauss-blur-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

.topbar {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 19px clamp(20px, 4.7vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Ссылки отрисовываются над эффектом и остаются чёткими. */
.topbar > a {
  position: relative;
  z-index: 1;
}

.header-blur {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  height: 180px;
  pointer-events: none;
}

.header-blur > span {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
}

/* SVG задаёт независимые радиусы X и Y. Без этого модификатора
   остаётся исходный эффект с одинаковым радиусом по обеим осям. */
@supports (backdrop-filter: url("#gaussian-blur-1")) {
  .header-blur--directional > span {
    backdrop-filter: var(--directional-blur);
  }
}

/* Восемь фиксированных монотонных масок. */
/* Слой 1: X = 0.071859px, Y = 0.276382px. */
.header-blur > span:nth-child(1) {
  --blur: 0.276382px;
  --directional-blur: url("#gaussian-blur-1");
  --mask: linear-gradient(
    to top,
    transparent 0%,
    rgba(0, 0, 0, 0.002218) 0.78125%,
    rgba(0, 0, 0, 0.016052) 1.5625%,
    rgba(0, 0, 0, 0.048769) 2.34375%,
    rgba(0, 0, 0, 0.103516) 3.125%,
    rgba(0, 0, 0, 0.180006) 3.90625%,
    rgba(0, 0, 0, 0.275208) 4.6875%,
    rgba(0, 0, 0, 0.384027) 5.46875%,
    rgba(0, 0, 0, 0.5) 6.25%,
    rgba(0, 0, 0, 0.615973) 7.03125%,
    rgba(0, 0, 0, 0.724792) 7.8125%,
    rgba(0, 0, 0, 0.819994) 8.59375%,
    rgba(0, 0, 0, 0.896484) 9.375%,
    rgba(0, 0, 0, 0.951231) 10.15625%,
    rgba(0, 0, 0, 0.983948) 10.9375%,
    rgba(0, 0, 0, 0.997782) 11.71875%,
    #000 12.5%,
    #000 100%
  );
}

/* Слой 2: X = 0.11691px, Y = 0.449654px. */
.header-blur > span:nth-child(2) {
  --blur: 0.449654px;
  --directional-blur: url("#gaussian-blur-2");
  --mask: linear-gradient(
    to top,
    transparent 0%,
    rgba(0, 0, 0, 0.002218) 1.5625%,
    rgba(0, 0, 0, 0.016052) 3.125%,
    rgba(0, 0, 0, 0.048769) 4.6875%,
    rgba(0, 0, 0, 0.103516) 6.25%,
    rgba(0, 0, 0, 0.180006) 7.8125%,
    rgba(0, 0, 0, 0.275208) 9.375%,
    rgba(0, 0, 0, 0.384027) 10.9375%,
    rgba(0, 0, 0, 0.5) 12.5%,
    rgba(0, 0, 0, 0.615973) 14.0625%,
    rgba(0, 0, 0, 0.724792) 15.625%,
    rgba(0, 0, 0, 0.819994) 17.1875%,
    rgba(0, 0, 0, 0.896484) 18.75%,
    rgba(0, 0, 0, 0.951231) 20.3125%,
    rgba(0, 0, 0, 0.983948) 21.875%,
    rgba(0, 0, 0, 0.997782) 23.4375%,
    #000 25%,
    #000 100%
  );
}

/* Слой 3: X = 0.223261px, Y = 0.858697px. */
.header-blur > span:nth-child(3) {
  --blur: 0.858697px;
  --directional-blur: url("#gaussian-blur-3");
  --mask: linear-gradient(
    to top,
    transparent 0%,
    rgba(0, 0, 0, 0.002218) 2.34375%,
    rgba(0, 0, 0, 0.016052) 4.6875%,
    rgba(0, 0, 0, 0.048769) 7.03125%,
    rgba(0, 0, 0, 0.103516) 9.375%,
    rgba(0, 0, 0, 0.180006) 11.71875%,
    rgba(0, 0, 0, 0.275208) 14.0625%,
    rgba(0, 0, 0, 0.384027) 16.40625%,
    rgba(0, 0, 0, 0.5) 18.75%,
    rgba(0, 0, 0, 0.615973) 21.09375%,
    rgba(0, 0, 0, 0.724792) 23.4375%,
    rgba(0, 0, 0, 0.819994) 25.78125%,
    rgba(0, 0, 0, 0.896484) 28.125%,
    rgba(0, 0, 0, 0.951231) 30.46875%,
    rgba(0, 0, 0, 0.983948) 32.8125%,
    rgba(0, 0, 0, 0.997782) 35.15625%,
    #000 37.5%,
    #000 100%
  );
}

/* Слой 4: X = 0.426358px, Y = 1.639839px. */
.header-blur > span:nth-child(4) {
  --blur: 1.639839px;
  --directional-blur: url("#gaussian-blur-4");
  --mask: linear-gradient(
    to top,
    transparent 0%,
    transparent 12.5%,
    rgba(0, 0, 0, 0.002218) 14.84375%,
    rgba(0, 0, 0, 0.016052) 17.1875%,
    rgba(0, 0, 0, 0.048769) 19.53125%,
    rgba(0, 0, 0, 0.103516) 21.875%,
    rgba(0, 0, 0, 0.180006) 24.21875%,
    rgba(0, 0, 0, 0.275208) 26.5625%,
    rgba(0, 0, 0, 0.384027) 28.90625%,
    rgba(0, 0, 0, 0.5) 31.25%,
    rgba(0, 0, 0, 0.615973) 33.59375%,
    rgba(0, 0, 0, 0.724792) 35.9375%,
    rgba(0, 0, 0, 0.819994) 38.28125%,
    rgba(0, 0, 0, 0.896484) 40.625%,
    rgba(0, 0, 0, 0.951231) 42.96875%,
    rgba(0, 0, 0, 0.983948) 45.3125%,
    rgba(0, 0, 0, 0.997782) 47.65625%,
    #000 50%,
    #000 100%
  );
}

/* Слой 5: X = 0.814209px, Y = 3.131573px. */
.header-blur > span:nth-child(5) {
  --blur: 3.131573px;
  --directional-blur: url("#gaussian-blur-5");
  --mask: linear-gradient(
    to top,
    transparent 0%,
    transparent 25%,
    rgba(0, 0, 0, 0.002218) 27.34375%,
    rgba(0, 0, 0, 0.016052) 29.6875%,
    rgba(0, 0, 0, 0.048769) 32.03125%,
    rgba(0, 0, 0, 0.103516) 34.375%,
    rgba(0, 0, 0, 0.180006) 36.71875%,
    rgba(0, 0, 0, 0.275208) 39.0625%,
    rgba(0, 0, 0, 0.384027) 41.40625%,
    rgba(0, 0, 0, 0.5) 43.75%,
    rgba(0, 0, 0, 0.615973) 46.09375%,
    rgba(0, 0, 0, 0.724792) 48.4375%,
    rgba(0, 0, 0, 0.819994) 50.78125%,
    rgba(0, 0, 0, 0.896484) 53.125%,
    rgba(0, 0, 0, 0.951231) 55.46875%,
    rgba(0, 0, 0, 0.983948) 57.8125%,
    rgba(0, 0, 0, 0.997782) 60.15625%,
    #000 62.5%,
    #000 100%
  );
}

/* Слой 6: X = 1.554881px, Y = 5.980313px. */
.header-blur > span:nth-child(6) {
  --blur: 5.980313px;
  --directional-blur: url("#gaussian-blur-6");
  --mask: linear-gradient(
    to top,
    transparent 0%,
    transparent 37.5%,
    rgba(0, 0, 0, 0.002218) 39.84375%,
    rgba(0, 0, 0, 0.016052) 42.1875%,
    rgba(0, 0, 0, 0.048769) 44.53125%,
    rgba(0, 0, 0, 0.103516) 46.875%,
    rgba(0, 0, 0, 0.180006) 49.21875%,
    rgba(0, 0, 0, 0.275208) 51.5625%,
    rgba(0, 0, 0, 0.384027) 53.90625%,
    rgba(0, 0, 0, 0.5) 56.25%,
    rgba(0, 0, 0, 0.615973) 58.59375%,
    rgba(0, 0, 0, 0.724792) 60.9375%,
    rgba(0, 0, 0, 0.819994) 63.28125%,
    rgba(0, 0, 0, 0.896484) 65.625%,
    rgba(0, 0, 0, 0.951231) 67.96875%,
    rgba(0, 0, 0, 0.983948) 70.3125%,
    rgba(0, 0, 0, 0.997782) 72.65625%,
    #000 75%,
    #000 100%
  );
}

/* Слой 7: X = 2.969331px, Y = 11.420503px. */
.header-blur > span:nth-child(7) {
  --blur: 11.420503px;
  --directional-blur: url("#gaussian-blur-7");
  --mask: linear-gradient(
    to top,
    transparent 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.002218) 52.34375%,
    rgba(0, 0, 0, 0.016052) 54.6875%,
    rgba(0, 0, 0, 0.048769) 57.03125%,
    rgba(0, 0, 0, 0.103516) 59.375%,
    rgba(0, 0, 0, 0.180006) 61.71875%,
    rgba(0, 0, 0, 0.275208) 64.0625%,
    rgba(0, 0, 0, 0.384027) 66.40625%,
    rgba(0, 0, 0, 0.5) 68.75%,
    rgba(0, 0, 0, 0.615973) 71.09375%,
    rgba(0, 0, 0, 0.724792) 73.4375%,
    rgba(0, 0, 0, 0.819994) 75.78125%,
    rgba(0, 0, 0, 0.896484) 78.125%,
    rgba(0, 0, 0, 0.951231) 80.46875%,
    rgba(0, 0, 0, 0.983948) 82.8125%,
    rgba(0, 0, 0, 0.997782) 85.15625%,
    #000 87.5%,
    #000 100%
  );
}

/* Слой 8: X = 5.670481px, Y = 21.809544px. */
.header-blur > span:nth-child(8) {
  --blur: 21.809544px;
  --directional-blur: url("#gaussian-blur-8");
  --mask: linear-gradient(
    to top,
    transparent 0%,
    transparent 62.5%,
    rgba(0, 0, 0, 0.002218) 64.84375%,
    rgba(0, 0, 0, 0.016052) 67.1875%,
    rgba(0, 0, 0, 0.048769) 69.53125%,
    rgba(0, 0, 0, 0.103516) 71.875%,
    rgba(0, 0, 0, 0.180006) 74.21875%,
    rgba(0, 0, 0, 0.275208) 76.5625%,
    rgba(0, 0, 0, 0.384027) 78.90625%,
    rgba(0, 0, 0, 0.5) 81.25%,
    rgba(0, 0, 0, 0.615973) 83.59375%,
    rgba(0, 0, 0, 0.724792) 85.9375%,
    rgba(0, 0, 0, 0.819994) 88.28125%,
    rgba(0, 0, 0, 0.896484) 90.625%,
    rgba(0, 0, 0, 0.951231) 92.96875%,
    rgba(0, 0, 0, 0.983948) 95.3125%,
    rgba(0, 0, 0, 0.997782) 97.65625%,
    #000 100%
  );
}

.header-blur::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(23, 24, 22, 0.55) 0%,
    rgba(23, 24, 22, 0.43) 30%,
    rgba(23, 24, 22, 0.15) 60%,
    rgba(23, 24, 22, 0.03) 85%,
    rgba(23, 24, 22, 0) 100%
  );
}

@media (max-width: 760px) {
  .topbar {
    padding: 12px clamp(20px, 4.7vw, 64px);
    gap: 20px;
  }
}