/* ==========================================================
   HALLOWEEN DESIGN LAYER  (static visuals only - painted once)
   ========================================================== */
:root {
  --hw-bg: #0b0612;
  --hw-card-a: rgba(44, 20, 64, 0.92);
  --hw-card-b: rgba(18, 8, 28, 0.96);
  --hw-line: rgba(255, 122, 26, 0.28);
  --hw-grave: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 180%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 120Q200 80 420 118T860 112T1250 120T1600 108V180H0Z%22 fill=%22%231d0e2e%22/%3E%3Cpath d=%22M90 150V113.0A17.0 17.0 0 0 1 124 113.0V150Z%22 fill=%22%231d0e2e%22/%3E%3Cpath d=%22M250 150V119.0A15.0 15.0 0 0 1 280 119.0V150Z%22 fill=%22%231d0e2e%22/%3E%3Cpath d=%22M560 150V110.0A18.0 18.0 0 0 1 596 110.0V150Z%22 fill=%22%231d0e2e%22/%3E%3Cpath d=%22M760 150V115.0A15.0 15.0 0 0 1 790 115.0V150Z%22 fill=%22%231d0e2e%22/%3E%3Cpath d=%22M1010 150V113.0A17.0 17.0 0 0 1 1044 113.0V150Z%22 fill=%22%231d0e2e%22/%3E%3Cpath d=%22M1330 150V116.0A16.0 16.0 0 0 1 1362 116.0V150Z%22 fill=%22%231d0e2e%22/%3E%3Cpath d=%22M1500 150V119.0A15.0 15.0 0 0 1 1530 119.0V150Z%22 fill=%22%231d0e2e%22/%3E%3Cg stroke=%22%231d0e2e%22 stroke-linecap=%22round%22 fill=%22none%22 transform=%22translate%28170 150%29 scale%281.15%29%22%3E%3Cpath stroke-width=%229%22 d=%22M0 0 C-2 -30 4 -60 0 -95%22/%3E%3Cpath stroke-width=%225%22 d=%22M0 -50 C-20 -62 -34 -64 -48 -86 M-30 -64 C-34 -78 -30 -88 -40 -104 M0 -70 C16 -84 30 -88 44 -112 M22 -86 C30 -92 40 -90 52 -92 M0 -95 C-6 -112 -2 -124 -10 -140 M0 -95 C10 -110 8 -122 18 -136%22/%3E%3C/g%3E%3Cg stroke=%22%231d0e2e%22 stroke-linecap=%22round%22 fill=%22none%22 transform=%22translate%281180 150%29 scale%281.3%29%22%3E%3Cpath stroke-width=%229%22 d=%22M0 0 C-2 -30 4 -60 0 -95%22/%3E%3Cpath stroke-width=%225%22 d=%22M0 -50 C-20 -62 -34 -64 -48 -86 M-30 -64 C-34 -78 -30 -88 -40 -104 M0 -70 C16 -84 30 -88 44 -112 M22 -86 C30 -92 40 -90 52 -92 M0 -95 C-6 -112 -2 -124 -10 -140 M0 -95 C10 -110 8 -122 18 -136%22/%3E%3C/g%3E%3Cpath d=%22M0 150Q160 132 330 148T700 146T1050 150T1380 144T1600 150V180H0Z%22 fill=%22%230b0612%22/%3E%3Cpath d=%22M30 160V132.0A20.0 20.0 0 0 1 70 132.0V160Z%22 fill=%22%230b0612%22/%3E%3Cpath d=%22M130 160V142.0A18.0 18.0 0 0 1 166 142.0V160Z%22 fill=%22%230b0612%22/%3E%3Cpath d=%22M330 160V130.0A22.0 22.0 0 0 1 374 130.0V160Z%22 fill=%22%230b0612%22/%3E%3Cpath d=%22M470 160V143.0A17.0 17.0 0 0 1 504 143.0V160Z%22 fill=%22%230b0612%22/%3E%3Cpath d=%22M640 160V135.0A21.0 21.0 0 0 1 682 135.0V160Z%22 fill=%22%230b0612%22/%3E%3Cpath d=%22M900 160V139.0A19.0 19.0 0 0 1 938 139.0V160Z%22 fill=%22%230b0612%22/%3E%3Cpath d=%22M1120 160V132.0A22.0 22.0 0 0 1 1164 132.0V160Z%22 fill=%22%230b0612%22/%3E%3Cpath d=%22M1260 160V141.0A17.0 17.0 0 0 1 1294 141.0V160Z%22 fill=%22%230b0612%22/%3E%3Cpath d=%22M1440 160V133.0A21.0 21.0 0 0 1 1482 133.0V160Z%22 fill=%22%230b0612%22/%3E%3Crect x=%22400%22 y=%22100%22 width=%227%22 height=%2260%22 fill=%22%230b0612%22/%3E%3Crect x=%22391%22 y=%22114%22 width=%2225%22 height=%227%22 fill=%22%230b0612%22/%3E%3Crect x=%22840%22 y=%22106%22 width=%227%22 height=%2254%22 fill=%22%230b0612%22/%3E%3Crect x=%22831%22 y=%22120%22 width=%2225%22 height=%227%22 fill=%22%230b0612%22/%3E%3Crect x=%221560%22 y=%22102%22 width=%227%22 height=%2258%22 fill=%22%230b0612%22/%3E%3Crect x=%221551%22 y=%22116%22 width=%2225%22 height=%227%22 fill=%22%230b0612%22/%3E%3Cg stroke=%22%230b0612%22 stroke-linecap=%22round%22 fill=%22none%22 transform=%22translate%28590 150%29 scale%281.0%29%22%3E%3Cpath stroke-width=%229%22 d=%22M0 0 C-2 -30 4 -60 0 -95%22/%3E%3Cpath stroke-width=%225%22 d=%22M0 -50 C-20 -62 -34 -64 -48 -86 M-30 -64 C-34 -78 -30 -88 -40 -104 M0 -70 C16 -84 30 -88 44 -112 M22 -86 C30 -92 40 -90 52 -92 M0 -95 C-6 -112 -2 -124 -10 -140 M0 -95 C10 -110 8 -122 18 -136%22/%3E%3C/g%3E%3Cg stroke=%22%230b0612%22 stroke-linecap=%22round%22 fill=%22none%22 transform=%22translate%281040 150%29 scale%280.85%29%22%3E%3Cpath stroke-width=%229%22 d=%22M0 0 C-2 -30 4 -60 0 -95%22/%3E%3Cpath stroke-width=%225%22 d=%22M0 -50 C-20 -62 -34 -64 -48 -86 M-30 -64 C-34 -78 -30 -88 -40 -104 M0 -70 C16 -84 30 -88 44 -112 M22 -86 C30 -92 40 -90 52 -92 M0 -95 C-6 -112 -2 -124 -10 -140 M0 -95 C10 -110 8 -122 18 -136%22/%3E%3C/g%3E%3Cellipse cx=%22200%22 cy=%22150%22 rx=%2230%22 ry=%2225%22 fill=%22%230b0612%22/%3E%3Crect x=%22197%22 y=%22117%22 width=%226%22 height=%2211%22 rx=%222%22 fill=%22%230b0612%22/%3E%3Cpath d=%22M183 144l9 -9 l7 9Z M203 144l7 -9 l9 9Z%22 fill=%22%23ffb347%22/%3E%3Cpath d=%22M184 157l6 7 l5 -5 l6 6 l5 -6 l5 5 l5 -6 l5 8 l-7 3 h-24Z%22 fill=%22%23ff8a1f%22/%3E%3Cellipse cx=%221370%22 cy=%22148%22 rx=%2230%22 ry=%2225%22 fill=%22%230b0612%22/%3E%3Crect x=%221367%22 y=%22115%22 width=%226%22 height=%2211%22 rx=%222%22 fill=%22%230b0612%22/%3E%3Cpath d=%22M1353 142l9 -9 l7 9Z M1373 142l7 -9 l9 9Z%22 fill=%22%23ffb347%22/%3E%3Cpath d=%22M1354 155l6 7 l5 -5 l6 6 l5 -6 l5 5 l5 -6 l5 8 l-7 3 h-24Z%22 fill=%22%23ff8a1f%22/%3E%3C/svg%3E");
  --hw-slime: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 480 44%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3ClinearGradient id=%22s%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%238bff4f%22/%3E%3Cstop offset=%221%22 stop-color=%22%2335c415%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill=%22url%28%23s%29%22 d=%22M0 0H480V8H475Q475 38 470 40Q465 38 465 8H443Q443 24 436 26Q429 24 429 8H407Q407 20 402 22Q397 20 397 8H373Q373 46 368 48Q363 46 363 8H341Q341 38 334 40Q327 38 327 8H307Q307 20 300 22Q293 20 293 8H271Q271 26 266 28Q261 26 261 8H238Q238 20 232 22Q226 20 226 8H203Q203 24 198 26Q193 24 193 8H169Q169 26 164 28Q159 26 159 8H136Q136 46 130 48Q124 46 124 8H103Q103 20 96 22Q89 20 89 8H67Q67 20 62 22Q57 20 57 8H35Q35 30 28 32Q21 30 21 8H0Z%22/%3E%3C/svg%3E");
}

body { background: var(--hw-bg) !important; }
::-webkit-scrollbar-track { background: #0b0612; }
::-webkit-scrollbar-thumb { background: linear-gradient(#ff7a1a, #8a3ffc); border: 2px solid #0b0612; }
::selection { background: rgba(255, 122, 26, 0.45); color: #fff; }

/* ---------- announcement + navbar ---------- */
.announcement.component {
  background: linear-gradient(90deg, #3a0f66, #b83d00 50%, #3a0f66) !important;
  color: #fff !important; border-bottom: 0 !important;
}
.announcement.component a { color: #ffe2b8 !important; }
.navbar.component {
  background: linear-gradient(180deg, rgba(14, 6, 22, 0.97), rgba(20, 8, 32, 0.92)) !important;
  border-bottom: 1px solid var(--hw-line);
}
.navbar-brand .lw-wordmark { font-size: 1.7rem; color: #ffb066; }
.navbar .nav-link { font-weight: 600; letter-spacing: 0.02em; }
.navbar .nav-link:hover { color: #ffb066 !important; }

/* slime dripping from the header */
header.sticky-top { position: sticky; top: 0; z-index: 1030; }
header.sticky-top::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 40px;
  background: var(--hw-slime) repeat-x left top / 480px 40px;
  pointer-events: none; opacity: 0.85; z-index: 2;
}

/* ---------- hero ---------- */
.hero {
  background-color: #34104f !important;
  background-blend-mode: multiply;
  min-height: 92vh;
  padding-bottom: 150px;
}
.hero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 180px; z-index: 2;
  background: var(--hw-grave) repeat-x center bottom / auto 180px;
  mask-image: none; -webkit-mask-image: none; pointer-events: none;
}
.hero .bg-overlay {
  background:
    radial-gradient(ellipse 60% 55% at 50% 40%, rgba(11, 6, 18, 0) 0%, rgba(11, 6, 18, 0.55) 100%),
    linear-gradient(180deg, rgba(20, 6, 36, 0.78) 0%, rgba(40, 12, 60, 0.45) 50%, rgba(11, 6, 18, 0.95) 100%) !important;
}
/* the moon */
.hero .bg-overlay::after {
  content: ""; position: absolute; width: clamp(150px, 20vw, 290px); aspect-ratio: 1; border-radius: 50%;
  top: 9%; right: 9%;
  background:
    radial-gradient(circle at 62% 30%, rgba(190, 140, 70, 0.55) 0 7%, transparent 8%),
    radial-gradient(circle at 30% 58%, rgba(190, 140, 70, 0.5) 0 10%, transparent 11%),
    radial-gradient(circle at 68% 72%, rgba(190, 140, 70, 0.45) 0 6%, transparent 7%),
    radial-gradient(circle at 36% 30%, #fff8dc, #ffdf9a 55%, #f0b04e 100%);
  box-shadow: 0 0 60px 14px rgba(255, 205, 120, 0.4), 0 0 180px 60px rgba(255, 140, 40, 0.18);
}
.hero .lw-hero-title {
  font-size: clamp(3.4rem, 9vw, 7rem) !important;
  line-height: 1;
  text-shadow: 0 0 14px rgba(255, 122, 26, 0.9), 0 0 44px rgba(255, 90, 0, 0.55), 0 4px 0 #5a1d00;
}
.lw-hero-sub { color: #e8d3ff !important; font-size: 1.15rem; }
.hero .pln-main-badge { background: rgba(138, 63, 252, 0.18); border-color: rgba(190, 140, 255, 0.5); color: #e9d5ff; }

/* ---------- buttons ---------- */
.hero-btn-primary, .btn-primary, .cart .form .btn-outline-primary, .cta-btn-purge.buy-now-btn {
  background: linear-gradient(135deg, #ffa43a, #ff5a00) !important;
  color: #1a0900 !important; border: 0 !important;
  box-shadow: 0 6px 22px rgba(255, 90, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
.hero-btn-primary:hover, .btn-primary:hover, .cta-btn-purge.buy-now-btn:hover {
  filter: brightness(1.08); box-shadow: 0 10px 30px rgba(255, 90, 0, 0.65) !important;
}
.hero-btn-secondary, .btn-outline-primary {
  background: rgba(138, 63, 252, 0.16); border: 1px solid rgba(190, 140, 255, 0.45); color: #f1e3ff;
}
.btn-outline-primary:hover { background: rgba(138, 63, 252, 0.35) !important; color: #fff !important; }

/* ---------- stats ---------- */
.stats-wrapper {
  background: linear-gradient(180deg, rgba(48, 20, 72, 0.7), rgba(20, 8, 32, 0.8)) !important;
  border: 1px solid var(--hw-line) !important;
  border-radius: 16px;
}
.stat-card .value { color: #ffb066; }

/* ---------- section headings ---------- */
.feat-header .global-title, .box-header .global-title, .faq-header .global-title, h2.global-title {
  font-size: clamp(2.6rem, 5.4vw, 4rem) !important;
  color: #fff3e0 !important;
}
.feat-header .global-title::after, .box-header .global-title::after, .faq-header .global-title::after, h2.global-title::after {
  content: "🎃"; display: block; margin: 0.6rem auto 0; width: min(320px, 70%);
  font-size: 1.3rem; line-height: 1; letter-spacing: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 122, 26, 0.7)) left center / 42% 2px no-repeat,
              linear-gradient(270deg, transparent, rgba(255, 122, 26, 0.7)) right center / 42% 2px no-repeat;
  text-shadow: none;
}
.pln-main-badge, .page-badge, .feat-badge {
  background: rgba(255, 122, 26, 0.1); border-color: rgba(255, 122, 26, 0.4);
}

/* ---------- product cards ---------- */
.product-card-purge {
  display: flex; flex-direction: column; width: 100%; overflow: hidden;
  background: linear-gradient(180deg, var(--hw-card-a), var(--hw-card-b)) !important;
  border: 1px solid var(--hw-line) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.product-card-purge:hover {
  border-color: rgba(255, 122, 26, 0.7) !important;
  box-shadow: 0 18px 44px -14px rgba(255, 90, 0, 0.5), 0 0 0 1px rgba(255, 122, 26, 0.35) !important;
}
.product-image-purge { position: relative; }
.product-image-purge::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 55%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(18, 8, 28, 0.95));
}
.product-image-purge::before {
  content: "🎃"; position: absolute; top: 10px; right: 12px; z-index: 2; font-size: 1.25rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}
.title-purge { color: #fff3e0 !important; font-weight: 700; }
.title-divider { background: linear-gradient(90deg, #ff7a1a, #8a3ffc, transparent) !important; height: 2px; border: 0; }
.cta-btn-purge.price-btn {
  background: rgba(138, 63, 252, 0.2) !important; border: 1px solid rgba(190, 140, 255, 0.5) !important; color: #f1e3ff !important;
}

/* ---------- other cards ---------- */
.feat-card, .box-card, .testimonial, .soc-box, .faq-item, .cta-box {
  background: linear-gradient(180deg, rgba(40, 18, 60, 0.7), rgba(18, 8, 28, 0.85)) !important;
  border: 1px solid var(--hw-line) !important;
  border-radius: 18px !important;
}
.testimonial { border-left: 4px solid #ff7a1a !important; }
.card-bg-color { background: linear-gradient(180deg, rgba(40, 18, 60, 0.5), rgba(18, 8, 28, 0.7)); }
.modal-content { background: #170a24 !important; border: 1px solid var(--hw-line) !important; }
.form-control:focus, .form-select:focus { border-color: #ff7a1a !important; box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.25) !important; }

/* ---------- ticker ---------- */
.fx-ticker { background: linear-gradient(90deg, #2a0d48, #3a1260, #2a0d48); border-color: rgba(255, 122, 26, 0.45); }

/* ---------- embers ---------- */
.fx-embers { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.fx-embers i {
  position: absolute; bottom: -12px; left: var(--x); width: var(--z); height: var(--z); border-radius: 50%;
  background: #ffae4a; box-shadow: 0 0 8px 2px rgba(255, 140, 30, 0.8);
  opacity: 0; will-change: transform, opacity;
  animation: fx-ember var(--t) ease-in var(--d) infinite;
}
@keyframes fx-ember {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: 0.9; }
  100% { transform: translate3d(var(--dx), -105vh, 0); opacity: 0; }
}

/* ---------- footer: graveyard rises from the bottom ---------- */
.ft-wrapper {
  position: relative; margin-top: 110px;
  background: linear-gradient(180deg, #0b0612 0%, #1a0b2a 100%) !important;
  border-top: 0 !important;
}
.ft-wrapper::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 130px; pointer-events: none;
  background: var(--hw-grave) repeat-x center bottom / auto 130px;
}
.ft-name { font-family: var(--hw-font); font-size: 1.5rem !important; letter-spacing: 0.06em !important; text-transform: none !important; color: #ffb066; }
.ft-col-title { color: #ff9a3e !important; }
.ft-list a:hover { color: #ffb066 !important; }

@media (max-width: 768px) {
  .hero { min-height: 82vh; padding-bottom: 110px; }
  .hero .bg-overlay::after { top: 3%; right: 50%; transform: translateX(50%); opacity: 0.5; }
  .hero::before { height: 120px; background-size: auto 120px; }
  .ft-wrapper::before { height: 90px; background-size: auto 90px; }
  .fx-embers i:nth-child(n+7) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fx-embers { display: none; } }

/* ==========================================================
   LEVEL 2: storm, mist, eyes, ghosts, spider, bats, reveal
   (everything below animates transform/opacity only)
   ========================================================== */

/* ---------- lightning ---------- */
.fx-flash {
  position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 80% 60% at 78% 12%, rgba(225, 205, 255, 0.85), rgba(150, 100, 255, 0.25) 55%, transparent 80%);
  animation: fx-lightning 15s linear infinite;
}
@keyframes fx-lightning {
  0%, 91.5%, 93.5%, 95.5%, 100% { opacity: 0; }
  92%   { opacity: 0.55; }
  93%   { opacity: 0.08; }
  94.5% { opacity: 0.8; }
  96.5% { opacity: 0.12; }
}

/* ---------- drifting mist (two seamless layers) ---------- */
.fx-mist { position: fixed; left: 0; bottom: 0; width: 200vw; height: 42vh; z-index: 1; pointer-events: none; will-change: transform;
  background:
    radial-gradient(ellipse 60% 70% at 50% 100%, rgba(190, 150, 255, 0.16), transparent 70%) 0 0 / 25vw 100% repeat-x;
  animation: fx-mist 80s linear infinite;
}
.fx-mist.b {
  height: 30vh; opacity: 0.8;
  background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(255, 140, 50, 0.1), transparent 70%) 0 0 / 33.333vw 100% repeat-x;
  animation-duration: 55s; animation-direction: reverse;
}
@keyframes fx-mist { to { transform: translate3d(-100vw, 0, 0); } }

/* ---------- eyes in the dark ---------- */
.fx-eyes { position: fixed; z-index: 1; pointer-events: none; display: flex; gap: 11px; opacity: 0;
  animation: fx-eyes var(--t) ease-in-out var(--d) infinite; }
.fx-eyes i { width: 7px; height: 4px; border-radius: 50%; background: var(--c); box-shadow: 0 0 9px 3px var(--c); }
@keyframes fx-eyes {
  0%, 52%, 100% { opacity: 0; transform: scaleY(1); }
  56% { opacity: 1; } 62% { opacity: 1; transform: scaleY(1); }
  64% { transform: scaleY(0.08); } 66% { transform: scaleY(1); }
  78% { opacity: 1; } 80% { transform: scaleY(0.08); } 82% { transform: scaleY(1); }
  90% { opacity: 0; }
}

/* ---------- ghosts ---------- */
.fx-ghost { position: fixed; left: var(--x); bottom: -90px; z-index: 2; pointer-events: none; font-size: var(--s); opacity: 0;
  will-change: transform, opacity; animation: fx-ghost var(--t) linear var(--d) infinite; filter: drop-shadow(0 0 12px rgba(200, 170, 255, 0.7)); }
@keyframes fx-ghost {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  8%   { opacity: 0.28; }
  25%  { transform: translate3d(6vw, -28vh, 0) rotate(6deg); }
  50%  { transform: translate3d(-4vw, -58vh, 0) rotate(-6deg); }
  75%  { transform: translate3d(7vw, -88vh, 0) rotate(5deg); }
  92%  { opacity: 0.25; }
  100% { transform: translate3d(0, -118vh, 0); opacity: 0; }
}

/* ---------- spider on a thread ---------- */
.fx-spider { position: fixed; top: -100px; left: 62px; z-index: 5; width: 20px; pointer-events: none; will-change: transform;
  animation: fx-spider 10s ease-in-out infinite; }
.fx-spider::before { content: ""; position: absolute; left: 9px; top: 0; width: 1px; height: 98px; background: rgba(225, 210, 255, 0.55); }
.fx-spider span { position: absolute; top: 94px; left: 0; font-size: 1.15rem; line-height: 1; }
@keyframes fx-spider {
  0%   { transform: translateY(0); }
  18%  { transform: translateY(104px); }
  45%  { transform: translateY(84px); }
  70%  { transform: translateY(118px); }
  100% { transform: translateY(0); }
}

/* mirrored cobweb, top right */
body::after {
  content: ""; position: fixed; top: 0; right: 0; width: 180px; height: 180px; z-index: 4; pointer-events: none; opacity: 0.45;
  transform: scaleX(-1);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23d9c8ff' stroke-width='0.6'%3E%3Cpath d='M0 0 L100 0 M0 0 L92 38 M0 0 L70 70 M0 0 L38 92 M0 0 L0 100'/%3E%3Cpath d='M18 0 Q14 14 0 18 M36 0 Q28 28 0 36 M56 0 Q44 44 0 56 M80 0 Q62 62 0 80'/%3E%3C/svg%3E") no-repeat;
}

/* ---------- bat silhouettes with flapping wings ---------- */
.fx-bats { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.fx-bats b { position: absolute; top: var(--y); left: -6vw; width: var(--s); height: calc(var(--s) * 0.44); will-change: transform;
  animation: fx-fly var(--d) linear var(--delay) infinite; }
.fx-bats b i { display: block; width: 100%; height: 100%; transform-origin: 50% 40%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 28'%3E%3Cpath fill='%23a77bff' d='M32 8c-2 0-3 2-3.500 4C24 6 14 4 2 8c4 2 6 6 6 10 3-3 7-3 10 1 2-3 6-3 8 1 2-2 4-2 6 2 2-4 4-4 6-2 2-4 6-4 8-1 3-4 7-4 10-1 0-4 2-8 6-10C50 4 40 6 35.500 12 35 10 34 8 32 8zM29 8l1-5 2 4 2-4 1 5z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  animation: fx-flap 0.42s ease-in-out infinite alternate; opacity: 0.75; }
@keyframes fx-flap { from { transform: scaleY(1); } to { transform: scaleY(0.45); } }
@keyframes fx-fly {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(28vw, -6vh, 0); }
  50%  { transform: translate3d(58vw, 5vh, 0); }
  75%  { transform: translate3d(86vw, -5vh, 0); }
  100% { transform: translate3d(114vw, 2vh, 0); }
}

/* ---------- moon + title life ---------- */
.hero .bg-overlay::after { animation: fx-moon 9s ease-in-out infinite; }
@keyframes fx-moon { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.hero .lw-hero-title { position: relative; }
.hero .lw-hero-title::before {
  content: ""; position: absolute; inset: -30% -8%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 110, 20, 0.28), transparent 70%);
  animation: fx-pulse 4.5s ease-in-out infinite;
}
@keyframes fx-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.hero .lw-hero-title:hover { animation: fx-rise 0.01s both, fx-glitch 0.45s steps(2) 2; }
@keyframes fx-glitch {
  0%   { transform: translate(0); text-shadow: 3px 0 #8a3ffc, -3px 0 #ff7a1a; }
  25%  { transform: translate(-3px, 1px); text-shadow: -4px 0 #8a3ffc, 4px 0 #7dff4d; }
  50%  { transform: translate(3px, -2px); text-shadow: 4px 0 #ff7a1a, -3px 0 #8a3ffc; }
  75%  { transform: translate(-2px, 0); text-shadow: -3px 0 #7dff4d, 3px 0 #ff7a1a; }
  100% { transform: translate(0); }
}

/* ---------- Halloween countdown ---------- */
.fx-count {
  display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 1.6rem; padding: 0.55rem 1.1rem;
  border-radius: 999px; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.92rem; letter-spacing: 0.04em;
  background: rgba(20, 8, 32, 0.8); border: 1px solid rgba(255, 122, 26, 0.5); color: #ffe2b8;
  box-shadow: 0 0 22px rgba(255, 122, 26, 0.25);
}
.fx-count b { color: #ff9a3e; font-weight: 700; }
.fx-count em { font-style: normal; opacity: 0.7; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; }

/* ---------- button shine on hover ---------- */
.hero-btn-primary, .cta-btn-purge.buy-now-btn { position: relative; overflow: hidden; }
.hero-btn-primary::before, .cta-btn-purge.buy-now-btn::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform 0.6s;
}
.hero-btn-primary:hover::before, .cta-btn-purge.buy-now-btn:hover::before { transform: translateX(120%); }

/* ---------- scroll reveal (class added by JS only) ---------- */
.hw-reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.8s var(--fx-ease), transform 0.8s var(--fx-ease); }
.hw-reveal.hw-in { opacity: 1; transform: none; }

@media (max-width: 768px) {
  .fx-spider, .fx-ghost:nth-of-type(n+2) { display: none; }
  .fx-bats b:nth-child(n+3) { display: none; }
  .fx-eyes:nth-of-type(n+3) { display: none; }
  body::before, body::after { width: 100px; height: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-flash, .fx-mist, .fx-eyes, .fx-ghost, .fx-spider, .fx-bats { display: none !important; }
  .hw-reveal { opacity: 1; transform: none; transition: none; }
}
.fx-count { white-space: nowrap; }
@media (max-width: 480px) {
  .fx-count { gap: 0.4rem; padding: 0.5rem 0.8rem; font-size: 0.8rem; }
  .fx-count em { letter-spacing: 0.04em; font-size: 0.68rem; }
}