html.halloween {
  --bg-0: #0b0810;
  --bg-alt: #08060b;
  --bg-1: #140e1a;
  --bg-2: #1d1424;
  --bg-glass: rgba(24, 14, 28, .55);
  --bg-glass-2: rgba(16, 9, 20, .42);

  --scene-base: #0d0910;
  --scene-navy: #1c1026;
  --scene-violet: rgba(150, 70, 255, .20);
  --scene-cyan: rgba(255, 118, 26, .15);
  --scene-cobalt: rgba(255, 80, 20, .12);

  --glass: rgba(24, 14, 28, .55);
  --glass-strong: rgba(19, 11, 23, .78);
  --glass-veil: rgba(12, 7, 15, .64);

  --cyan: #FF8A1E;
  --cyan-hi: #FFB766;
  --cobalt: #FF5E1A;
  --blue-deep: #B5300B;
  --violet: #9B4DFF;
  --cyan-08: rgba(255, 138, 30, .08);
  --cyan-12: rgba(255, 138, 30, .12);
  --cyan-26: rgba(255, 138, 30, .26);
  --cobalt-10: rgba(255, 94, 26, .10);
  --cobalt-16: rgba(255, 94, 26, .16);
  --cobalt-35: rgba(255, 94, 26, .35);
  --cobalt-55: rgba(255, 94, 26, .55);

  --grad: linear-gradient(135deg, #FF5E1A 0%, #FF8A1E 50%, #B5300B 100%);
  --grad-forge: linear-gradient(102deg, #FFB766 0%, #FF8A1E 46%, #FF5E1A 100%);
  --grad-flame: linear-gradient(102deg, #FFB766 0%, #FF8A1E 46%, #E2420E 100%);
  --grad-spectre: linear-gradient(96deg, #FFC46B 0%, #FF7A1A 45%, #A44DFF 100%);

  --shadow-halo: 0 12px 32px -10px rgba(255, 94, 26, .7), inset 0 0 0 1px rgba(255, 255, 255, .14);
  --shadow-glow: 0 0 10px #FF8A1E;
  --shadow-card: 0 30px 80px -30px rgba(0, 0, 0, .7), 0 0 60px -20px rgba(255, 94, 26, .25);
  --focus-ring: 0 0 0 3px rgba(255, 94, 26, .18);
  --grad-island: linear-gradient(160deg, #FFE2B8 0%, #FFB566 52%, #F07A2A 100%);
}

html.halloween .hero-poster img { filter: hue-rotate(168deg) saturate(1.35) brightness(.92) contrast(1.05) }
html.halloween .btn-primary, html.halloween button.submit { background: linear-gradient(180deg, #FFC070 0%, #FF7A1A 100%); color: #1d0a02 }
html.halloween .btn-primary:hover { box-shadow: 0 14px 36px -12px rgba(255, 106, 20, .8), inset 0 0 0 1px rgba(255, 255, 255, .25) }
html.halloween ::selection { background: rgba(255, 122, 26, .4); color: #fff }

.hw-sky { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden }
.hw-bat {
  position: absolute; top: var(--y); left: 0; width: 64px; height: 28px;
  transform: scale(var(--s)); opacity: .82;
  animation: hw-fly var(--dur) linear var(--delay) infinite;
}
.hw-bat svg { width: 100%; height: 100%; overflow: visible; fill: #120a12; filter: drop-shadow(0 0 6px rgba(255, 110, 30, .35)) }
.hw-wing { transform-origin: 32px 13px; animation: hw-flap var(--flap) ease-in-out infinite alternate }
.hw-bat--rev { animation-name: hw-fly-rev }
@keyframes hw-flap { from { transform: scaleY(1) } to { transform: scaleY(-.35) } }
@keyframes hw-fly {
  0% { transform: translate(-10vw, 0) scale(var(--s)) }
  25% { transform: translate(22vw, -4vh) scale(var(--s)) }
  50% { transform: translate(52vw, 3vh) scale(var(--s)) }
  75% { transform: translate(80vw, -3vh) scale(var(--s)) }
  100% { transform: translate(112vw, 1vh) scale(var(--s)) }
}
@keyframes hw-fly-rev {
  0% { transform: translate(112vw, 0) scale(calc(var(--s) * -1), var(--s)) }
  33% { transform: translate(70vw, 4vh) scale(calc(var(--s) * -1), var(--s)) }
  66% { transform: translate(30vw, -3vh) scale(calc(var(--s) * -1), var(--s)) }
  100% { transform: translate(-12vw, 2vh) scale(calc(var(--s) * -1), var(--s)) }
}

.hw-moon {
  position: absolute; z-index: 0; pointer-events: none;
  top: clamp(70px, 12vh, 140px); right: clamp(4%, 9vw, 14%);
  width: clamp(110px, 13vw, 190px); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 35%, rgba(196, 120, 40, .25) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 60%, rgba(196, 120, 40, .22) 0 12%, transparent 13%),
    radial-gradient(circle at 55% 28%, rgba(196, 120, 40, .18) 0 6%, transparent 7%),
    radial-gradient(circle at 40% 40%, #FFE7B0 0%, #FFC266 55%, #F08A2A 100%);
  box-shadow: 0 0 60px 10px rgba(255, 160, 60, .35), 0 0 180px 60px rgba(255, 110, 30, .16);
  opacity: .9;
}

.hw-web { position: absolute; top: 0; z-index: 2; width: clamp(130px, 16vw, 230px); color: rgba(255, 236, 220, .16); pointer-events: none }
.hw-web svg { width: 100%; height: auto; display: block }
.hw-web--l { left: 0; top: var(--nav-h, 72px) }
.hw-web--r { right: 0; top: var(--nav-h, 72px); transform: scaleX(-1) }

.hw-spider { position: absolute; z-index: 2; top: var(--nav-h, 72px); left: 46%; width: 34px; pointer-events: none; transform-origin: 50% 0; animation: hw-drop 7s ease-in-out infinite }
.hw-spider i { display: block; width: 1px; height: 120px; margin: 0 auto; background: linear-gradient(rgba(255, 236, 220, .05), rgba(255, 236, 220, .35)) }
.hw-spider svg { display: block; width: 34px; height: 34px; margin-top: -4px; filter: drop-shadow(0 0 8px rgba(255, 120, 40, .45)) }
@keyframes hw-drop {
  0%, 100% { transform: translateY(-70px) rotate(0) }
  45% { transform: translateY(10px) rotate(4deg) }
  60% { transform: translateY(2px) rotate(-3deg) }
}

.hw-fog { position: absolute; left: -20%; right: -20%; bottom: 0; z-index: 2; height: 34%; pointer-events: none; filter: blur(18px) }
.hw-fog--a { background: radial-gradient(40% 60% at 25% 90%, rgba(170, 120, 210, .16), transparent 70%), radial-gradient(35% 55% at 70% 95%, rgba(200, 160, 230, .12), transparent 70%); animation: hw-fog 28s ease-in-out infinite alternate }
.hw-fog--b { background: radial-gradient(45% 50% at 55% 100%, rgba(255, 140, 60, .10), transparent 70%), radial-gradient(30% 50% at 10% 100%, rgba(190, 150, 230, .12), transparent 70%); animation: hw-fog 36s ease-in-out infinite alternate-reverse }
@keyframes hw-fog { from { transform: translateX(-6%) } to { transform: translateX(6%) } }

.hw-embers { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden }
.hw-embers i {
  position: absolute; bottom: -10px; width: var(--sz); height: var(--sz); border-radius: 50%;
  background: #FFB34D; box-shadow: 0 0 8px 2px rgba(255, 120, 30, .7);
  animation: hw-ember var(--dur) linear var(--delay) infinite; opacity: 0;
}
@keyframes hw-ember {
  0% { transform: translate(0, 0); opacity: 0 }
  12% { opacity: .9 }
  80% { opacity: .5 }
  100% { transform: translate(var(--dx), -85vh); opacity: 0 }
}

.hw-patch { position: absolute; z-index: 3; display: flex; align-items: flex-end; gap: 6px; pointer-events: none }
.hw-patch--hero { right: clamp(16px, 4vw, 60px); bottom: clamp(70px, 11vh, 120px) }
.hw-patch--sec { bottom: 18px; z-index: 1 }
.hw-patch--sec.hw-patch--r { right: clamp(14px, 3vw, 40px) }
.hw-patch--sec.hw-patch--l { left: clamp(14px, 3vw, 40px) }
.hw-patch--foot { position: absolute; right: 24px; bottom: 12px; opacity: .85 }
.hw-patch--fixed { position: fixed; right: 18px; bottom: 14px; z-index: 2 }
.hw-pk { display: block; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)) drop-shadow(0 0 22px rgba(255, 120, 30, .25)) }
.hw-pk svg { display: block; width: 100%; height: auto }
.hw-face { animation: hw-flicker 3.2s steps(1) infinite; filter: drop-shadow(0 0 4px #FFC233) }
.hw-pk:nth-child(1) .hw-face { animation-delay: -1.1s }
.hw-pk:nth-child(3) .hw-face { animation-delay: -2.3s }
@keyframes hw-flicker {
  0%, 100% { opacity: 1 } 8% { opacity: .55 } 10% { opacity: 1 } 46% { opacity: .8 } 48% { opacity: 1 } 71% { opacity: .6 } 73% { opacity: 1 }
}

.hw-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  padding: 5px 14px 5px 6px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: #FFD9A8; background: rgba(255, 110, 30, .10);
  border: 1px solid rgba(255, 140, 50, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 24px -6px rgba(255, 110, 30, .55);
}
.hw-badge-pk { width: 22px; display: block }
.hw-badge-pk svg { width: 100%; height: auto; display: block }


footer { position: relative }
.hw-web--sec { top: 0 !important; width: clamp(110px, 12vw, 180px); z-index: 0; color: rgba(255, 236, 220, .11) }
.hw-fog--soft { height: 26%; opacity: .7; z-index: 0 }
.hw-spider--sec { z-index: 1; top: 0 }
.hw-spider--sec.hw-spider--l { left: clamp(40px, 8vw, 120px) }
.hw-spider--sec.hw-spider--r { left: auto; right: clamp(40px, 8vw, 120px) }

.hw-ghost { position: absolute; z-index: 1; width: clamp(46px, 5vw, 70px); pointer-events: none; opacity: .5;
  filter: drop-shadow(0 0 18px rgba(200, 170, 255, .45)); animation: hw-ghost 9s ease-in-out infinite }
.hw-ghost svg { display: block; width: 100%; height: auto }
.hw-ghost--r { right: clamp(20px, 6vw, 90px); top: 22% }
.hw-ghost--l { left: clamp(20px, 6vw, 90px); top: 22% }
.hw-ghost--fixed { position: fixed; left: clamp(14px, 4vw, 60px); bottom: 18%; z-index: 2 }
@keyframes hw-ghost {
  0%, 100% { transform: translate(0, 0) rotate(-3deg); opacity: .35 }
  50% { transform: translate(14px, -22px) rotate(4deg); opacity: .65 }
}

.hw-web--fixed { position: fixed; z-index: 2; width: clamp(110px, 12vw, 190px); top: 0 !important }
.hw-moon--fixed { position: fixed; top: clamp(80px, 12vh, 130px); right: clamp(4%, 8vw, 12%); width: clamp(90px, 10vw, 150px); z-index: 0 }
.hw-moon--panel { position: absolute; top: 90px; right: 6%; width: 120px; opacity: .55 }
.hw-spider--fixed { position: fixed; top: 0; left: auto; right: 18%; z-index: 2 }
.hw-fog--fixed { position: fixed; height: 30vh; z-index: 0 }
.hw-ember-layer { position: fixed; inset: 0; z-index: 1; pointer-events: none }
.hw-ember-layer .hw-embers { position: absolute; inset: 0 }

html.hw-panel .hw-web--fixed { opacity: .6; width: clamp(80px, 9vw, 130px) }
html.hw-panel .hw-fog--fixed { opacity: .55 }
html.hw-panel .hw-sky { z-index: 1 }
html.hw-panel .hw-ember-layer { z-index: 0 }
html.hw-legal .hw-badge, html.hw-login .hw-badge { margin-bottom: 14px }
html.hw-login .hw-badge { align-self: center }

@media (max-width: 1024px) {
  .hw-patch--hero { right: 14px; bottom: auto; top: calc(var(--nav-h, 72px) + 14px); transform: scale(.62); transform-origin: top right }
  .hw-moon { top: calc(var(--nav-h, 72px) + 10px); right: auto; left: 52%; width: 84px }
  .hw-web { width: 110px }
  .hw-spider { left: auto; right: 34%; }
}
@media (max-width: 640px) {
  .hw-web--r, .hw-spider, .hw-ghost--fixed, .hw-moon--fixed { display: none }
  .hw-patch--fixed, .hw-patch--sec { transform: scale(.7); transform-origin: bottom right }
  .hw-bat:nth-child(n+5) { display: none }
}
@media (prefers-reduced-motion: reduce) {
  .hw-bat, .hw-wing, .hw-spider, .hw-fog, .hw-face, .hw-ghost { animation: none }
  .hw-bat { transform: translateX(calc(var(--s) * 60vw)) scale(var(--s)) }
  .hw-embers { display: none }
}