/**
 * HAIR ID — texture.css
 *
 * Фактурные фоны разделов: волосы, пена, кремовая гладь, пудра.
 *
 * ЗАЧЕМ. Плоская заливка секции — это «белое полотно», от которого мы уходили
 * с самого начала. Фактура даёт странице материал: под текстом чувствуется
 * поверхность, а не пустой цвет. Для мастера по волосам материал очевиден —
 * сам волос, пена, крем и пудра.
 *
 * КАК УСТРОЕНО. Три слоя, каждый решает свою задачу:
 *
 *   1. Фотография    — крупная фактура, единственный слой с настоящей картинкой.
 *   2. Вуаль         — градиент цвета секции поверх фотографии. Он и делает
 *                      фон фоном: без него текст не читается ни на светлом,
 *                      ни на тёмном.
 *   3. Зерно         — тончайшая плёнка шума на всю страницу. Она убирает
 *                      «цифровую стерильность» градиентов и склеивает
 *                      фотографию с заливкой в одну поверхность.
 *
 * ЗЕРНО. Сделано фильтром feTurbulence прямо в SVG, встроенном как data-URI:
 * ни одного запроса к сети, ни одного килобайта картинки. Приём взят из
 * открытых источников — CSS-Tricks «Grainy Gradients» и разбор feTurbulence
 * у Codrops; сам фильтр входит в стандарт SVG, это не чужой код, а возможность
 * браузера.
 *
 * ЧИТАЕМОСТЬ ВАЖНЕЕ КРАСОТЫ. Непрозрачность подобрана так, чтобы контраст
 * текста остался на прежнем уровне — его мерили и доводили до нормы отдельно.
 * Поэтому на светлых разделах фактура слабее, чем на тёмных: тёмная вуаль
 * прощает больше.
 */

/* ===========================================================================
   Слой фактуры внутри секции
   =========================================================================== */

.tex {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.tex img {
  position: absolute;
  inset: -6% 0 auto 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s var(--ease-out-soft, ease);
}

/* Появляется, когда картинка догрузилась: иначе на её месте мигает пустота */
.tex img.is-loaded { opacity: 1; }

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

/* Содержимое поверх фактуры. Без этого текст оказывается под вуалью. */
.section > .container,
.hero > .container,
.shop-hero > .container,
.band > .container { position: relative; z-index: 1; }

/* Секции, получившие фактуру, должны уметь её удержать.
   overflow: clip, а не hidden: hidden делает секцию контейнером прокрутки
   и ломает position: sticky у потомков — в разделе вопросов такой есть. */
[data-tex],
[data-powder] {
  position: relative;
  overflow: hidden;
  overflow: clip;
}

/* ===========================================================================
   Насыщенность по теме
   =========================================================================== */

/* Светлая секция.
   Первый подход с непрозрачностью 0,16 и плотной вуалью дал фактуру,
   которой на экране просто не видно — снимок был, а фона не было.
   Поэтому распределяем плотность по высоте: вверху, где стоит заголовок
   раздела, вуаль плотная и текст спокойно читается; к середине и низу
   она отпускает, и там фактура наконец видна. Карточки поверх непрозрачные,
   им это не мешает. */
[data-tex] .tex img { opacity: 0; }
[data-tex] .tex img.is-loaded { opacity: 0.34; }

[data-tex] .tex__veil {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--cream-100) 93%, transparent) 0%,
      color-mix(in srgb, var(--cream-100) 84%, transparent) 22%,
      color-mix(in srgb, var(--cream-100) 62%, transparent) 62%,
      color-mix(in srgb, var(--cream-100) 78%, transparent) 100%);
}

/* Тёмная секция: фактуру видно сильнее, вуаль зелёная */
[data-theme='dark'][data-tex] .tex img.is-loaded { opacity: 0.3; }

[data-theme='dark'][data-tex] .tex__veil {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--green-900) 84%, transparent) 0%,
      color-mix(in srgb, var(--green-700) 62%, transparent) 42%,
      color-mix(in srgb, var(--green-900) 88%, transparent) 100%);
}

/* Разделы, где фактура — часть сюжета, а не подложка: показываем смелее */
[data-tex-strong] .tex img.is-loaded { opacity: 0.46; }
[data-theme='dark'][data-tex-strong] .tex img.is-loaded { opacity: 0.42; }

/* ===========================================================================
   Зерно (пудра) — на всю страницу
   ===========================================================================
   baseFrequency 0.9 даёт мелкое зерно, ближе к пудре, чем к песку.
   numOctaves 3 — компромисс: на 1 зерно выглядит машинным, на 5 фильтр
   начинает заметно грузить слабые телефоны.
   =========================================================================== */

.page-grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* На тёмном зерно должно быть заметнее: на светлом оно и так читается */
[data-theme='dark'] .page-grain { opacity: 0.075; }

/* ===========================================================================
   Пудра — живой слой
   ===========================================================================
   Холст с медленно плывущими пылинками. Ставится только в тёмные разделы:
   на светлом золотая пыль не видна, а на зелёном она и есть тот самый
   «луч света с пылью», ради которого снимок и выбран.

   Сам холст рисует texture.js. Здесь только место под него.
   =========================================================================== */

.powder {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out-soft, ease);

  /* Слой выше и ниже секции: параллакс двигает его по вертикали,
     и без запаса по краям вылезала бы пустая полоса. */
  left: 0;
  right: 0;
  top: -14%;
  height: 128%;
  will-change: translate;
}

.powder.is-on { opacity: 1; }
.powder canvas { display: block; width: 100%; height: 100%; }

/* ===========================================================================
   Если человек отключил анимации
   ===========================================================================
   Фактуру и зерно оставляем — они статичные и никого не укачивают.
   Живую пудру выключаем целиком: движение здесь и есть анимация.
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .powder { display: none; translate: none; }
  .tex img { transition: none; }
}

/* ===========================================================================
   Блёстки
   ===========================================================================
   Отдельный слой поверх пудры. Разделу нужны те же свойства, что и под
   пудру: своя система координат и обрезка по краям, иначе звёздочки
   уползают за границу секции и растягивают страницу вбок. */

[data-sparkle] {
  position: relative;
  overflow: hidden;
  overflow: clip;
}

/* Блёстки чуть приглушены: на снимке они и так самые яркие точки кадра. */
.powder--spark.is-on { opacity: 0.85; }