/* B3 · прогон 18 · фоновые рисунки (пульт «Фоновые рисунки»: html[data-bgl="on"|"off"]).
   Роман 26.10 вечер: «полупрозрачные фоновые элементы, как у Вирджинии — едва заметные, но красиво заполняют визуальную пустоту».
   Рисунки — настоящие гравюры общественного достояния (вырезка и тон, не раскраска): перо — «Энциклопедия», Art d'écrire, pl. II (1760-е);
   раскрытая книга — Дюрер, «Эразм Роттердамский» (1526); колокол — Дюрер, «Меланхолия I» (1514); дубовая ветвь — Мастер W с ключом (ок. 1470);
   знаки ✛ и звезда-вспышка — свои (знак бренда). Файлы — маски (только альфа), цвет даёт CSS: тушь на бумаге, золото/кость на плитах.
   Крупные (не «наклейки», REJECTED п. 24), 7–14 %, за текстом не стоят; движутся только предметы и знаки (вращение 90 с на оборот,
   колокол качается). prefers-reduced-motion — стоят. Источники — council48/pd/SOURCES-18.md (строки B3). */

html:is([data-bgl="on"],[data-bgl="more"]) .b18h{isolation:isolate}
html:is([data-bgl="on"],[data-bgl="more"]) .bg18{position:absolute;z-index:-1;display:block;pointer-events:none;user-select:none}
html:is([data-bgl="on"],[data-bgl="more"]) .bg18>i{display:block;width:100%;height:100%;background:var(--b18c,#24262b);opacity:var(--b18o,.08);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}

/* маски */
html:is([data-bgl="on"],[data-bgl="more"]) .bg18--star>i {-webkit-mask-image:url(bg18/star.webp);mask-image:url(bg18/star.webp)}
html:is([data-bgl="on"],[data-bgl="more"]) .bg18--cross>i{-webkit-mask-image:url(bg18/cross.webp);mask-image:url(bg18/cross.webp)}
html:is([data-bgl="on"],[data-bgl="more"]) .bg18--quill>i{-webkit-mask-image:url(bg18/quill.webp);mask-image:url(bg18/quill.webp)}
html:is([data-bgl="on"],[data-bgl="more"]) .bg18--book>i {-webkit-mask-image:url(bg18/book.webp);mask-image:url(bg18/book.webp)}
html:is([data-bgl="on"],[data-bgl="more"]) .bg18--bell>i {-webkit-mask-image:url(bg18/bell.webp);mask-image:url(bg18/bell.webp)}
html:is([data-bgl="on"],[data-bgl="more"]) .bg18--oak>i  {-webkit-mask-image:url(bg18/oak.webp);mask-image:url(bg18/oak.webp)}

/* движение: знаки — медленный оборот (соседние в разные стороны), колокол — качание от ушка */
@keyframes bg18-turn{to{transform:rotate(360deg)}}
@keyframes bg18-swing{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@media (prefers-reduced-motion:no-preference){
  html:is([data-bgl="on"],[data-bgl="more"]) .bg18--star>i{animation:bg18-turn 90s linear infinite}
  html:is([data-bgl="on"],[data-bgl="more"]) .bg18--cross>i{animation:bg18-turn 120s linear infinite reverse}
  html:is([data-bgl="on"],[data-bgl="more"]) .bg18--bell>i{transform-origin:50% 4%;animation:bg18-swing 4.6s ease-in-out infinite alternate}
}

/* ---------- ПК ---------- */
@media (min-width:1024px){
  /* шапка: пустая бумага справа от ангела (≈ 270 px на 1710) — золотая звезда-вспышка у крыла */
  html:is([data-bgl="on"],[data-bgl="more"]) .hero>.bg18--star{right:2.2%;top:12%;width:clamp(170px,15.5vw,290px);aspect-ratio:1;--b18c:#c9a84c;--b18o:.16}
  /* отзывы: пустота между подзаголовком и стрелками — перо наискось */
  html:is([data-bgl="on"],[data-bgl="more"]) .bg18--quill{right:21%;top:2.5%;width:min(34vw,580px);aspect-ratio:900/164;transform:rotate(-4deg);--b18o:.1}
  /* цены, строка «Учим на совесть»: пустота между заголовком и примером — ✛ золотом */
  html:is([data-bgl="on"],[data-bgl="more"]) .x10-sc>.bg18--cross{left:41%;top:50%;width:clamp(130px,10vw,180px);aspect-ratio:1;margin-top:calc(clamp(130px,10vw,180px) / -2);--b18c:#c9a84c;--b18o:.2}
  /* вопросы: дубовая ветвь — правый верх раздела (пустота справа от подзаголовка; вниз уходит под коробку совы) */
  html:is([data-bgl="on"],[data-bgl="more"]) [data-vid="faq"]>.bg18--oak,html:is([data-bgl="on"],[data-bgl="more"]) section#faq>.bg18--oak{right:1.5%;top:1%;width:min(36vw,600px);aspect-ratio:900/1156;--b18o:.09}
  /* вопросы: раскрытая книга — под списком вопросов, над ссылкой «Задать свой вопрос» */
  html:is([data-bgl="on"],[data-bgl="more"]) [data-vid="faq"]>.bg18--book,html:is([data-bgl="on"],[data-bgl="more"]) section#faq>.bg18--book{left:3%;bottom:12%;width:min(25vw,400px);aspect-ratio:800/318;--b18o:.1}
  /* запись: колокол-звонок на урок — костью по лазури, под «Когда платить?», покачивается */
  html:is([data-bgl="on"],[data-bgl="more"]) .zm-plate>.bg18--bell{left:2.5%;top:69%;width:clamp(140px,11vw,190px);aspect-ratio:204/232;--b18c:#fbf8f1;--b18o:.2}
}

/* ---------- телефон: только там, где есть пустота не за текстом (на 390 её почти нет: перо лежало под стрелками отзывов — снято) ---------- */
@media (max-width:1023.98px){
  html:is([data-bgl="on"],[data-bgl="more"]) :is(.bg18--oak,.bg18--book,.bg18--cross,.bg18--bell,.bg18--quill){display:none}
  /* шапка: звезда над правым крылом, в пустоте между вводными и ангелом — проверить кадром */
  html:is([data-bgl="on"],[data-bgl="more"]) .hero>.bg18--star{right:1.5%;top:41%;width:36vw;aspect-ratio:1;--b18c:#c9a84c;--b18o:.16}
}

/* S2 (по слову дирижёра): «Прогон 18 · заметнее» — та же разметка, непрозрачность ×2, не больше 25 % */
html[data-bgl="more"] .bg18>i{opacity:min(calc(var(--b18o,.08) * 2),.25)}