/* Хеллоуин 2026 на витрине OBSCURE — картинки Михаила (папка «Хеллоуин сайт»).
   Весь слой — этот файл + halloween.js + папка img/. Снять: убрать две строки
   из <head> app.html. Пока на <html> нет класса .hw-on, здесь ничего не действует.
   Декор не ловит клики (pointer-events: none). */
:root {
  --hw-ember: rgba(255, 128, 40, .2);
  --hw-flame-core: #fff1c9;
}

.hw-on .hw, .hw-on .hw * { pointer-events: none; }

/* ── первый экран: стена в версии Хеллоуин ── */
.hw-on .hero {
  background-image: url(/static/halloween/img/hero.webp);
  background-position: center 62%;
}
/* на телефоне экран чуть выше, чтобы вертикальная картинка 4:5 влезла целиком:
   луна сверху, тыквы в нижних углах */
@media (max-width: 640px) {
  .hw-on .hero { background-image: url(/static/halloween/img/hero-m.webp); background-position: center bottom; min-height: 125vw; }
}
/* картинка уже тёмная — затемняем только низ под надписью и кнопкой */
.hw-on .hero::before {
  background: linear-gradient(180deg, rgba(7,7,8,0) 0%, rgba(7,7,8,0) 50%, rgba(7,7,8,.55) 82%, rgba(7,7,8,.78) 100%);
}
.hw-on .hero > .web { display: none; }

.hw-fog {
  position: absolute; left: -15%; bottom: -4%; width: 130%; height: 46%;
  background: url(/static/halloween/img/fog.webp) center bottom / 100% 100% no-repeat;
  opacity: .28; mix-blend-mode: screen;
}
.hero > .hw-fog { height: 36%; }
.hw-fog.b { opacity: .16; bottom: -10%; background-position: 30% bottom; }
/* тёплое дыхание свечей у тыкв в углах */
.hw-ember {
  position: absolute; bottom: 0; width: 42%; height: 46%;
  background: radial-gradient(ellipse 60% 55% at 50% 80%, var(--hw-ember), transparent 70%);
  mix-blend-mode: screen;
}
.hw-ember.l { left: -6%; }
.hw-ember.r { right: -6%; }

.hw-promo {
  position: relative; margin: -12px auto 22px; line-height: 2;
  font-family: var(--mono, 'Courier New', monospace); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--hw-flame-core); text-shadow: 0 0 10px rgba(255, 150, 60, .55), 0 1px 6px #000;
}
@media (max-width: 640px) {
  .hw-promo { font-size: 11px; letter-spacing: .08em; }
  .hw-pl { display: none; }
}
.hw-promo b { color: #fff; border: 1px dashed rgba(255, 200, 140, .6); padding: 2px 8px; margin: 0 .3em; font-weight: 700; white-space: nowrap; }

/* ── мышь висит на ветке первого экрана (не в шапке — та едет за прокруткой
   и закрывала бы фото товаров) ── */
.hw-hang {
  position: absolute; top: -4px; left: 21%; width: 40px; z-index: 1;
  transform-origin: 50% 0; filter: drop-shadow(0 6px 8px rgba(0,0,0,.6));
}
.hw-hang img { width: 100%; display: block; }

/* ── летучие мыши, которые пролетают по странице ── */
/* мыши летают только в пределах первого экрана — над товарами их нет */
.hw-sky { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.hw-fly { position: absolute; left: 0; top: 0; will-change: transform; }
.hw-fly img { display: block; width: 100%; filter: drop-shadow(0 0 1px rgba(236,236,234,.35)); }
/* машет крыльями: две позы из листа сменяют друг друга */
.hw-fly { aspect-ratio: 1; }
.hw-fly img { position: absolute; left: 0; top: 50%; }
.hw-fly img.up { transform: translateY(-62%) scale(.7); }
.hw-fly img.lv { transform: translateY(-40%); }
.hw-fly.far { opacity: .7; filter: blur(.5px); }

/* ── каталог ── */
.hw-web {
  position: absolute; top: 0; left: 0; width: 46%; aspect-ratio: 1; z-index: 2;
  background: url(/static/halloween/img/web.webp) left top / contain no-repeat;
  mix-blend-mode: screen; opacity: .85;
}
.hw-web.r { left: auto; right: 0; transform: scaleX(-1); }
/* паук на нитке: нитка начинается у верхнего края фото, паук качается маятником */
.hw-spider {
  position: absolute; top: 0; width: clamp(24px, 10%, 38px); z-index: 3;
  transform-origin: 50% 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,.7));
}
.hw-spider.l { left: 20%; }
.hw-spider.r { right: 20%; }
.hw-spider.c { left: calc(50% - 15px); }
.hw-spider img { width: 100%; display: block; }
.hw-bat-ph {
  position: absolute; top: -2px; right: 12%; width: clamp(44px, 11%, 84px); z-index: 2;
  transform-origin: 50% 0; filter: drop-shadow(0 8px 10px rgba(0,0,0,.55));
}
.hw-bat-ph img { width: 100%; display: block; }
.hw-coll-pk { width: 24px; height: auto; vertical-align: -5px; margin-left: 10px; display: inline-block; }

/* полоса «земля» перед манифестом */
/* картинка целиком, без обрезки: высота по её пропорциям 1600×312 */
.hw-ground {
  position: relative; aspect-ratio: 1600 / 312; margin-top: -1px;
  background: url(/static/halloween/img/ground.webp) center / 100% 100% no-repeat;
  overflow: hidden;
  /* края картинки растворяются: по бокам и снизу нет жёсткой границы тумана */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, #000 62%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, #000 62%, transparent);
  mask-composite: intersect;
}
.hw-ground .hw-fog { height: 70%; bottom: -12%; opacity: .35; }

/* свечи на постере манифеста, слева внизу — там нет текста */
.hw-candles {
  position: absolute; left: 3%; bottom: 2.5%; width: 27%; z-index: 3;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.7));
}
.hw-candles img { width: 100%; display: block; position: relative; z-index: 1; }
.hw-candles::after {
  content: ""; position: absolute; left: -30%; right: -30%; top: -40%; bottom: 10%;
  background: radial-gradient(ellipse 50% 45% at 50% 35%, var(--hw-ember), transparent 70%);
  mix-blend-mode: screen;
}

/* подвал: тыквы и туман по низу */
.hw-on footer { position: relative; overflow: hidden; }
.hw-foot {
  position: relative; display: block; width: min(76%, 320px); margin: 22px 0 -20px auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.7));
}
footer > .hw-fog { height: 120px; bottom: -30px; opacity: .3; }

/* корзина, кабинет, товар */
.hw-cart-pk { width: 17px; height: auto; margin-right: -2px; }
.hw-raven { display: block; width: min(58%, 220px); margin: 40px auto -30px; filter: drop-shadow(0 12px 20px rgba(0,0,0,.75)); }
.hw-on .acc-level { position: relative; overflow: hidden; }
.hw-on .acc-level > * { position: relative; z-index: 1; }
.hw-on .acc-level > .hw-web { position: absolute; z-index: 0; width: 34%; opacity: .55; }
.hw-pdp-candles { display: none; }

@media (min-width: 900px) {
  .hw-hang { width: 64px; left: 24%; }
  .hw-coll-pk { transform: rotate(180deg); margin: 0; vertical-align: 0; width: 28px; }
  .hw-foot { width: 300px; margin-top: 10px; }
  .hw-pdp-candles { display: block; width: 190px; margin: 18px 0 0 auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.7)); }
  .hw-raven { width: 240px; }
}

@media (prefers-reduced-motion: no-preference) {
  .hw-fog { animation: hw-drift 34s ease-in-out infinite alternate; }
  .hw-fog.b { animation-duration: 47s; animation-direction: alternate-reverse; }
  .hw-ember, .hw-candles::after { animation: hw-pulse 2.8s ease-in-out infinite; }
  .hw-ember.r { animation-duration: 3.4s; animation-delay: -1.2s; }
  .hw-hang, .hw-bat-ph { animation: hw-sway 5.5s ease-in-out infinite; }
  .hw-bat-ph { animation-duration: 7s; animation-delay: -2s; }
  .hw-spider { animation: hw-sway 4.2s ease-in-out infinite; }
  .hw-fly img { animation: hw-flap .26s steps(1) infinite; }
  .hw-fly img.lv { animation-delay: -.13s; }
  @keyframes hw-drift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
  @keyframes hw-pulse { 0%, 100% { opacity: 1; } 35% { opacity: .65; } 60% { opacity: .9; } }
  @keyframes hw-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
  @keyframes hw-flap { 0% { opacity: 1; } 50% { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .hw-sky { display: none; }
}