/* Модуль «Візерунок на фоні».
   Ледь помітні малюнки (лотос, флейта, перо павича, ноти, лампадка…) поверх кольору сторінки — як шпалери в Telegram.
   Малюнок — маска pattern.svg. Два шари: світлий для темних блоків і темний для світлих.
   При зміні блоку шари лише плавно міняються прозорістю — без перемальовування, тож сторінка й курсор не гальмують.
   На фото першого екрана й фіналу візерунка не видно — вони лежать вище. */
html::before, body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask: url('pattern.svg') 0 0 / 340px 340px repeat;
  mask: url('pattern.svg') 0 0 / 340px 340px repeat;
  opacity: 0;
  transition: opacity .9s ease;
}
html::before { background: #f3ece0; }
body::before { background: #1d1a2e; }

html[data-scheme="night"]::before, html[data-scheme="indigo"]::before, html[data-scheme="tulasi"]::before { opacity: .05; }
html[data-scheme="paper"] body::before { opacity: .045; }
html[data-scheme="saffron"] body::before { opacity: .065; }

@media (min-width: 900px) {
  html::before, body::before { -webkit-mask-size: 420px 420px; mask-size: 420px 420px; }
}