/* Оформление акции HALLOWEEN. Все правила под html.hw: класс ставит chrome.js, пока идёт
   акция из config.js, и после её конца сайт сам возвращается к обычному виду. */
html.hw { background: #060509; }
html.hw body { background: transparent; }
html.hw::after { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(760px 420px at 0 0, #16101f, transparent), radial-gradient(760px 340px at 100% 100%, #1b1316, transparent), radial-gradient(560px 260px at 0 100%, #111015, transparent); }

/* Шапка: тыква у логотипа, тёплая кромка снизу. */
html.hw .top { border-bottom-color: rgb(255 122 0 / .28); }
html.hw .brand b { display: inline-flex; align-items: center; }
html.hw .brand b::before {
  content: ""; width: 32px; height: 32px; margin: -9px 8px -1px 0; flex-shrink: 0;
  background: url(assets/hw/jack.svg) center / contain no-repeat;
  filter: drop-shadow(0 0 7px rgb(255 140 0 / .55));
  transform-origin: 50% 100%;
}
html.hw .brand:hover b::before { animation: hw-jack .55s ease-in-out; }
@keyframes hw-jack { 25% { rotate: -12deg; } 60% { rotate: 9deg; } }

/* Полоса акции под шапкой на всех страницах. */
.hw-strip {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 16px;
  color: #fff; font-size: 14px; font-weight: 700;
  background: #0c0a08;
  box-shadow: inset 0 -1px 0 rgb(255 122 0 / .4);
  transition: filter .2s;
}
.hw-strip:hover { filter: brightness(1.14); }
.hw-strip img { width: 22px; height: 22px; }
.hw-strip > b { font-family: var(--display); font-weight: 800; letter-spacing: .03em; }
.hw-strip em { padding: 3px 8px; border-radius: 7px; background: #ff5a00; font: 800 13px var(--display); }
.hw-strip__t { margin-left: 8px; color: rgb(255 255 255 / .72); font-weight: 600; white-space: nowrap; }
.hw-strip__t b { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Туман и летучие мыши. */
.hw-fog {
  position: fixed; left: -10%; right: -10%; bottom: -30px; height: 240px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 80% at 26% 100%, rgb(255 120 40 / .1), transparent 72%),
    radial-gradient(46% 80% at 74% 100%, rgb(255 120 40 / .1), transparent 72%);
  filter: blur(14px); animation: hw-fog 16s ease-in-out infinite alternate;
}
@keyframes hw-fog { to { transform: translate3d(5%, -14px, 0); } }
.hw-bat {
  position: fixed; top: 18%; left: -70px; z-index: 6; width: 44px; pointer-events: none; opacity: 0;
  animation: hw-fly 26s linear 4s infinite;
}
.hw-bat--2 { top: 42%; width: 30px; animation-duration: 34s; animation-delay: 15s; }
@keyframes hw-fly {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  3% { opacity: .85; }
  14% { transform: translate3d(32vw, -40px, 0); }
  26% { transform: translate3d(66vw, 30px, 0); }
  37% { opacity: .85; }
  40%, 100% { transform: translate3d(112vw, -30px, 0); opacity: 0; }
}

html.hw .promo h1 { max-width: 360px; }

/* Карточки: паутина в углу, скидка, дрожащий свет при наведении. */
html.hw .card::after {
  content: ""; position: absolute; top: 0; right: 0; z-index: -1; width: 92px; height: 92px; pointer-events: none;
  background: url(assets/hw/web.svg) top right / contain no-repeat;
}
html.hw .card:hover::before, html.hw .card:focus-visible::before { animation: hw-flicker 1.6s steps(6) infinite; }
@keyframes hw-flicker { 0%, 100% { opacity: 1; } 30% { opacity: .78; } 55% { opacity: .96; } 75% { opacity: .7; } }
.card__sale {
  position: absolute; top: 14px; left: 14px; z-index: 2; padding: 5px 8px; border-radius: 8px;
  background: #ff5a00; color: #fff; font: 800 12px var(--display);
}
html.hw .card__hit { top: 44px; }
.card__price s { display: block; margin-bottom: 1px; font-size: 13px; font-weight: 700; color: var(--muted); }
.buy__old { margin-left: 8px; color: var(--muted); font-weight: 700; }

html.hw .online b { color: #8cf0a8; }

/* Промокодов на время акции нет: пустой блок не занимает место. */
html.hw [data-promo] { display: none; }

@media (max-width: 720px) {
  .hw-strip { flex-wrap: wrap; gap: 5px 8px; font-size: 13px; padding: 8px 12px; }
  .hw-strip__t { width: 100%; margin-left: 0; text-align: center; }
  html.hw .brand b::before { margin-right: 6px; }
  .hw-bat--2, .hw-fog { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-bat, .hw-fog { display: none; }
  html.hw .card:hover::before { animation: none; }
}

/* Скидка в обменнике: плашка у названия, цена со скидкой и зачёркнутая старая. */
.cur-opt__t b { display: flex; align-items: center; gap: 8px; }
.cur-opt__sale {
  padding: 2px 7px; border-radius: 6px; background: #ff5a00; color: #fff;
  font: 800 11px/1.3 var(--display); font-style: normal;
}
html.hw .cur .exch__presets button b { display: flex; flex-direction: column; gap: 1px; white-space: nowrap; }
.exch__presets button b s { order: -1; }
.exch__presets button b s { font: 700 11px var(--ui); color: var(--muted); }
html.hw .exch__note { display: flex; align-items: center; gap: 8px; font-size: 13px; font-style: normal; }
.exch__note s { color: var(--muted); font-weight: 700; }

/* Подвал: тёплое свечение лавы снизу, тыква у названия и тыквы на линии. */
html.hw .foot__panel {
  background:
    radial-gradient(520px 200px at 34% 86%, rgb(255 96 0 / .17), transparent 72%),
    radial-gradient(900px 120px at 50% 100%, rgb(255 96 0 / .08), transparent 70%),
    #0c0a08;
  border-color: rgb(255 122 0 / .22);
}
html.hw .foot__col h4 { color: #ff9a4d; }
html.hw .foot__col a:hover { color: #ffa060; }
html.hw .foot__bottom { border-top-color: rgb(255 122 0 / .24); }
html.hw .foot__bottom a:hover { color: #ffa060; }
html.hw .foot__pay span { border-color: rgb(255 122 0 / .16); }
/* Кладбище — цельный силуэт на зареве лавы: земля стоит на линии над документами, арт стоит на ней. */
.hw-ghost { display: none; }
@media (min-width: 1200px) {
  html.hw .foot__panel { background: radial-gradient(560px 210px at 36% 84%, rgb(255 96 0 / .2), transparent 72%), linear-gradient(0deg, rgb(255 86 0 / .2) 90px, transparent 240px), #0c0a08; }
  html.hw .foot__top::before {
    content: ""; position: absolute; left: -34px; right: -34px; bottom: -231px; height: 336px; z-index: -1; pointer-events: none;
    background: url(assets/hw/horizon.svg?v=2) center top / 100% 136px no-repeat, linear-gradient(#060504, #060504) 0 135px / 100% 100% no-repeat;
  }
  .hw-ghost { position: absolute; display: block; left: 118px; bottom: 26px; padding: 0; opacity: .62; cursor: pointer; animation: hw-ghost 5s ease-in-out infinite; }
  .hw-ghost--pay { left: auto; right: 96px; bottom: 20px; animation-delay: -2.2s; }
  .hw-ghost--pay img { transform-origin: 50% 0; }
  .hw-ghost img { width: 26px; filter: drop-shadow(0 0 12px rgb(255 255 255 / .35)); }
  .hw-ghost.is-boo { z-index: 3; opacity: 1; }
  .hw-ghost.is-boo img { animation: hw-boo .5s ease-out; }
  /* Реплика призрака: облачко над ним, появляется по клику. */
  .hw-say {
    position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 0; padding: 4px 9px; border-radius: 8px;
    background: #f3efe6; color: #1a1424; font: 800 13px/1.2 var(--ui); white-space: nowrap; opacity: 0; pointer-events: none;
  }
  .hw-say::after { content: ""; position: absolute; left: 50%; top: 100%; width: 6px; height: 6px; translate: -50% -3px; rotate: 45deg; background: inherit; }
  /* Над вторым призраком — значки оплаты, поэтому он говорит влево. */
  .hw-ghost--pay .hw-say { left: auto; right: calc(100% + 8px); bottom: 50%; translate: 0 50%; }
  .hw-ghost--pay .hw-say::after { left: 100%; top: 50%; translate: -3px -50%; }
  .hw-ghost.is-boo .hw-say { animation: hw-say 1.5s ease-out; }
}
@keyframes hw-ghost { 0%, 100% { translate: 0 0; } 50% { translate: 8px -9px; } }
@keyframes hw-boo { 40% { scale: 1.8; } }
@keyframes hw-say { 0% { opacity: 0; scale: .7; } 12%, 75% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hw-ghost { animation: none; } }

/* Фон всего сайта: луна за контентом, паутина в углу, паук на нити. */
html.hw::before { content: ""; position: fixed; left: 0; top: 0; z-index: -1; width: 240px; height: 240px; pointer-events: none; opacity: .4; background: url(assets/hw/web.svg) top right / contain no-repeat; transform: scaleX(-1); }
html.hw body::before { content: ""; position: fixed; top: 24vh; right: max(-60px, calc(50vw - 860px)); width: 360px; height: 360px; z-index: -1; pointer-events: none; background: url(assets/hw/moon-dim.svg) center / contain no-repeat; }
html.hw body::after {
  content: ""; position: fixed; top: -30px; left: max(8px, calc(50vw - 736px)); z-index: -1; width: 26px; height: 190px; pointer-events: none;
  background: linear-gradient(rgb(255 255 255 / .22), rgb(255 255 255 / .22)) center top / 1px 172px no-repeat, url(assets/hw/spider.svg) center bottom / 26px 20px no-repeat;
  animation: hw-spider 7s ease-in-out infinite alternate;
}
@keyframes hw-spider { to { translate: 0 54px; } }
@media (max-width: 760px) {
  html.hw::before { width: 130px; height: 130px; }
  html.hw body::before { top: 90px; right: -60px; width: 220px; height: 220px; }
  html.hw body::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { html.hw body::after { animation: none; } }