/* ============ BankFake — Halloween-оформление (сезонное, 31.10) ============
   Подключается ПОСЛЕ styles.css: меняет акцент на тыквенно-оранжевый
   и добавляет декор: паутина, летучие мыши, тыквы-джек-а-лантерны, призрак.
   Убрать оформление = удалить строку <link href="halloween.css"> в index.html. */

:root {
  --accent: #ff7a1a;
  --accent-2: #ff9f43;
  --accent-3: #e8590c;
  --accent-text: #c2410c;
  --accent-soft: rgba(255, 122, 26, .15);
  --hw-orange: #f97316;
  --hw-orange-2: #ea580c;
  --hw-glow: #ffb703;
  --hw-purple: #7b2cbf;
  --hw-web: rgba(20, 10, 40, .17);
  --hw-bat: #5b21b6;
  --hw-blob: rgba(123, 44, 191, .16);
}
html[data-theme="dark"] {
  --accent: #ff8c42;
  --accent-2: #ffa94d;
  --accent-text: #ffb26b;
  --accent-soft: rgba(255, 140, 66, .16);
  --hw-web: rgba(255, 255, 255, .17);
  --hw-bat: #a78bfa;
  --hw-blob: rgba(123, 44, 191, .30);
}

::selection { background: var(--hw-orange); color: #fff; }

/* кнопки: тень «зелёная» из styles.css -> тыквенная */
.h-btn.pri { box-shadow: 0 6px 16px rgba(249, 115, 22, .32); }
.h-btn.pri:hover { box-shadow: 0 7px 18px rgba(249, 115, 22, .42); }

/* ============================== ДЕКОР HERO ============================== */
.h-hero { position: relative; overflow: hidden; }
.h-hero-grid { position: relative; z-index: 1; }

.hw-deco {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
/* фиолетовое облако в правом верхнем углу */
.hw-deco::before {
  content: "";
  position: absolute; top: -140px; right: -100px;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--hw-blob), transparent);
}

/* паутина в левом верхнем углу */
.hw-web {
  position: absolute; top: -8px; left: -8px;
  width: 190px; height: 190px;
  color: var(--hw-web);
}

/* летучие мыши */
.hw-bats { position: absolute; top: 34px; right: 9%; width: 180px; height: 90px; }
.hw-bat { position: absolute; fill: var(--hw-bat); opacity: .9;
  animation: hw-fly 7s ease-in-out infinite; }
.hw-bat.b1 { width: 38px; left: 0;   top: 0; }
.hw-bat.b2 { width: 24px; left: 78px; top: 42px; animation-duration: 5.4s; animation-delay: -2s; }
.hw-bat.b3 { width: 30px; left: 132px; top: 6px; animation-duration: 6.4s; animation-delay: -4s; }

/* тыква-джек-а-лантерн в правом нижнем углу hero */
.hw-pumpkin-hero {
  position: absolute; right: 30px; bottom: -10px;
  width: 156px;
  animation: hw-bob 5.5s ease-in-out infinite;
  filter: drop-shadow(0 14px 26px rgba(123, 44, 191, .35));
}
/* мерцание свечи в тыкве */
.hw-face {
  animation: hw-flicker 4s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255, 183, 77, .95));
}

/* стикер-плашка на телефоне в hero */
.h-hero-fig { position: relative; }
.hw-sticker {
  position: absolute; top: -16px; left: -6px; z-index: 3;
  transform: rotate(-7deg);
  background: linear-gradient(135deg, var(--hw-orange), var(--hw-glow));
  color: #3b1000;
  font: 600 14px/1.2 Unbounded, sans-serif;
  padding: 10px 16px; border-radius: 999px;
  box-shadow: 0 8px 22px rgba(249, 115, 22, .42);
  white-space: nowrap;
}

/* ============================== ПРИЗРАК В БЕНТО ============================== */
.hw-ghost {
  position: absolute; right: 24px; bottom: 24px; z-index: 3;
  width: 56px;
  animation: hw-ghost 4.6s ease-in-out infinite;
  filter: drop-shadow(0 8px 16px rgba(123, 44, 191, .4));
}

/* ============================== ПОДВАЛ ============================== */
.f-xprodc { text-shadow: 0 0 36px rgba(255, 140, 66, .45); }
.hw-fp {
  display: inline-block;
  font-size: .52em; margin: 0 .3em; vertical-align: middle;
  font-style: normal;
  animation: hw-bob 4.2s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(255, 140, 66, .65));
}
.hw-fp.hw-fp2 { animation-delay: -2.1s; }

/* ============================== АНИМАЦИИ ============================== */
@keyframes hw-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-14px) rotate(2deg); }
}
@keyframes hw-fly {
  0%, 100% { transform: translate(0, 0) rotate(-7deg); }
  33%      { transform: translate(-16px, 12px) rotate(7deg); }
  66%      { transform: translate(12px, -8px) rotate(-4deg); }
}
@keyframes hw-flicker {
  0%, 100% { opacity: 1; }
  40%      { opacity: .72; }
  55%      { opacity: .96; }
  72%      { opacity: .66; }
  85%      { opacity: .98; }
}
@keyframes hw-ghost {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-12px) rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hw-bat, .hw-pumpkin-hero, .hw-face, .hw-ghost, .hw-fp { animation: none !important; }
}

/* ============================== ТЕЛЕФОНЫ ============================== */
@media (max-width: 900px) {
  .hw-pumpkin-hero { width: 112px; right: 8px; }
  .hw-web { width: 148px; height: 148px; }
  .hw-bats { right: 3%; transform: scale(.85); transform-origin: top right; }
}
@media (max-width: 640px) {
  .hw-pumpkin-hero { width: 84px; bottom: -6px; }
  .hw-web { width: 112px; height: 112px; }
  .hw-bats { width: 130px; transform: scale(.7); }
  .hw-sticker { font-size: 12px; padding: 8px 12px; top: -12px; left: -2px; }
  .hw-ghost { width: 44px; right: 14px; bottom: 14px; }
}
@media (max-width: 768px) {
  .hw-fp { display: none; }
}