/* PressAff — Halloween 2026 · декоративные сцены (5 сцен)
   Слой поверх сайта: не перехватывает клики, сам себя чистит. */

.pa-hw {
  --pa-hw-scale: 1;
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
.pa-hw * { pointer-events: none; user-select: none; -webkit-user-drag: none; }
.pa-hw img { display: block; max-width: none; }

/* ---------- атмосфера сцены ---------- */
.pa-hw-atmo { position: absolute; inset: 0; opacity: 0; }
.pa-hw-fog { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; }
.pa-hw-fog__blob { position: absolute; border-radius: 50%; will-change: translate; }

/* силуэты (паутина, паук, ведьма) — цвет через маску */
.pa-hw-sil {
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.pa-hw-web { position: absolute; top: 0; opacity: 0; will-change: transform, opacity; }
.pa-hw-spider { position: absolute; top: 0; will-change: translate; }
.pa-hw-spider__thread { width: 1px; margin: 0 auto -2px; background: rgba(25,25,25,.7); }
.pa-hw-witch__fly { position: absolute; left: 0; top: 0; will-change: transform; }

/* ---------- 01 · Скелет ---------- */
.pa-hw-skel {
  position: absolute;
  top: 0;
  width: 67px;                        /* перезаписывается из JS */
  transform-origin: 50% 0;           /* маятник от верхнего края экрана */
  will-change: transform;
}
.pa-hw-skel__thread {
  margin-left: 46.5%;                 /* нить точно над кистями */
  width: 2px;
  background: linear-gradient(#2a2a2a, #1a1a1a);
  opacity: .85;
}
.pa-hw-skel__body { width: 100%; height: auto; filter: drop-shadow(0 10px 14px rgba(0,0,0,.25)); }

/* ---------- 02 · Тыква ---------- */
.pa-hw-pumpkin {
  position: absolute;
  width: calc(210px * var(--pa-hw-scale));
  will-change: transform;
}
.pa-hw-pumpkin svg { display: block; width: 100%; height: auto; overflow: visible; }
.pa-hw-pumpkin__glow {
  position: absolute;
  inset: 18% 12% 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,150,40,.55), rgba(255,110,20,.18) 60%, transparent);
  filter: blur(18px);
  opacity: 0;
  transition: opacity .9s ease;
}
.pa-hw-pumpkin.is-lit .pa-hw-pumpkin__glow { opacity: 1; animation: pa-hw-flicker 2.4s infinite steps(1, end); }
.pa-hw-pumpkin.is-lit svg { animation: pa-hw-flicker-img 2.4s infinite steps(1, end); }

@keyframes pa-hw-flicker {
  0%{opacity:.95} 7%{opacity:.6} 12%{opacity:1} 30%{opacity:.8} 34%{opacity:1}
  55%{opacity:.7} 58%{opacity:.95} 80%{opacity:.75} 86%{opacity:1}
}
@keyframes pa-hw-flicker-img {
  0%{filter:brightness(1)} 7%{filter:brightness(.88)} 12%{filter:brightness(1.06)}
  30%{filter:brightness(.95)} 34%{filter:brightness(1.04)} 55%{filter:brightness(.9)}
  58%{filter:brightness(1)} 80%{filter:brightness(.93)} 86%{filter:brightness(1.05)}
}

/* ---------- 03 · Зомби-руки ---------- */
.pa-hw-hand {
  position: absolute;
  transform-origin: 100% 55%;         /* «плечо» за краем экрана, сторона задаётся из JS */
  will-change: transform;
}
.pa-hw-hand img { width: 100%; height: auto; filter: drop-shadow(-6px 10px 12px rgba(0,0,0,.28)); }
.pa-hw-hand--back img { filter: brightness(.78) drop-shadow(-6px 10px 12px rgba(0,0,0,.28)); }

/* руки снизу */
.pa-hw-arm { position: absolute; bottom: 0; transform-origin: 50% 100%; will-change: translate, rotate; }
.pa-hw-arm img { width: 100%; height: auto; filter: drop-shadow(0 -4px 14px rgba(0,0,0,.25)); }

/* ---------- 04 · Летучие мыши ---------- */
.pa-hw-bat {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform, opacity;
}
.pa-hw-bat__inner { position: relative; width: 100%; height: 100%; }
.pa-hw-bat__f {
  position: absolute;
  inset: 0;
  background: var(--pa-hw-bat-color, #141414);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* два кадра крыльев, переключаются ступенчато = взмах */
.pa-hw-bat--flap .pa-hw-bat__f--up   { animation: pa-hw-flap-a var(--pa-hw-flap, .22s) infinite steps(1, end); }
.pa-hw-bat--flap .pa-hw-bat__f--down { animation: pa-hw-flap-b var(--pa-hw-flap, .22s) infinite steps(1, end); }
@keyframes pa-hw-flap-a { 0%{opacity:1} 50%{opacity:0} }
@keyframes pa-hw-flap-b { 0%{opacity:0} 50%{opacity:1} }

/* ---------- 05 · Котёл ---------- */
.pa-hw-cauldron {
  position: absolute;
  bottom: 0;
  width: calc(190px * var(--pa-hw-scale));
  transform-origin: 50% 100%;
  will-change: transform;
}
.pa-hw-cauldron img { width: 100%; height: auto; filter: drop-shadow(0 0 22px rgba(140,230,40,.35)); }
.pa-hw-bubble {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform, opacity;
}
.pa-hw-bubble img { width: 100%; height: auto; }
.pa-hw-pop {
  position: absolute;
  border: 2px solid rgba(150, 220, 40, .9);
  border-radius: 50%;
}

/* ---------- кнопка звука ---------- */
.pa-hw-sound {
  position: fixed;
  bottom: 16px;
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(21, 21, 21, .78);
  color: #f1efe9;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .3s ease, transform .3s ease, background .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.pa-hw-sound--left { left: 16px; }
.pa-hw-sound--right { right: 16px; }
.pa-hw-sound.is-visible { opacity: 1; transform: none; }
.pa-hw-sound:hover { background: rgba(21, 21, 21, .92); }
.pa-hw-sound:focus-visible { outline: 2px solid #e8641f; outline-offset: 2px; }
.pa-hw-sound.is-off { color: #9a968f; }

@media (prefers-reduced-motion: reduce) { .pa-hw, .pa-hw-sound { display: none !important; } }
@media print { .pa-hw, .pa-hw-sound { display: none !important; } }