/* Halloween Welcome Overlay 2.1 — all effects are transparent overlays. */
#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 *, #hwo-sound-replay { 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;
}
#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;
}

#hwo-overlay .hwo-pumpkin-stage {
  z-index: 4;
  display: grid;
  place-items: center;
  perspective: 1200px;
}
#hwo-overlay .hwo-pumpkin {
  position: absolute;
  display: block;
  width: min(57vw, 790px);
  max-width: none;
  max-height: 90vh;
  height: auto;
  left: 53%;
  top: 51%;
  object-fit: contain;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(.56) rotate(-2deg);
  transform-origin: 50% 54%;
  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;
}
@keyframes hwo-pumpkin-sequence {
  0%   { opacity: 0; transform: translate3d(-50%,-50%,0) scale(.56) rotate(-2deg); filter: brightness(.78) drop-shadow(0 0 8px rgba(255,80,0,.1)); }
  8%   { opacity: .86; transform: translate3d(-50%,-50%,0) scale(.63) rotate(-1deg); filter: brightness(.92) drop-shadow(0 0 22px rgba(255,80,0,.24)); }
  21%  { opacity: .94; transform: translate3d(-50%,-50%,0) scale(.70) rotate(0deg); filter: brightness(1) drop-shadow(0 0 26px rgba(255,91,0,.32)); }
  45%  { opacity: .96; transform: translate3d(-50%,-50%,0) scale(.75) rotate(.35deg); filter: brightness(1.03) drop-shadow(0 0 30px rgba(255,91,0,.38)); }
  64%  { opacity: .98; transform: translate3d(-50%,-50%,0) scale(.84) rotate(-.3deg); filter: brightness(1.08) drop-shadow(0 0 36px rgba(255,100,0,.44)); }
  77%  { opacity: 1; transform: translate3d(-50%,-50%,0) scale(1.02) rotate(.8deg); filter: brightness(1.12) drop-shadow(0 0 46px rgba(255,115,0,.58)); }
  84%  { opacity: 1; transform: translate3d(-50%,-50%,0) scale(1.26) rotate(-1.2deg); filter: brightness(1.18) drop-shadow(0 0 60px rgba(255,145,0,.68)); }
  89%  { opacity: 1; transform: translate3d(-50%,-50%,0) scale(1.43) rotate(1.4deg); filter: brightness(1.28) drop-shadow(0 0 68px rgba(255,160,0,.76)); }
  94%  { opacity: .62; transform: translate3d(-50%,-50%,0) scale(1.57) rotate(-.5deg); filter: brightness(1.34) drop-shadow(0 0 72px rgba(255,175,0,.7)); }
  100% { opacity: 0; transform: translate3d(-50%,-50%,0) scale(1.67) rotate(0deg); filter: brightness(1.15); }
}
/* Subtle pulse/shake while the laugh section of the soundtrack plays. */
#hwo-overlay.hwo-laughing .hwo-pumpkin {
  animation-name: hwo-pumpkin-sequence, hwo-pumpkin-laugh;
  animation-duration: 3.8s, .16s;
  animation-timing-function: cubic-bezier(.18,.68,.19,1), ease-in-out;
  animation-delay: 0s, 1.12s;
  animation-iteration-count: 1, 7;
  animation-fill-mode: both, both;
}
@keyframes hwo-pumpkin-laugh {
  0%,100% { margin-left: 0; }
  25% { margin-left: -3px; }
  75% { margin-left: 3px; }
}

#hwo-overlay .hwo-bat-layer { z-index: 6; overflow: hidden; }
#hwo-overlay .hwo-bat {
  position: absolute;
  left: var(--hwo-start-x);
  top: var(--hwo-start-y);
  width: var(--hwo-size);
  height: auto;
  opacity: 0;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 6px rgba(255, 74, 13, .36));
  will-change: transform, opacity;
  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; }
#hwo-overlay .hwo-wing-left,
#hwo-overlay .hwo-wing-right {
  transform-box: fill-box;
  transform-origin: 50% 48%;
}
#hwo-overlay .hwo-wing-left { transform-origin: 100% 50%; animation: hwo-wing-left .18s ease-in-out infinite alternate; }
#hwo-overlay .hwo-wing-right { transform-origin: 0% 50%; animation: hwo-wing-right .18s 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(18deg) scaleY(.72); } to { transform: rotate(-22deg) scaleY(1.1); } }
@keyframes hwo-wing-right { from { transform: rotate(-18deg) scaleY(.72); } to { transform: rotate(22deg) scaleY(1.1); } }
@keyframes hwo-bat-flight {
  0% { opacity: 0; transform: translate3d(0,0,0) scale(var(--hwo-scale-start)) rotate(var(--hwo-rot-start)); }
  10% { opacity: var(--hwo-peak-opacity, .94); }
  68% { opacity: var(--hwo-peak-opacity, .94); }
  100% { opacity: 0; transform: translate3d(var(--hwo-move-x),var(--hwo-move-y),0) scale(var(--hwo-scale-end)) rotate(var(--hwo-rot-end)); }
}

#hwo-overlay .hwo-lightning { z-index: 8; opacity: 1; }
#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,.62);
  border-radius: 999px;
  padding: 9px 13px;
  background: rgba(18,12,14,.88);
  color: #fff5e8;
  font: 600 12px/1.1 system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,.2);
  backdrop-filter: blur(8px);
}
#hwo-sound-replay:hover { background: rgba(48,24,20,.96); }
#hwo-sound-replay:focus-visible { outline: 2px solid #ffb25b; outline-offset: 3px; }

@media (max-width: 680px) {
  #hwo-overlay .hwo-pumpkin { width: 94vw; max-height: 73vh; 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 { font-size: 11px; padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #hwo-overlay { display: none !important; }
  #hwo-sound-replay { display: none !important; }
}