#halloween-v3 {
    position: fixed;
    inset: 0;
    z-index: 80;
    overflow: hidden;
    pointer-events: none;
    isolation: isolate;
    --h3-night: #332D3B;
  }
  #halloween-v3 * { box-sizing: border-box; }

  .h3-corner {
    position: absolute;
    bottom: 6px;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    z-index: 3;
  }
  .h3-corner-left { left: 4px; }
  .h3-corner-right { right: 4px; }
  .h3-pumpkin {
    width: 55px; height: 50px;
    filter: drop-shadow(0 0 7px rgba(255,139,45,.3));
    animation: h3-pumpkin-bob 4s ease-in-out infinite;
  }
  .h3-gravestone { width: 34px; height: 45px; }
  @keyframes h3-pumpkin-bob {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
  }

  .h3-atmosphere { position: absolute; inset: 0; z-index: 1; }
  .h3-bat { position: absolute; width: 42px; height: 22px; }
  .h3-bat-a { top: 20px; left: 8px; animation: h3-bat-drift 8s ease-in-out infinite; }
  .h3-bat-b { top: 72px; right: 8px; width: 34px; animation: h3-bat-drift 9s ease-in-out -4s infinite; }
  @keyframes h3-bat-drift {
    0%,100% { transform: translate(0,0) rotate(-3deg); }
    50% { transform: translate(8px,5px) rotate(4deg); }
  }
  .h3-ghost { position: absolute; right: 8px; top: 29%; width: 44px; opacity: .95; filter: drop-shadow(0 0 5px rgba(255,211,83,.24)); animation: h3-ghost-float 6s ease-in-out infinite; }
  @keyframes h3-ghost-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
  .h3-spider { position: absolute; top: 13%; left: 4px; width: 28px; height: 45px; animation: h3-spider-sway 4.5s ease-in-out infinite; transform-origin: top center; }
  @keyframes h3-spider-sway { 0%,100% { transform: rotate(-13deg); } 25% { transform: rotate(5deg); } 50% { transform: rotate(16deg); } 75% { transform: rotate(-4deg); } }
  .h3-crow { position: absolute; right: 7px; bottom: 120px; width: 45px; animation: h3-crow-peck 5s ease-in-out infinite; transform-origin: center bottom; }
  @keyframes h3-crow-peck { 0%,85%,100% { transform: rotate(0); } 90% { transform: rotate(-7deg); } 95% { transform: rotate(4deg); } }

  .h3-web {
    position: absolute; width: 72px; height: 72px; opacity: .27;
    background: repeating-conic-gradient(from 0deg, transparent 0deg 14deg, #9C91AC 15deg 16deg, transparent 17deg 30deg);
    -webkit-mask: radial-gradient(circle, transparent 0 12%, #000 13% 14%, transparent 15% 27%, #000 28% 29%, transparent 30% 43%, #000 44% 45%, transparent 46%);
    mask: radial-gradient(circle, transparent 0 12%, #000 13% 14%, transparent 15% 27%, #000 28% 29%, transparent 30% 43%, #000 44% 45%, transparent 46%);
  }
  .h3-web-a { top: 0; right: 0; }
  .h3-web-b { bottom: 75px; left: 0; transform: rotate(180deg); }

  .h3-grave-scene { position: absolute; z-index: 2; left: 8px; bottom: 0; width: 135px; height: 118px; }
  .h3-mound { position: absolute; left: 0; bottom: 0; width: 135px; height: 27px; border-radius: 50% 50% 0 0; background: linear-gradient(#565643,#292C28); border-top: 3px solid #77745D; }
  .h3-scene-stone { position: absolute; left: 10px; bottom: 13px; width: 56px; height: 74px; }

  .h3-zombie {
    position: absolute; z-index: 4;
    left: 32px; bottom: 8px;
    width: 100px; height: 146px;
    border: 0; margin: 0; padding: 0;
    background: transparent; appearance: none;
    pointer-events: auto; cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transform-origin: 50% 100%;
    opacity: 0;
    transition: opacity .5s ease;
    filter: drop-shadow(0 3px 3px rgba(0,0,0,.22));
  }
  .h3-zombie.h3-visible { opacity: 1; }
  .h3-zombie-art { width: 100%; height: 100%; overflow: visible; }
  .h3-face-annoyed { opacity: 0; }
  .h3-zombie.h3-annoyed .h3-face-normal { opacity: 0; }
  .h3-zombie.h3-annoyed .h3-face-annoyed { opacity: 1; }
  .h3-annoyed-mark {
    position: absolute; top: 0; right: 1px;
    font: 900 23px/1 sans-serif; color: #F4A04A;
    text-shadow: 0 2px 3px rgba(0,0,0,.3);
    opacity: 0; transform: scale(.5) rotate(10deg);
  }
  .h3-zombie.h3-annoyed .h3-annoyed-mark { animation: h3-pop .35s ease-out both; }
  @keyframes h3-pop { 0% { opacity: 0; transform: scale(.5) rotate(10deg); } 75% { opacity: 1; transform: scale(1.15) rotate(-8deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }

  /* A measured alternating gait: hips move, feet alternate, torso stays calm */
  .h3-zombie.h3-walking .h3-leg {
    transform-box: view-box;
    transform-origin: 60px 130px;
    animation: h3-step 1.15s ease-in-out infinite alternate;
  }
  .h3-zombie.h3-walking .h3-leg-front { animation-delay: -1.15s; }
  .h3-zombie.h3-walking .h3-arm {
    transform-box: view-box;
    transform-origin: 60px 73px;
    animation: h3-arm-swing 1.15s ease-in-out infinite alternate;
  }
  .h3-zombie.h3-walking .h3-arm-front { animation-delay: -.575s; }
  .h3-zombie.h3-walking .h3-zombie-art {
    transform-origin: 60px 125px;
    animation: h3-body-shift 1.15s ease-in-out infinite alternate;
  }
  .h3-zombie.h3-fast.h3-walking .h3-leg,
  .h3-zombie.h3-fast.h3-walking .h3-arm { animation-duration: .48s; }
  .h3-zombie.h3-fast.h3-walking .h3-zombie-art { animation-duration: .48s; }

  @keyframes h3-step { from { transform: rotate(-11deg); } to { transform: rotate(11deg); } }
  @keyframes h3-arm-swing { from { transform: rotate(5deg); } to { transform: rotate(-5deg); } }
  @keyframes h3-body-shift { from { transform: translateY(0) rotate(-.7deg); } to { transform: translateY(-1px) rotate(.7deg); } }

  @media (max-width: 600px) {
    .h3-corner { bottom: 4px; gap: 3px; }
    .h3-corner-left { left: 2px; } .h3-corner-right { right: 2px; }
    .h3-pumpkin { width: 39px; height: 36px; }
    .h3-gravestone { width: 25px; height: 34px; }
    .h3-bat-a { width: 29px; top: 12px; }
    .h3-bat-b { width: 25px; top: 48px; }
    .h3-ghost { width: 33px; }
    .h3-spider { width: 21px; top: 12%; }
    .h3-crow { width: 32px; bottom: 94px; }
    .h3-web { width: 44px; height: 44px; }
    .h3-grave-scene { left: 0; transform: scale(.65); transform-origin: bottom left; }
    .h3-zombie { width: 66px; height: 98px; left: 20px; bottom: 5px; }
    .h3-annoyed-mark { font-size: 17px; }
  }

  @media (prefers-reduced-motion: reduce) {
    #halloween-v3 *, #halloween-v3 *::before, #halloween-v3 *::after {
      animation: none !important; transition: none !important;
    }
  }

  /* ===== Refined dark-site Halloween lighting ===== */
  #halloween-v3 .h3-ambient-light {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }
  #halloween-v3 .h3-glow {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(28px);
    opacity: .55;
    mix-blend-mode: screen;
    will-change: opacity, transform;
  }
  #halloween-v3 .h3-glow-amber {
    left: -105px; top: 12%;
    width: 240px; height: 300px;
    background: radial-gradient(ellipse, rgba(255,126,36,.28) 0%, rgba(255,91,28,.12) 38%, transparent 72%);
    animation: h3-amber-breathe 6s ease-in-out infinite;
  }
  #halloween-v3 .h3-glow-violet {
    right: -125px; top: 22%;
    width: 260px; height: 340px;
    background: radial-gradient(ellipse, rgba(126,91,183,.25) 0%, rgba(90,69,145,.10) 42%, transparent 72%);
    animation: h3-violet-breathe 7.5s ease-in-out infinite;
  }
  #halloween-v3 .h3-glow-bottom {
    left: 12%; right: 12%; bottom: -95px;
    height: 210px;
    background: radial-gradient(ellipse, rgba(255,126,36,.18) 0%, rgba(255,126,36,.07) 42%, transparent 73%);
    filter: blur(32px);
    animation: h3-amber-breathe 8s ease-in-out -2s infinite;
  }
  @keyframes h3-amber-breathe {
    0%,100% { opacity: .38; transform: scale(.96); }
    50% { opacity: .75; transform: scale(1.04); }
  }
  @keyframes h3-violet-breathe {
    0%,100% { opacity: .35; transform: translateY(0) scale(.97); }
    50% { opacity: .68; transform: translateY(12px) scale(1.04); }
  }
  #halloween-v3 .h3-light-speck {
    position: absolute;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #FFC16B;
    box-shadow: 0 0 7px 2px rgba(255,157,60,.48), 0 0 18px 5px rgba(255,116,38,.16);
    opacity: .55;
    animation: h3-firefly 5s ease-in-out infinite;
  }
  #halloween-v3 .h3-light-speck-a { left: 24px; top: 34%; }
  #halloween-v3 .h3-light-speck-b { right: 28px; top: 48%; animation-delay: -1.7s; }
  #halloween-v3 .h3-light-speck-c { right: 11%; bottom: 18%; width: 3px; height: 3px; animation-delay: -3.2s; }
  @keyframes h3-firefly {
    0%,100% { opacity: .2; transform: translateY(0) scale(.8); }
    45% { opacity: .85; transform: translateY(-9px) scale(1.15); }
    70% { opacity: .45; transform: translateY(3px) scale(.9); }
  }
  #halloween-v3 .h3-pumpkin {
    filter: drop-shadow(0 0 5px rgba(255,137,43,.55))
            drop-shadow(0 0 13px rgba(255,103,29,.28));
    animation: h3-pumpkin-bob 4s ease-in-out infinite, h3-pumpkin-glow 3.2s ease-in-out infinite;
  }
  @keyframes h3-pumpkin-glow {
    0%,100% { filter: drop-shadow(0 0 4px rgba(255,137,43,.42)) drop-shadow(0 0 9px rgba(255,103,29,.18)); }
    50% { filter: drop-shadow(0 0 8px rgba(255,165,63,.8)) drop-shadow(0 0 19px rgba(255,103,29,.4)); }
  }
  #halloween-v3 .h3-zombie {
    touch-action: manipulation;
  }

  @media (max-width: 600px) {
    #halloween-v3 .h3-glow { filter: blur(22px); }
    #halloween-v3 .h3-glow-amber { left: -125px; width: 190px; }
    #halloween-v3 .h3-glow-violet { right: -140px; width: 190px; }
    #halloween-v3 .h3-glow-bottom { left: 0; right: 0; height: 150px; }
    #halloween-v3 .h3-light-speck { width: 3px; height: 3px; }
  }
  @media (prefers-reduced-motion: reduce) {
    #halloween-v3 .h3-glow,
    #halloween-v3 .h3-light-speck,
    #halloween-v3 .h3-pumpkin {
      animation: none !important;
    }
  }