/* =====================================================================
   HALLOWEEN theme
   Re-colours the design tokens from css/style.css and adds decorations.
   Page content is untouched. Active only while <html data-festival="halloween">.
   ===================================================================== */

/* ---------- 1. Tokens: pumpkin orange + witchy purple ---------- */
html[data-festival="halloween"] {
  --bm-primary:   #1c0b2e;
  --bm-blue:      #c2410c;   /* links & accents - 5.2:1 on white */
  --bm-blue-600:  #9a3412;
  --bm-gold:      #7c3aed;
  --bm-navy-soft: #2e1450;

  --bm-bg:        #fffaf5;
  --bm-light:     #fff3e6;
  --bm-surface:   #fdf1e4;
  --bm-border:    #f1dcc6;
  --bm-muted:     #6b5a7a;
  --bm-ink:       #1c0b2e;

  --bm-grad-hero: radial-gradient(1200px 600px at 80% -10%, rgba(234,88,12,.20), transparent 60%),
                  radial-gradient(900px 500px at 0% 10%, rgba(124,58,237,.14), transparent 55%);
  --bm-grad-blue: linear-gradient(135deg, #c2410c 0%, #ea580c 55%, #f97316 100%);
  --bm-grad-navy: linear-gradient(160deg, #140a22 0%, #24103d 60%, #2e1450 100%);
  --bm-grad-gold: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  --bm-grad-cta:  linear-gradient(120deg, #140a22 0%, #3b1a5c 50%, #c2410c 100%);

  --bm-shadow-blue: 0 20px 50px rgba(234,88,12,.32);

  --hw-orange: #ff7a1a;
  --hw-purple: #a855f7;
  --hw-slime:  #8cff5a;
}

html[data-festival="halloween"][data-bs-theme="dark"] {
  --bm-blue:    #ff8a3d;
  --bm-blue-600:#ff7a1a;
  --bm-gold:    #b57bff;

  --bm-bg:      #0b0612;
  --bm-light:   #150b22;
  --bm-card:    #170c27;
  --bm-surface: #110920;
  --bm-border:  #2f1b47;
  --bm-ink:     #f4ecff;
  --bm-muted:   #b9a8d4;

  --bm-grad-hero: radial-gradient(1200px 600px at 80% -10%, rgba(255,122,26,.20), transparent 60%),
                  radial-gradient(900px 500px at 0% 10%, rgba(168,85,247,.18), transparent 55%);
}

/* ---------- 2. Hard-coded blues in style.css that would clash ---------- */
html[data-festival="halloween"] .btn-bm-primary,
html[data-festival="halloween"] .bm-leadform-fields .btn-bm-primary { box-shadow: 0 10px 24px rgba(234,88,12,.35); }
html[data-festival="halloween"] .btn-bm-primary:hover { box-shadow: 0 0 0 4px rgba(255,122,26,.18), 0 18px 40px rgba(234,88,12,.45); }
html[data-festival="halloween"] .btn-bm-gold,
html[data-festival="halloween"] .btn-bm-gold:hover { color: #fff; box-shadow: 0 10px 24px rgba(124,58,237,.35); }

html[data-festival="halloween"] .bm-navbar .nav-link.active { background: rgba(234,88,12,.10); }
html[data-festival="halloween"] .bm-navbar .dropdown-item:hover { background: rgba(234,88,12,.08); }
html[data-festival="halloween"][data-bs-theme="dark"] .bm-navbar { background: rgba(11,6,18,.78); }

html[data-festival="halloween"] .bm-card:hover,
html[data-festival="halloween"] .bm-step:hover,
html[data-festival="halloween"] .bm-stack-card:hover { border-color: rgba(234,88,12,.45); }

html[data-festival="halloween"] .bm-hero2-glow,
html[data-festival="halloween"] .bm-demo-hero-glow {
  background:
    radial-gradient(50% 55% at 22% 0%, rgba(234,88,12,.20), transparent 70%),
    radial-gradient(40% 45% at 85% 10%, rgba(124,58,237,.18), transparent 70%);
}
html[data-festival="halloween"] .bm-hero2-blob.b1,
html[data-festival="halloween"] .bm-demo-blob.b1 { background: radial-gradient(circle, rgba(234,88,12,.34), transparent 70%); }
html[data-festival="halloween"] .bm-hero2-blob.b2,
html[data-festival="halloween"] .bm-demo-blob.b2 { background: radial-gradient(circle, rgba(124,58,237,.32), transparent 70%); }
html[data-festival="halloween"] .bm-hero2-blob.b3 { background: radial-gradient(circle, rgba(140,255,90,.12), transparent 70%); }

html[data-festival="halloween"] .bm-ind-hero::before {
  background: radial-gradient(900px 420px at 78% -10%, rgba(234,88,12,.38), transparent 62%),
              radial-gradient(700px 380px at 8% 110%, rgba(124,58,237,.26), transparent 60%);
}
html[data-festival="halloween"] .bm-metric-band::before {
  background: radial-gradient(700px 320px at 85% 0%, rgba(234,88,12,.35), transparent 62%);
}
html[data-festival="halloween"] .bm-cta::before {
  background: radial-gradient(600px 300px at 90% 0%, rgba(255,122,26,.28), transparent 60%);
}
/* Pale blue icon tiles, chips and tags across the pages */
html[data-festival="halloween"] .bm-card-icon,
html[data-festival="halloween"] .bm-feature-row .fic,
html[data-festival="halloween"] .bm-req-head i,
html[data-festival="halloween"] .bm-token-arrow,
html[data-festival="halloween"] .bm-hero-badge,
html[data-festival="halloween"] .bm-solve-tag.is-answer,
html[data-festival="halloween"] .bm-doc-main code,
html[data-festival="halloween"] .bm-thanks-counter,
html[data-festival="halloween"] .bm-mega-foot:hover { background: rgba(234,88,12,.12); }
html[data-festival="halloween"] .bm-hero-badge,
html[data-festival="halloween"] .bm-thanks-counter { border-color: rgba(234,88,12,.3); }
html[data-festival="halloween"] .bm-card-icon { box-shadow: 0 8px 18px -8px rgba(234,88,12,.45); }
html[data-festival="halloween"] .bm-card:hover .bm-card-icon { background: var(--bm-grad-blue); box-shadow: 0 12px 26px -8px rgba(234,88,12,.6); }
html[data-festival="halloween"] .bm-step-num,
html[data-festival="halloween"] .bm-stack-icon,
html[data-festival="halloween"] .bm-tl-dot,
html[data-festival="halloween"] .bm-doc-rail-cta { box-shadow: 0 10px 22px -10px rgba(234,88,12,.75); }
html[data-festival="halloween"] .bm-step:hover .bm-step-num { box-shadow: 0 16px 30px -10px rgba(234,88,12,.85); }
html[data-festival="halloween"] .bm-chip:hover { background: rgba(234,88,12,.08); }

/* Gold-accent icons (every 5th card, 24/7 support, developer list) would turn
   purple via --bm-gold; keep them pumpkin orange like the rest. */
html[data-festival="halloween"] .bm-card-gold .bm-card-icon,
html[data-festival="halloween"] .bm-feature-row-gold .fic { color: var(--bm-blue); }
html[data-festival="halloween"] .bm-card-gold:hover .bm-card-icon { color: #fff; }
html[data-festival="halloween"] .bm-card-gold .bm-card-icon { box-shadow: 0 8px 18px -8px rgba(234,88,12,.45); }
html[data-festival="halloween"] .bm-stat-panel .ic { background: rgba(255,138,61,.18) !important; color: #ff8a3d !important; }
html[data-festival="halloween"] .bm-dev-feature i { color: #ff8a3d; }

html[data-festival="halloween"] .bm-leadform-bar,
html[data-festival="halloween"] .bm-thanks-mark { background: linear-gradient(90deg, #c2410c, #7c3aed); }

/* Live-payments map: orange dots and pings */
html[data-festival="halloween"] .bm-worldmap-canvas {
  --map-dot: rgba(234,88,12,.55); --map-line: rgba(124,58,237,.3);
  --map-3d-side: rgba(90,30,8,.92); --map-3d-top-a: #ea580c; --map-3d-top-b: #fb923c;
  --map-ping: #ea580c; --map-ping-gold: #7c3aed;
}
html[data-festival="halloween"][data-bs-theme="dark"] .bm-worldmap-canvas {
  --map-dot: rgba(255,138,61,.5); --map-line: rgba(181,123,255,.32);
  --map-3d-side: rgba(60,20,6,.95); --map-3d-top-a: #ff7a1a; --map-3d-top-b: #ffb27a;
  --map-ping: #ff8a3d; --map-ping-gold: #b57bff; --map-ping-halo: #0b0612;
}

/* Home hero canvas (js/hero-bg.js): map dots, payment arcs and volume line */
html[data-festival="halloween"] .bm-hero2-map { --hero-bg-a: 234,88,12; --hero-bg-b: 168,85,247; }

::selection { background: rgba(255,122,26,.35); }
html[data-festival="halloween"] .bm-text-gradient {
  background-image: linear-gradient(100deg, var(--bm-blue), var(--bm-gold));
}

/* ---------- 3. Navbar: glowing slime drip along the bottom edge ---------- */
html[data-festival="halloween"] .bm-navbar { border-bottom-color: rgba(255,122,26,.45); }
html[data-festival="halloween"] .bm-navbar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px;
  pointer-events: none;
  background:
    radial-gradient(5px 9px at 6% 0, var(--hw-orange) 98%, transparent) ,
    radial-gradient(4px 12px at 19% 0, var(--hw-orange) 98%, transparent),
    radial-gradient(6px 7px at 33% 0, var(--hw-orange) 98%, transparent),
    radial-gradient(4px 11px at 51% 0, var(--hw-orange) 98%, transparent),
    radial-gradient(5px 8px at 68% 0, var(--hw-orange) 98%, transparent),
    radial-gradient(4px 13px at 82% 0, var(--hw-orange) 98%, transparent),
    radial-gradient(5px 9px at 95% 0, var(--hw-orange) 98%, transparent);
  opacity: .8;
  filter: drop-shadow(0 0 4px rgba(255,122,26,.6));
}

/* ---------- 4. Hero sections: full moon, bats and drifting fog ---------- */
html[data-festival="halloween"] .bm-hero2,
html[data-festival="halloween"] .bm-page-hero,
html[data-festival="halloween"] .bm-ind-hero,
html[data-festival="halloween"] .bm-demo-hero { position: relative; overflow: hidden; }

/* Hero content must sit above the moon and fog. */
html[data-festival="halloween"] .bm-page-hero > .container,
html[data-festival="halloween"] .bm-demo-hero > .container { position: relative; z-index: 2; }

.bm-hw-moon {
  position: absolute; z-index: 0; pointer-events: none;
  top: calc(var(--bm-nav-h) + 8px); right: 4%;
  width: clamp(110px, 14vw, 200px); height: auto;
  filter: drop-shadow(0 0 30px rgba(255,236,170,.55)) drop-shadow(0 0 90px rgba(255,190,90,.35));
  opacity: .9;
}
[data-bs-theme="light"] .bm-hw-moon { opacity: .55; filter: drop-shadow(0 0 24px rgba(255,190,90,.5)); }
.bm-hw-moon-bat {
  position: absolute; z-index: 0; pointer-events: none; width: 34px;
  top: calc(var(--bm-nav-h) + 40px); right: calc(4% + 60px);
  animation: hwHover 4s ease-in-out infinite;
}
.bm-hw-moon-bat.b2 { width: 22px; top: calc(var(--bm-nav-h) + 96px); right: calc(4% + 140px); animation-delay: -1.6s; }

.bm-hw-fog {
  position: absolute; left: -50%; right: -50%; bottom: -20px; height: 140px; z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(40% 60% at 20% 80%, rgba(200,190,230,.22), transparent 70%),
    radial-gradient(35% 55% at 55% 90%, rgba(200,190,230,.18), transparent 70%),
    radial-gradient(40% 60% at 85% 80%, rgba(200,190,230,.22), transparent 70%);
  animation: hwFog 28s linear infinite alternate;
}
[data-bs-theme="light"] .bm-hw-fog { opacity: .5; }

/* ---------- 5. Cobwebs in the corners under the navbar ---------- */
.bm-hw-web {
  position: fixed; top: var(--bm-nav-h); z-index: 1019; pointer-events: none;
  width: clamp(110px, 13vw, 190px); opacity: .42;
}
.bm-hw-web.left  { left: 0; }
.bm-hw-web.right { right: 0; transform: scaleX(-1); }
[data-bs-theme="light"] .bm-hw-web { filter: invert(.55); opacity: .35; }

/* ---------- 6. Hanging spider (top-right) ---------- */
.bm-hw-spider {
  position: fixed; z-index: 1019; pointer-events: none;
  top: var(--bm-nav-h); right: clamp(60px, 11vw, 170px);
  width: 34px; transform-origin: 50% 0;
  animation: hwSpiderDrop 9s ease-in-out infinite;
}
.bm-hw-spider::before {     /* the silk thread */
  content: ""; position: absolute; left: 50%; bottom: 100%;
  width: 1px; height: 400px; background: rgba(200,190,230,.6);
}
[data-bs-theme="light"] .bm-hw-spider::before { background: rgba(60,40,80,.45); }
.bm-hw-spider img { width: 100%; display: block; animation: hwSwing 3s ease-in-out infinite; transform-origin: 50% 0; }

/* ---------- 7. Flying bats and a drifting ghost (built by halloween.js) ---------- */
.bm-hw-bat {
  position: absolute; top: 0; left: 0; will-change: transform;
  filter: drop-shadow(0 0 5px rgba(255,122,26,.55));
}
[data-bs-theme="light"] .bm-hw-bat { filter: none; }
.bm-hw-bat img { width: 100%; display: block; animation: hwFlap .22s ease-in-out infinite alternate; transform-origin: 50% 40%; }

.bm-hw-ghost {
  position: absolute; top: 0; left: 0; width: 80px; will-change: transform;
  filter: drop-shadow(0 0 18px rgba(200,180,255,.6));
  opacity: .88;
}
.bm-hw-ghost img { width: 100%; display: block; animation: hwHover 2.4s ease-in-out infinite; }

/* ---------- 8. Footer: graveyard skyline along the top ---------- */
/* style.css hard-codes blue-grey text for the navy footer and navy panels;
   shift it to lavender to sit on the purple night. */
html[data-festival="halloween"] .bm-footer,
html[data-festival="halloween"] .bm-footer-about,
html[data-festival="halloween"] .bm-footer-links a,
html[data-festival="halloween"] .bm-legal-row a,
html[data-festival="halloween"] .bm-navy-bg p { color: #c9b8e6; }
html[data-festival="halloween"] .bm-footer-links a:hover,
html[data-festival="halloween"] .bm-legal-row a:hover { color: #ff8a3d; }
html[data-festival="halloween"] .bm-footer-heading { color: #ff8a3d; }
html[data-festival="halloween"] .bm-badge { color: #e4d9f7; }
html[data-festival="halloween"] .bm-badge i { color: #ff8a3d; }
html[data-festival="halloween"] .bm-footer-bottom p { color: #a593c4; }
html[data-festival="halloween"] .bm-footer-badges { border-color: rgba(255,138,61,.18); }
html[data-festival="halloween"] .bm-navy-bg { color: #e4d9f7; }
html[data-festival="halloween"] .bm-cta p { color: #e4d9f7; }

html[data-festival="halloween"] .bm-footer { position: relative; }
html[data-festival="halloween"] .bm-footer::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 110px;
  pointer-events: none;
  background: url("images/graveyard.svg") repeat-x left bottom / auto 110px;
}
html[data-festival="halloween"] .bm-footer::after {   /* glowing pumpkins in the grass */
  content: ""; position: absolute; bottom: 100%; left: 7%;
  width: 54px; height: 48px; pointer-events: none;
  background: url("images/pumpkin.svg") no-repeat center / contain;
  filter: drop-shadow(0 0 14px rgba(255,170,40,.75));
  animation: hwFlicker 3.2s ease-in-out infinite;
}

/* ---------- 9. Keyframes ---------- */
@keyframes hwFlap   { from { transform: scaleY(1); } to { transform: scaleY(.35); } }
@keyframes hwHover  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes hwSwing  { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes hwFog    { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
@keyframes hwSpiderDrop {
  0%, 100% { transform: translateY(-46px); }
  45%, 60% { transform: translateY(70px); }
}
@keyframes hwFlicker {
  0%,100% { filter: drop-shadow(0 0 14px rgba(255,170,40,.75)); }
  40%     { filter: drop-shadow(0 0 6px rgba(255,170,40,.4)); }
  55%     { filter: drop-shadow(0 0 20px rgba(255,190,60,.9)); }
}

/* ---------- 10. Small screens + reduced motion ---------- */
@media (max-width: 767.98px) {
  .bm-hw-web { width: 90px; opacity: .3; }
  .bm-hw-spider { right: 70px; width: 26px; }
  .bm-hw-moon { top: calc(var(--bm-nav-h) + 4px); right: 2%; width: 84px; opacity: .55; }
  .bm-hw-moon-bat { display: none; }
  html[data-festival="halloween"] .bm-footer::before { height: 70px; background-size: auto 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .bm-hw-fog, .bm-hw-spider, .bm-hw-spider img, .bm-hw-moon-bat,
  html[data-festival="halloween"] .bm-footer::after { animation: none !important; }
  .bm-hw-spider { transform: translateY(20px); }
}