/* ============================================================
   07-effects.css
   1. Полоса прогресса скролла
   2. Радиальная «проявка цвета» в hero вокруг курсора
   ============================================================ */

/* ----- 1. Прогресс-бар ----- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 300;               /* выше шапки и мобильного меню */
  pointer-events: none;
  background: var(--c-offwhite);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ----- 2. Hero: монохром + цветовая проявка ----- */

/* Убираем старый одиночный фон из hero.css — теперь слои */
.hero-bg {
  background: none;
}

.hero-layer {
  position: absolute;
  inset: 0;
  background: url('../../assets/img/hero-bg.png') center 62% / cover no-repeat;
}

/* Базовый слой — чёрно-белый */
.hero-layer--mono {
  filter: grayscale(1) contrast(1.05) brightness(0.95);
}

/* Цветной слой — виден только в радиусе маски у курсора */
.hero-layer--color {
  filter: saturate(1.3) contrast(1.02);
  opacity: 0;
  transition: opacity 0.7s var(--ease);
  -webkit-mask-image: radial-gradient(
    circle 800px at var(--rx, -1000px) var(--ry, -1000px),
    #000 0%,
    rgba(0, 0, 0, 0.65) 45%,
    transparent 75%
  );
  mask-image: radial-gradient(
    circle 800px at var(--rx, -1000px) var(--ry, -1000px),
    #000 0%,
    rgba(0, 0, 0, 0.65) 45%,
    transparent 75%
  );
}

.hero-layer--color.is-active {
  opacity: 1;
}

/* Оверлей читаемости поверх обоих слоёв */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.62) 0%,
    rgba(10, 10, 10, 0.38) 42%,
    rgba(10, 10, 10, 0.82) 82%,
    var(--c-black) 100%
  );
}