/* ============================================================================
   site/fx/contours.css — горизонтали на полотне (fx/contours.js).

   Холст живёт внутри .aurora: тот неподвижен, стоит под всем содержимым
   (z-index:-1) и сам является слоем наложения — difference смешивает линии
   только с краской полотна, а не с разделами над ним.

   Белое с difference вычитается из цвета под собой: на тёмном полотне линия
   выходит чуть светлее, на бумаге и песке — чуть темнее. Одна прозрачность
   на оба климата не годится: светлая линия на тёмном заметнее тёмной на
   светлом при той же разнице яркости, поэтому на светлом полотне её чуть
   больше. Переход едет вслед за классом is-light, который ставит tone.js.
   ========================================================================== */

.fx-contours{
  position:absolute; left:0; top:0; width:100%;
  display:block; pointer-events:none;
  mix-blend-mode:difference;
  opacity:0;
  /* Появление один раз, когда карта дорисована, — не мигание, а приход. */
  transition:opacity 1.6s cubic-bezier(.165,.84,.44,1);
  /* Слой свой, сдвиг — на видеокарте: холст не перерисовывается прокруткой. */
  will-change:transform;
}
.fx-contours.is-on{ opacity:.075 }
/* На бумаге и песке тот же рисунок читается сильнее, чем на тёмном, и
   спорил с серым текстом разделов — поэтому тише. */
.is-light .fx-contours.is-on{ opacity:.065 }

@media (prefers-reduced-motion: reduce){
  .fx-contours{ transition:none; will-change:auto }
}

/* Режим высокой контрастности сам решает цвета — декоративная карта ему
   только мешает. На печати полотна нет вовсе. */
@media (forced-colors: active){ .fx-contours{ display:none } }
@media print{ .fx-contours{ display:none } }