/* ──────────────────────────────────────────────────────────────
   R4GE — сезонный слой «Хэллоуин» (минимализм).
   Накладывается поверх синей темы: паутинки по углам,
   редкие летучие мыши, лёгкие оранжевые угольки.
   Чтобы убрать после сезона — удали halloween.css/js из темы
   и две строки подключения в layouts/master.njk.
   ────────────────────────────────────────────────────────────── */

#hw-overlay{
  position:fixed; inset:0; pointer-events:none; overflow:hidden;
  z-index:9998; /* декоративный веер поверх, клики проходят насквозь */
}

/* ── паутинки по верхним углам ── */
#hw-overlay .hw-web{
  position:absolute; top:0; width:clamp(90px,10vw,160px); height:clamp(90px,10vw,160px);
  color:rgba(205,222,255,.14);
}
#hw-overlay .hw-web svg{width:100%;height:100%;display:block}
#hw-overlay .hw-web-l{left:0}
#hw-overlay .hw-web-r{right:0;transform:scaleX(-1)}
@media(max-width:620px){#hw-overlay .hw-web{width:72px;height:72px}}

/* ── летучие мыши (редкие, медленные, еле заметные) ── */
#hw-overlay .hw-bat{
  position:absolute; top:0; left:0; width:38px;
  color:rgba(150,165,205,.28);
  filter:drop-shadow(0 0 6px rgba(0,0,0,.35));
  will-change:transform;
  animation:hw-fly linear infinite;
}
#hw-overlay .hw-bat svg{width:100%;height:auto;display:block;
  transform-origin:50% 40%;
  animation:hw-flap .4s ease-in-out infinite alternate;
}
@keyframes hw-fly{
  0%  {transform:translate(-8vw, 68vh) rotate(-4deg)}
  50% {transform:translate(52vw, 22vh) rotate(3deg)}
  100%{transform:translate(112vw, 58vh) rotate(-2deg)}
}
@keyframes hw-flap{from{transform:scaleY(1) scaleX(1)}to{transform:scaleY(.6) scaleX(1.04)}}

/* ── оранжевые угольки (поднимаются снизу, очень мягко) ── */
#hw-overlay .hw-ember{
  position:absolute; bottom:-12px; width:3px; height:3px; border-radius:50%;
  background:rgba(255,158,56,.8);
  box-shadow:0 0 7px 2px rgba(255,120,24,.45);
  will-change:transform,opacity;
  animation:hw-rise linear infinite;
}
@keyframes hw-rise{
  0%  {transform:translateY(0) translateX(0) scale(1); opacity:0}
  12% {opacity:.9}
  100%{transform:translateY(-104vh) translateX(22px) scale(.5); opacity:0}
}

/* ── лёгкий тёплый туман у низа страницы ── */
#hw-overlay .hw-fog{
  position:absolute; left:0; right:0; bottom:0; height:160px;
  background:linear-gradient(to top, rgba(255,120,30,.055), transparent);
}

@media (prefers-reduced-motion: reduce){
  #hw-overlay .hw-bat,#hw-overlay .hw-ember,#hw-overlay .hw-bat svg{animation:none}
  #hw-overlay .hw-bat,#hw-overlay .hw-ember{display:none}
}

/* ── announcement-строка (промокод) ── */
#hw-bar{
  position:sticky; top:0; z-index:10000; display:flex; align-items:center; justify-content:center;
  gap:10px; flex-wrap:wrap; text-align:center;
  padding:8px 42px; min-height:38px; box-sizing:border-box;
  font:600 13px/1.35 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  letter-spacing:.02em; color:#ffe6d2;
  background:linear-gradient(90deg,#1c0d04,#3f1807 45%,#3f1807 55%,#1c0d04);
  border-bottom:1px solid rgba(255,140,40,.35);
  box-shadow:0 2px 20px rgba(255,110,20,.12);
}
#hw-bar .hw-pk{filter:drop-shadow(0 0 6px rgba(255,120,20,.5))}
#hw-bar b{color:#ff9a38}
#hw-bar .hw-code{
  background:rgba(255,140,40,.14); border:1px solid rgba(255,150,50,.45);
  border-radius:6px; padding:2px 9px; color:#ffb164; font-weight:800; letter-spacing:.08em;
  cursor:pointer; pointer-events:auto; user-select:all; outline:none;
  transition:background .15s, border-color .15s, color .15s, transform .1s;
}
#hw-bar .hw-code:hover{background:rgba(255,150,50,.24); border-color:rgba(255,170,70,.7); color:#ffd09a}
#hw-bar .hw-code:active{transform:scale(.96)}
#hw-bar .hw-code.is-copied{background:rgba(70,200,90,.18); border-color:rgba(90,210,110,.6); color:#8ef0a0}
#hw-bar .hw-x{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  cursor:pointer; pointer-events:auto; width:22px; height:22px; border-radius:6px;
  display:grid; place-items:center; color:#ffcaa0; font-size:15px; line-height:1;
  opacity:.7; transition:opacity .15s, background .15s;
}
#hw-bar .hw-x:hover{opacity:1; background:rgba(255,140,40,.15)}

/* ── паук на паутинке ── */
#hw-overlay .hw-spider{
  position:absolute; top:0; left:17%; width:30px; transform-origin:top center;
  animation:hw-spider-bob 4.2s ease-in-out infinite;
}
#hw-overlay .hw-spider .hw-thread{
  width:1px; height:84px; margin:0 auto;
  background:linear-gradient(to bottom, rgba(205,222,255,.05), rgba(205,222,255,.22));
}
#hw-overlay .hw-spider .hw-spider-svg{
  display:block; width:30px; margin:-1px auto 0;
  color:rgba(164,178,214,.34);
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.4));
}
@keyframes hw-spider-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
@media(max-width:620px){#hw-overlay .hw-spider{left:8%;width:24px}#hw-overlay .hw-spider .hw-spider-svg{width:24px}}

@media (prefers-reduced-motion: reduce){#hw-overlay .hw-spider{animation:none}}