/* Хэллоуин: гирлянды из img/halloween. Подключается ПОСЛЕ всех остальных css; чтобы убрать праздник —
   удалить <link> на этот файл. Чисто декор (псевдоэлементы, pointer-events: none).
   Ассеты: bunting.png (800x203, нить на левом/правом краях на одной высоте — стыкуется встык),
           swag-l.png (339x280, свисающая гирлянда: острая вершина-крючок на правом краю, нить уходит за левый край). */

:root { --hw-ribbon: 32px; --hw-swag: 0px; }

/* 1) Шапка: флажки свисают с нижней кромки. repeat: round подгоняет ширину плитки так, чтобы в строку
      влезало ЦЕЛОЕ число плиток: нить начинается и заканчивается ровно у краёв ленты, без обрезанных флажков */
.header::after {
  content: ''; position: absolute; top: 100%; left: var(--hw-swag); right: var(--hw-swag); height: var(--hw-ribbon);
  margin-top: -1px; pointer-events: none;
  background-image: url('/img/halloween/bunting.png'); background-repeat: round no-repeat;
  background-position: 0 0; background-size: auto var(--hw-ribbon);
}

/* 2) Подвал: та же лента над контентом (подвалу добавлен верхний отступ под неё) */
.footer { padding-top: 30px; }
.footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40px; z-index: 1; pointer-events: none;
  background-image: url('/img/halloween/bunting.png'); background-repeat: round no-repeat;
  background-position: 0 0; background-size: auto 40px;
}

/* 3) Широкие экраны: по углам под шапкой висят свисающие гирлянды (только в пустых полях по бокам контента).
      Вершина-крючок цепляется за кромку шапки, нить уходит за край экрана; лента флажков идёт между ними */
@media (min-width: 1700px) {
  :root { --hw-swag: clamp(214px, calc((100vw - 1240px) / 2 - 12px), 300px); }
  .header::before {
    content: ''; position: absolute; top: 100%; left: 0; right: 0; height: calc(var(--hw-swag) * 376 / 640);
    margin-top: -1px; pointer-events: none;
    background-image: url('/img/halloween/swag-l.png'), url('/img/halloween/swag-r.png');
    background-repeat: no-repeat; background-position: left top, right top;
    background-size: var(--hw-swag) auto;
  }
}

/* Страницы, где заголовок вплотную к шапке, сдвигаем вниз на высоту ленты, чтобы флажки не закрывали текст */
.supportview { padding-top: 40px; }  /* B-18: +6px, заголовок не под лентой */
.titleview { padding-top: 14px; }
.newsview { padding-top: 6px; }

@media (max-width: 720px) {
  .supportview { padding-top: 30px; }
  .topview { padding-top: 48px; }
  .titleview { padding-top: 8px; }
  :root { --hw-ribbon: 26px; }
  .footer { padding-top: 22px; }
  .footer::before { height: 28px; background-size: auto 28px; }
}

/* Лента в шапке исчезает при прокрутке (где поддерживается), чтобы не закрывать контент */
@supports (animation-timeline: scroll()) {
  .header::before, .header::after { animation: hw-fade linear both; animation-timeline: scroll(root); animation-range: 0 140px; }
  @keyframes hw-fade { to { opacity: 0; } }
}

/* 3) Паучки на шёлковой нити (js/spiders.js): рисунок и движение считаются в JS, здесь только слои */
.hw-spiders { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.hw-spider { position: absolute; top: 0; left: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; pointer-events: none; }
.hw-th { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
.hw-body { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.hw-body svg { position: absolute; display: block; overflow: visible; }
.hw-glow { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(176, 140, 255, .3) 0%, rgba(130, 84, 230, .12) 42%, rgba(130, 84, 230, 0) 70%); }
@media (max-width: 720px) { .hw-spiders { z-index: 30; } }