/*!
 * Cheltsov Halloween — слой поверх сайта. Версия 0.1.0.
 * Все селекторы с префиксом .hw / .hw-* и не пересекаются с сайтом.
 * Слой не перехватывает клики: pointer-events: none на корне.
 */

/* ---------- корень и подложки ---------- */

.hw {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2147483000;
  contain: layout paint style;
}

.hw__layer {
  position: absolute;
  inset: 0;
}

.hw__fog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30vh;
  pointer-events: none;
  opacity: 0.7;
  background:
    radial-gradient(70% 100% at 18% 118%, rgba(126, 62, 168, 0.10), transparent 70%),
    radial-gradient(60% 100% at 82% 124%, rgba(232, 113, 43, 0.09), transparent 70%);
}

/* ---------- летящие сущности ---------- */

.hw-item {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.hw-item__drift {
  position: absolute;
  inset: 0;
  animation: hw-motion var(--hw-life, 1200ms) cubic-bezier(0.16, 0.7, 0.34, 1) forwards;
}

.hw-item__flip {
  position: absolute;
  inset: 0;
  transform: scaleX(var(--hw-flip, 1));
}

.hw-item__art {
  position: absolute;
  inset: 0;
}

.hw-item__art svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 2px 4px rgba(42, 23, 48, 0.3));
}

.hw-item--fly .hw-item__drift { animation-name: hw-motion; }
.hw-item--rise .hw-item__drift { animation-name: hw-rise; animation-timing-function: cubic-bezier(0.16, 0.68, 0.28, 1); }
.hw-item--cross .hw-item__drift { animation-name: hw-cross; animation-timing-function: linear; }
.hw-item--escape .hw-item__drift { animation-name: hw-escape; animation-timing-function: cubic-bezier(0.18, 0.66, 0.36, 1); }
.hw-item--pop .hw-item__drift { animation-name: hw-pop; animation-timing-function: cubic-bezier(0.16, 0.8, 0.3, 1); }
.hw-item--crawl .hw-item__drift { animation-name: hw-crawl; animation-timing-function: linear; }
.hw-item--peek .hw-item__drift { animation-name: hw-peek; animation-timing-function: cubic-bezier(0.2, 0.7, 0.32, 1); }
.hw-item--spooky .hw-item__drift { animation-name: hw-spooky; animation-timing-function: ease-out; }

/* Метла держит курс с первого кадра: угол не интерполируется, иначе
   она полпути летит боком и «клюёт» носом. */
.hw-item--broom.hw-item--fly .hw-item__drift { animation-name: hw-motion-broom; }
.hw-item--broom.hw-item--escape .hw-item__drift { animation-name: hw-escape-broom; }

/* кликабельная тыква у края: единственный элемент слоя, который ловит курсор */
.hw-item--clickable {
  pointer-events: auto;
  cursor: pointer;
}

.hw-item--clickable .hw-item__art svg {
  filter: drop-shadow(0 0 14px rgba(255, 150, 60, 0.55)) drop-shadow(0 2px 4px rgba(42, 23, 48, 0.3));
}

/* тыква дышит и светится — всполохи идут от неё самой */
.hw-item--clickable .hw-item__art {
  animation: hw-bob 2600ms ease-in-out infinite alternate;
}

.hw-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 170%;
  height: 170%;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 186, 96, 0.45) 0%, rgba(255, 140, 50, 0.2) 34%, rgba(180, 80, 160, 0.08) 58%, transparent 72%);
  animation: hw-halo 2400ms ease-in-out infinite;
}

/* ---------- подсказка на тыкве для новичка ---------- */

.hw-cta {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(26, 16, 34, 0.94);
  border: 1px solid rgba(255, 179, 71, 0.5);
  color: #ffe2a8;
  font: 600 12px/1.2 Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  animation: hw-cta 1300ms ease-in-out infinite alternate;
}

.hw-cta::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(26, 16, 34, 0.94);
}

.hw-item--cta-below .hw-cta {
  bottom: auto;
  top: calc(100% + 8px);
}

.hw-item--cta-below .hw-cta::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: rgba(26, 16, 34, 0.94);
}

.hw-item--cta-1 .hw-cta { font-size: 13px; color: #ffd08a; }
.hw-item--cta-2 .hw-cta { font-size: 14px; color: #ffb347; border-color: rgba(255, 140, 50, 0.7); }
.hw-item--cta-3 .hw-cta {
  font-size: 16px;
  color: #fff3d6;
  background: rgba(120, 24, 10, 0.95);
  border-color: rgba(255, 200, 120, 0.9);
  animation-duration: 520ms;
}

.hw-item--cta-3 .hw-halo {
  animation-duration: 900ms;
  background: radial-gradient(circle, rgba(255, 200, 120, 0.75) 0%, rgba(255, 110, 40, 0.4) 36%, rgba(190, 60, 40, 0.16) 60%, transparent 74%);
}

@keyframes hw-cta {
  from { opacity: 0.85; transform: translateX(-50%) scale(1); }
  to { opacity: 1; transform: translateX(-50%) scale(1.06); }
}

@keyframes hw-halo {
  0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.86); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

@keyframes hw-motion {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(var(--hw-from, 0.55)); opacity: 0; }
  12% { opacity: 1; }
  72% { opacity: 1; }
  100% { transform: translate3d(var(--hw-dx, 60px), var(--hw-dy, -60px), 0) rotate(var(--hw-rot, 0deg)) scale(1); opacity: 0; }
}

@keyframes hw-motion-broom {
  0% { transform: translate3d(0, 0, 0) rotate(var(--hw-rot, 0deg)) scale(var(--hw-from, 0.55)); opacity: 0; }
  12% { opacity: 1; }
  72% { opacity: 1; }
  100% { transform: translate3d(var(--hw-dx, 60px), var(--hw-dy, -60px), 0) rotate(var(--hw-rot, 0deg)) scale(1); opacity: 0; }
}

@keyframes hw-escape-broom {
  0% { transform: translate3d(0, 0, 0) rotate(var(--hw-rot, 0deg)) scale(var(--hw-from, 0.55)); opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translate3d(var(--hw-dx, 300px), var(--hw-dy, -300px), 0) rotate(var(--hw-rot, 0deg)) scale(1); opacity: 0; }
}

@keyframes hw-rise {
  0% { transform: translate3d(0, 24px, 0) scale(var(--hw-from, 0.85)); opacity: 0; }
  16% { opacity: 1; }
  78% { opacity: 1; }
  100% { transform: translate3d(var(--hw-dx, 0px), var(--hw-dy, -140px), 0) rotate(var(--hw-rot, 0deg)) scale(1); opacity: 0; }
}

@keyframes hw-cross {
  0% { transform: translate3d(0, 0, 0) rotate(var(--hw-rot, 0deg)); opacity: 0; }
  6% { opacity: 1; }
  94% { opacity: 1; }
  100% { transform: translate3d(var(--hw-dx, 100vw), var(--hw-dy, 0px), 0) rotate(var(--hw-rot, 0deg)); opacity: 0; }
}

/* уносится за край экрана, гаснет только у самого края */
@keyframes hw-escape {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(var(--hw-from, 0.55)); opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translate3d(var(--hw-dx, 300px), var(--hw-dy, -300px), 0) rotate(var(--hw-rot, 0deg)) scale(1); opacity: 0; }
}

/* выскочил и растаял рядом */
@keyframes hw-pop {
  0% { transform: translate3d(0, 0, 0) scale(0.35); opacity: 0; }
  22% { transform: translate3d(0, 0, 0) scale(1.12); opacity: 1; }
  60% { transform: translate3d(var(--hw-dx, 30px), var(--hw-dy, -30px), 0) scale(1); opacity: 1; }
  100% { transform: translate3d(var(--hw-dx, 30px), var(--hw-dy, -30px), 0) scale(0.88); opacity: 0; }
}

/* паук перебегает и в конце срывается вверх */
@keyframes hw-crawl {
  0% { transform: translate3d(0, 0, 0); }
  82% { transform: translate3d(var(--hw-dx, 200px), var(--hw-dy, 0px), 0); opacity: 1; }
  100% { transform: translate3d(var(--hw-dx, 200px), calc(var(--hw-dy, 0px) - 170px), 0); opacity: 0; }
}

/* тыква-приманка у края: выпрыгнула, покачивается, уходит */
@keyframes hw-spooky {
  0% { transform: translate3d(0, 18px, 0) scale(0.5); opacity: 0; }
  8% { transform: translate3d(0, -4px, 0) scale(1.08); opacity: 1; }
  14% { transform: translate3d(0, 0, 0) scale(1); }
  80% { transform: translate3d(0, -3px, 0) scale(1); opacity: 1; }
  100% { transform: translate3d(0, -14px, 0) scale(0.94); opacity: 0; }
}

/* выглянул, замер, спрятался */
@keyframes hw-peek {
  0% { transform: translate3d(0, 0, 0); }
  16% { transform: translate3d(var(--hw-dx, 20px), var(--hw-dy, -20px), 0); }
  78% { transform: translate3d(var(--hw-dx, 20px), var(--hw-dy, -20px), 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* мышь машет крыльями и покачивается */
.hw-item--bat .hw-wing,
.hw-pl--bat .hw-wing {
  transform-box: fill-box;
}

.hw-item--bat .hw-wing--l,
.hw-pl--bat .hw-wing--l {
  transform-origin: 100% 60%;
  animation: hw-flap-l 250ms ease-in-out infinite alternate;
}

.hw-item--bat .hw-wing--r,
.hw-pl--bat .hw-wing--r {
  transform-origin: 0% 60%;
  animation: hw-flap-r 250ms ease-in-out infinite alternate;
}

@keyframes hw-flap-l {
  from { transform: scaleY(1) rotate(0deg); }
  to { transform: scaleY(0.38) rotate(8deg); }
}

@keyframes hw-flap-r {
  from { transform: scaleY(1) rotate(0deg); }
  to { transform: scaleY(0.38) rotate(-8deg); }
}

.hw-item--bat .hw-item__art {
  animation: hw-bob 620ms ease-in-out infinite alternate;
}

/* волна — сложная траектория пролёта */
.hw-item--wave .hw-item__art svg {
  animation: hw-wave var(--hw-wave-dur, 2000ms) ease-in-out infinite;
}

@keyframes hw-wave {
  0%, 100% { transform: translateY(calc(var(--hw-amp, 20px) * -1)); }
  50% { transform: translateY(var(--hw-amp, 20px)); }
}

/* паук семенит лапами */
.hw-item--spider.hw-item--crawl .hw-item__art {
  animation: hw-skitter 170ms ease-in-out infinite alternate;
}

@keyframes hw-skitter {
  from { transform: translateY(-1px) rotate(-3deg); }
  to { transform: translateY(1.5px) rotate(3deg); }
}

/* выглядывание: покачивается, как живой */
.hw-item--peek .hw-item__art {
  animation: hw-wiggle 900ms ease-in-out infinite alternate;
}

@keyframes hw-wiggle {
  from { transform: rotate(-5deg) translateY(0); }
  to { transform: rotate(5deg) translateY(-2px); }
}

@keyframes hw-bob {
  from { transform: translateY(-3px); }
  to { transform: translateY(3px); }
}

/* привидение парит, а не летит по прямой */
.hw-item--ghost .hw-item__art {
  animation: hw-float 2100ms ease-in-out infinite alternate;
}

@keyframes hw-float {
  from { transform: translateY(-5px) rotate(-2deg); }
  to { transform: translateY(5px) rotate(2deg); }
}

/* огонёк пульсирует */
.hw-item--wisp .hw-item__art {
  animation: hw-pulse 1200ms ease-in-out infinite alternate;
}

@keyframes hw-pulse {
  from { opacity: 0.65; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1.08); }
}

/* избушка и Кощей слегка покачиваются */
.hw-item--hut .hw-item__art,
.hw-item--yaga .hw-item__art,
.hw-item--koschei .hw-item__art {
  animation: hw-sway 2600ms ease-in-out infinite alternate;
}

@keyframes hw-sway {
  from { transform: rotate(-3deg); }
  to { transform: rotate(3deg); }
}

/* ---------- фоновое: тыквы в углах и паук ---------- */

.hw-corner {
  position: absolute;
  bottom: -14px;
  width: clamp(56px, 7vw, 92px);
  height: clamp(56px, 7vw, 92px);
  opacity: 0.95;
}

.hw-corner--bl { left: 6px; }
.hw-corner--br { right: 6px; }

.hw-corner__art {
  width: 100%;
  height: 100%;
  animation: hw-breathe 4200ms ease-in-out infinite alternate;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 18px rgba(255, 138, 54, 0.35));
}

.hw-corner__art svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes hw-breathe {
  from { transform: scale(1) translateY(0); }
  to { transform: scale(1.045) translateY(-3px); }
}

.hw-peek-mask {
  position: fixed;
  inset: 0;
}

.hw-spider {
  position: absolute;
  top: -20px;
  width: 26px;
  height: 230px;
  transform-origin: 50% 0;
  animation: hw-spider-sway 6500ms ease-in-out infinite alternate;
}

.hw-spider__thread {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(rgba(239, 230, 216, 0.5), rgba(239, 230, 216, 0.12));
}

.hw-spider__art {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 26px;
  height: 26px;
  transform: translateX(-50%);
  animation: hw-spider-bob 3200ms ease-in-out infinite alternate;
}

.hw-spider__art svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes hw-spider-sway {
  from { transform: rotate(-4deg); }
  to { transform: rotate(4deg); }
}

@keyframes hw-spider-bob {
  from { transform: translate(-50%, 0); }
  to { transform: translate(-50%, -14px); }
}

/* ---------- всполох и пугающая фраза ---------- */

.hw-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--hw-x, 50%) var(--hw-y, 50%), rgba(255, 236, 190, 0.98) 0%, rgba(255, 150, 60, 0.6) 20%, rgba(150, 70, 190, 0.28) 45%, rgba(60, 20, 80, 0.12) 70%, transparent 88%),
    radial-gradient(circle at var(--hw-x, 50%) var(--hw-y, 50%), rgba(255, 255, 255, 0.35) 0%, transparent 55%);
  animation: hw-flash 700ms ease-out forwards;
}

/* большой всполох, когда тыква «дозрела» до взрыва */
.hw-flash--big {
  background:
    radial-gradient(circle at var(--hw-x, 50%) var(--hw-y, 50%), rgba(255, 244, 214, 1) 0%, rgba(255, 160, 60, 0.75) 18%, rgba(190, 80, 200, 0.35) 42%, rgba(70, 20, 90, 0.18) 66%, transparent 86%),
    radial-gradient(circle at var(--hw-x, 50%) var(--hw-y, 50%), rgba(255, 255, 255, 0.55) 0%, transparent 45%);
}

@keyframes hw-flash {
  0% { opacity: 0; }
  10% { opacity: 1; }
  28% { opacity: 0.25; }
  42% { opacity: 0.75; }
  100% { opacity: 0; }
}

.hw-phrase {
  position: absolute;
  transform: translate(-50%, -100%);
  max-width: min(320px, 72vw);
  padding: 9px 15px;
  border-radius: 14px;
  background: rgba(20, 12, 28, 0.92);
  border: 1px solid rgba(255, 179, 71, 0.45);
  color: #ffe2a8;
  font: 500 15px/1.3 Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  text-align: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  animation: hw-phrase 2900ms ease forwards;
}

@keyframes hw-phrase {
  0% { opacity: 0; transform: translate(-50%, -88%) scale(0.9); }
  10% { opacity: 1; transform: translate(-50%, -112%) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -140%) scale(0.98); }
}

/* ---------- тост ---------- */

.hw-toast {
  position: absolute;
  left: 16px;
  bottom: 96px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 8px 16px 8px 8px;
  border-radius: 999px;
  background: rgba(26, 17, 34, 0.9);
  border: 1px solid rgba(255, 179, 71, 0.36);
  color: #f2e9dc;
  font: 13px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(10px);
  animation: hw-toast-in 420ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

.hw-toast.is-out {
  animation: hw-toast-out 400ms ease forwards;
}

.hw-toast__art {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
}

.hw-toast__art svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes hw-toast-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hw-toast-out {
  to { opacity: 0; transform: translateY(10px); }
}

/* ---------- прелоадеры ---------- */

.hw-pl {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* смеющаяся тыква */
.hw-pl--pumpkin .hw-pl__squash {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: hw-pl-squash 900ms ease-in-out infinite;
}

.hw-pl--pumpkin .hw-pl__mouth {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: hw-pl-laugh 700ms ease-in-out infinite;
}

.hw-pl--pumpkin .hw-pl__eye {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: hw-pl-blink 3400ms ease-in-out infinite;
}

.hw-pl--pumpkin .hw-pl__sparks {
  animation: hw-pl-sparkle 1400ms ease-in-out infinite alternate;
}

@keyframes hw-pl-squash {
  0%, 100% { transform: scale(1, 1); }
  45% { transform: scale(1.05, 0.94); }
}

@keyframes hw-pl-laugh {
  0%, 100% { transform: scaleY(0.45); }
  50% { transform: scaleY(1.15); }
}

@keyframes hw-pl-blink {
  0%, 91%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.12); }
}

@keyframes hw-pl-sparkle {
  from { opacity: 0.15; }
  to { opacity: 0.9; }
}

/* мышь в полёте по кругу */
.hw-pl--bat .hw-pl__fly {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: hw-pl-orbit 4200ms linear infinite;
}

@keyframes hw-pl-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Баба-Яга в ступе */
.hw-pl--yaga .hw-pl__pestle {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: hw-pl-bob 1800ms ease-in-out infinite alternate;
}

.hw-pl--yaga .hw-pl__broom {
  transform-box: view-box;
  transform-origin: 58px 64px;
  animation: hw-pl-sweep 1400ms ease-in-out infinite alternate;
}

.hw-pl--yaga .hw-pl__smoke {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: hw-pl-smoke 2600ms ease-in-out infinite;
}

@keyframes hw-pl-bob {
  from { transform: translateY(0) rotate(-1.5deg); }
  to { transform: translateY(-3px) rotate(1.5deg); }
}

@keyframes hw-pl-sweep {
  from { transform: rotate(-7deg); }
  to { transform: rotate(9deg); }
}

@keyframes hw-pl-smoke {
  0% { opacity: 0.15; transform: translateY(4px); }
  50% { opacity: 0.6; transform: translateY(-2px); }
  100% { opacity: 0.15; transform: translateY(4px); }
}

/* ---------- уважение к prefers-reduced-motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .hw-item__art,
  .hw-item__art svg,
  .hw-halo,
  .hw-cta,
  .hw-pl *,
  .hw-corner__art,
  .hw-spider,
  .hw-spider__art {
    animation: none !important;
  }

  .hw-item__drift {
    animation-duration: 700ms !important;
  }
}