/* Halloween Welcome Overlay 2.4 — transparent, independently animated layers. */
#hwo-overlay {
  position: fixed; inset: 0; z-index: 2147483000; overflow: hidden;
  pointer-events: none; background: transparent !important; isolation: isolate;
  contain: layout style paint; opacity: 1; color: #fff;
}
#hwo-overlay, #hwo-overlay * { box-sizing: border-box; }
#hwo-overlay * { pointer-events: none; }
#hwo-overlay .hwo-glow,
#hwo-overlay .hwo-smoke,
#hwo-overlay .hwo-pumpkin-stage,
#hwo-overlay .hwo-bat-layer,
#hwo-overlay .hwo-lightning,
#hwo-overlay .hwo-flash,
#hwo-overlay .hwo-spark-layer { position: absolute; inset: 0; }

#hwo-overlay .hwo-glow {
  z-index: 1;
  background: radial-gradient(ellipse at 53% 53%, rgba(255,89,8,0) 0%, rgba(255,96,8,.16) 17%, rgba(255,91,12,.08) 31%, transparent 52%);
  opacity: 0; mix-blend-mode: screen; animation: hwo-glow-bloom 3.8s ease-out both;
}
@keyframes hwo-glow-bloom {
  0%,100% { opacity: 0; transform: scale(.72); }
  18% { opacity: .72; transform: scale(.9); }
  54% { opacity: .82; transform: scale(1.02); }
  76% { opacity: .95; transform: scale(1.12); }
  88% { opacity: 1; transform: scale(1.23); }
  95% { opacity: .42; transform: scale(1.36); }
}
#hwo-overlay .hwo-smoke {
  z-index: 2; inset: 18% 12% 8% 16%;
  background: radial-gradient(ellipse at 36% 62%, rgba(181,166,175,.12), transparent 28%), radial-gradient(ellipse at 65% 50%, rgba(166,150,165,.13), transparent 31%), radial-gradient(ellipse at 50% 75%, rgba(255,95,20,.08), transparent 28%);
  filter: blur(22px); opacity: 0; mix-blend-mode: screen; animation: hwo-smoke-drift 3.8s ease-out both;
}
@keyframes hwo-smoke-drift {
  0% { opacity: 0; transform: translate3d(0,14px,0) scale(.85); }
  20% { opacity: .42; transform: translate3d(-5px,7px,0) scale(.96); }
  44% { opacity: .62; transform: translate3d(7px,-4px,0) scale(1.06); }
  72% { opacity: .7; transform: translate3d(-4px,-14px,0) scale(1.12); }
  100% { opacity: 0; transform: translate3d(0,-30px,0) scale(1.25); }
}

#hwo-overlay .hwo-pumpkin-stage { z-index: 4; perspective: 1200px; }
#hwo-overlay .hwo-pumpkin-wrap {
  position: absolute; left: 53%; top: 51%; width: min(57vw, 790px, calc(90vh * 1.012)); aspect-ratio: 845 / 835;
  transform: translate3d(-50%,-50%,0) scale(.56) rotate(-2deg); transform-origin: 50% 54%;
  opacity: 0; filter: drop-shadow(0 0 18px rgba(255,83,7,.24));
  will-change: transform, opacity, filter;
  animation: hwo-pumpkin-sequence 3.8s cubic-bezier(.18,.68,.19,1) both, hwo-pumpkin-laugh .12s ease-in-out 1s 12 both;
}
#hwo-overlay .hwo-pumpkin-closed,
#hwo-overlay .hwo-pumpkin-open { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; }
#hwo-overlay .hwo-pumpkin-closed { z-index:0; }
#hwo-overlay .hwo-pumpkin-open { z-index:1; opacity:0; animation:hwo-eyes-open 3.8s ease-out both; }
@keyframes hwo-eyes-open {
  0%, 20% { opacity:0; }
  23% { opacity:.08; }
  26% { opacity:.26; }
  29% { opacity:.54; }
  32% { opacity:.82; }
  35% { opacity:1; }
  100% { opacity:1; }
}
@keyframes hwo-pumpkin-sequence {
  0%   { opacity: 0; transform: translate3d(-50%,-50%,0) scale(.54) rotate(-2deg); filter: brightness(.72) drop-shadow(0 0 8px rgba(255,80,0,.1)); }
  5%   { opacity: .72; transform: translate3d(-50%,-50%,0) scale(.59) rotate(-1.5deg); filter: brightness(.82) drop-shadow(0 0 15px rgba(255,80,0,.18)); }
  10%  { opacity: .91; transform: translate3d(-50%,-50%,0) scale(.63) rotate(-1deg); filter: brightness(.90) drop-shadow(0 0 20px rgba(255,80,0,.24)); }
  17%  { opacity: .96; transform: translate3d(-50%,-50%,0) scale(.67) rotate(-.45deg); filter: brightness(.96) drop-shadow(0 0 24px rgba(255,85,0,.3)); }
  24%  { opacity: .98; transform: translate3d(-50%,-50%,0) scale(.70) rotate(.2deg); filter: brightness(1.0) drop-shadow(0 0 27px rgba(255,91,0,.34)); }
  34%  { opacity: .98; transform: translate3d(-50%,-50%,0) scale(.73) rotate(.32deg); filter: brightness(1.03) drop-shadow(0 0 29px rgba(255,91,0,.38)); }
  45%  { opacity: .99; transform: translate3d(-50%,-50%,0) scale(.77) rotate(-.2deg); filter: brightness(1.05) drop-shadow(0 0 32px rgba(255,91,0,.4)); }
  56%  { opacity: .99; transform: translate3d(-50%,-50%,0) scale(.82) rotate(.25deg); filter: brightness(1.08) drop-shadow(0 0 36px rgba(255,100,0,.44)); }
  67%  { opacity: 1; transform: translate3d(-50%,-50%,0) scale(.90) rotate(-.35deg); filter: brightness(1.1) drop-shadow(0 0 41px rgba(255,108,0,.5)); }
  76%  { opacity: 1; transform: translate3d(-50%,-50%,0) scale(1.02) rotate(.55deg); filter: brightness(1.13) drop-shadow(0 0 47px rgba(255,120,0,.58)); }
  83%  { opacity: 1; transform: translate3d(-50%,-50%,0) scale(1.20) rotate(-.85deg); filter: brightness(1.18) drop-shadow(0 0 56px rgba(255,145,0,.66)); }
  88%  { opacity: 1; transform: translate3d(-50%,-50%,0) scale(1.42) rotate(1.1deg); filter: brightness(1.25) drop-shadow(0 0 66px rgba(255,160,0,.75)); }
  93%  { opacity: .78; transform: translate3d(-50%,-50%,0) scale(1.55) rotate(-.35deg); filter: brightness(1.3) drop-shadow(0 0 70px rgba(255,175,0,.72)); }
  100% { opacity: 0; transform: translate3d(-50%,-50%,0) scale(1.68) rotate(0deg); filter: brightness(1.12); }
}
@keyframes hwo-pumpkin-laugh { 0%,100%{margin-left:0} 25%{margin-left:-2px} 75%{margin-left:2px} }

/* Each bat is its own SVG element. The parent controls flight; the wings flap independently. */
#hwo-overlay .hwo-bat-layer { overflow: visible; }
#hwo-overlay .hwo-bat-back-layer { z-index: 3; opacity: .84; }
#hwo-overlay .hwo-bat-front-layer { z-index: 6; }
#hwo-overlay .hwo-bat {
  display:block; visibility:visible; position:absolute; left:var(--hwo-start-x); top:var(--hwo-start-y);
  width:var(--hwo-size); height:auto; opacity:0; transform-origin:50% 50%; z-index:1;
  filter:blur(var(--hwo-blur,0px)) drop-shadow(0 0 7px rgba(255,74,13,.42)); will-change:transform,opacity,filter;
  animation:hwo-bat-flight var(--hwo-duration) cubic-bezier(.2,.04,.55,1) var(--hwo-delay) both;
}
#hwo-overlay .hwo-bat svg { display:block; width:100%; height:auto; overflow:visible; transform-origin:center; animation:hwo-bat-body-bob .24s ease-in-out infinite alternate; }
#hwo-overlay .hwo-wing-left,#hwo-overlay .hwo-wing-right { transform-box:fill-box; }
#hwo-overlay .hwo-wing-left { transform-origin:100% 50%; animation:hwo-wing-left .13s ease-in-out infinite alternate; }
#hwo-overlay .hwo-wing-right { transform-origin:0% 50%; animation:hwo-wing-right .13s ease-in-out infinite alternate; }
#hwo-overlay .hwo-bat-eyes { fill:#ff4a13; filter:drop-shadow(0 0 3px #ff3b00); }
@keyframes hwo-wing-left { from{transform:rotate(24deg) scaleY(.62)} to{transform:rotate(-25deg) scaleY(1.12)} }
@keyframes hwo-wing-right { from{transform:rotate(-24deg) scaleY(.62)} to{transform:rotate(25deg) scaleY(1.12)} }
@keyframes hwo-bat-body-bob { from{transform:translateY(-1px) rotate(-1deg)} to{transform:translateY(2px) rotate(1deg)} }
@keyframes hwo-bat-flight {
  0% { opacity:0; transform:translate3d(0,0,0) scale(var(--hwo-scale-start)) rotate(var(--hwo-rot-start)); filter:blur(var(--hwo-blur,0px)) drop-shadow(0 0 4px rgba(255,74,13,.25)); }
  7% { opacity:var(--hwo-peak-opacity,.96); transform:translate3d(0,0,0) scale(var(--hwo-scale-start)) rotate(var(--hwo-rot-start)); }
  25% { opacity:var(--hwo-peak-opacity,.96); transform:translate3d(var(--hwo-mid-x),var(--hwo-mid-y),0) scale(var(--hwo-scale-mid)) rotate(var(--hwo-rot-mid)); }
  52% { opacity:var(--hwo-peak-opacity,.94); transform:translate3d(var(--hwo-mid2-x),var(--hwo-mid2-y),0) scale(var(--hwo-scale-mid2)) rotate(var(--hwo-rot-mid2)); }
  76% { opacity:var(--hwo-peak-opacity,.88); transform:translate3d(var(--hwo-move-x-mid),var(--hwo-move-y-mid),0) scale(var(--hwo-scale-near)) rotate(var(--hwo-rot-near)); filter:blur(calc(var(--hwo-blur,0px) + .25px)) drop-shadow(0 0 8px rgba(255,74,13,.45)); }
  100% { opacity:0; transform:translate3d(var(--hwo-move-x),var(--hwo-move-y),0) scale(var(--hwo-scale-end)) rotate(var(--hwo-rot-end)); filter:blur(calc(var(--hwo-blur,0px) + 1.2px)) drop-shadow(0 0 12px rgba(255,74,13,.5)); }
}

#hwo-overlay .hwo-lightning { z-index:8; }
#hwo-overlay .hwo-bolt { position:absolute; width:min(36vw,470px); height:92vh; top:-4vh; right:7vw; opacity:0; overflow:visible; filter:drop-shadow(0 0 8px rgba(215,230,255,.9)) drop-shadow(0 0 22px rgba(135,168,255,.6)); animation:hwo-bolt-flash 3.8s steps(1,end) both; }
#hwo-overlay .hwo-bolt.hwo-bolt-secondary { width:min(28vw,360px); height:67vh; top:35vh; left:-3vw; right:auto; transform:rotate(180deg); animation-delay:.08s; }
#hwo-overlay .hwo-bolt path { fill:none; stroke:rgba(238,244,255,.98); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
#hwo-overlay .hwo-bolt .hwo-bolt-core { stroke-width:2.2; stroke:#fff; }
@keyframes hwo-bolt-flash { 0%,32%,36%,61%,74%,100%{opacity:0} 33%{opacity:.94} 34%{opacity:.12} 35%{opacity:.68} 63%{opacity:1} 64%{opacity:.08} 66%{opacity:.82} 68%{opacity:.05} }
#hwo-overlay .hwo-flash { z-index:9; opacity:0; background:radial-gradient(ellipse at 70% 28%,rgba(220,235,255,.62) 0%,rgba(167,194,255,.20) 26%,rgba(185,205,255,.06) 48%,transparent 72%); mix-blend-mode:screen; animation:hwo-flash-sequence 3.8s linear both; }
@keyframes hwo-flash-sequence { 0%,31%,36%,60%,74%,100%{opacity:0} 33%{opacity:.26} 34%{opacity:.05} 35%{opacity:.18} 62%{opacity:.64} 63%{opacity:.10} 66%{opacity:.48} 68%{opacity:.02} }
#hwo-overlay .hwo-spark-layer { z-index:7; overflow:hidden; }
#hwo-overlay .hwo-spark { position:absolute; left:var(--hwo-x); top:var(--hwo-y); width:var(--hwo-size); height:var(--hwo-size); border-radius:50%; background:#ff8b2b; box-shadow:0 0 8px 2px rgba(255,94,13,.6); opacity:0; animation:hwo-spark-flight var(--hwo-duration) ease-out var(--hwo-delay) both; }
@keyframes hwo-spark-flight { 0%{opacity:0;transform:translate3d(0,0,0) scale(.5)} 18%{opacity:.9} 82%{opacity:.65} 100%{opacity:0;transform:translate3d(var(--hwo-dx),var(--hwo-dy),0) scale(.1)} }
#hwo-overlay.hwo-outro { opacity:0; transition:opacity .22s ease-out; }

#hwo-sound-replay {
  position:fixed; z-index:2147483001; top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right));
  pointer-events:auto; border:1px solid rgba(255,190,112,.78); border-radius:999px; padding:10px 14px;
  background:rgba(18,12,14,.96); color:#fff5e8; font:650 12px/1.1 system-ui,sans-serif; cursor:pointer;
  box-shadow:0 4px 18px rgba(0,0,0,.32); backdrop-filter:blur(8px); animation:hwo-button-in .18s ease-out both;
}
@keyframes hwo-button-in { from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:translateY(0)} }
#hwo-sound-replay:hover { background:rgba(48,24,20,.98); }
#hwo-sound-replay:focus-visible { outline:2px solid #ffb25b; outline-offset:3px; }
@media(max-width:680px) {
  #hwo-overlay .hwo-pumpkin-wrap { width:min(94vw,calc(72vh * 1.012)); left:51%; top:51%; }
  #hwo-overlay .hwo-glow { background:radial-gradient(ellipse at 52% 53%,rgba(255,91,8,.15),transparent 58%); }
  #hwo-overlay .hwo-bolt { width:58vw; height:65vh; right:1vw; }
  #hwo-overlay .hwo-bolt.hwo-bolt-secondary { width:44vw; height:50vh; }
  #hwo-sound-replay { max-width:calc(100vw - 24px); font-size:11px; padding:9px 11px; white-space:normal; }
}
@media(prefers-reduced-motion:reduce) { #hwo-overlay{display:none!important} #hwo-sound-replay{display:none!important} }