:root {
  --hw-web-left-width: 72px;
  --hw-web-right-width: 96px;
  --hw-web-small-left-width: 30px;
  --hw-web-small-right-width: 40px;
  --hw-web-large-left-width: 150px;
  --hw-web-large-offset-x: 17px;
  --hw-web-large-offset-y: 15px;
  --hw-web-large-radius: 16px;
  --hw-web-large-opacity: .8;
  --hw-web-large-right-width: 190px;
  --hw-web-head-center-height: 100px;
  --hw-web-head-side-height: 80px;
  --hw-web-head-overlap: 30px;
  --hw-web-head-offset-y: -20px;
  --hw-web-head-opacity: 1;
  --hw-web-opacity: .55;
  --hw-bg-side-width: 266px;
  --hw-bg-tree-width: 266px;
  --hw-bg-tree-opacity: .4;
  --hw-bg-tree-edge: -28px;
  --hw-bg-tree-top: -2%;
  --hw-bg-tree-down-bottom: 15%;
  --hw-bg-tree-down-angle: 44deg;
  --hw-bg-branch-top-left: calc(38% + 10px);
  --hw-bg-branch-top-right: calc(15% + 45px);
  --hw-bg-branch-width: 238px;
}

.hw-web {
  display: none;
  position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: var(--hw-web-opacity);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

html.halloween .hw-web { display: block; }

.hw-web--tl {
  top: 0;
  left: 0;
  width: min(var(--hw-web-left-width), 34%);
  aspect-ratio: 96 / 68;
  background-image: url("img/web-left.webp");
}

.hw-web--br {
  bottom: 0;
  right: 0;
  width: min(var(--hw-web-right-width), 42%);
  aspect-ratio: 160 / 118;
  background-image: url("img/web-right.webp");
}

.hw-web--sm.hw-web--tl { width: min(var(--hw-web-small-left-width), 34%); }
.hw-web--sm.hw-web--br { width: min(var(--hw-web-small-right-width), 42%); }

.hw-web--top {
  top: var(--hw-web-head-offset-y);
  left: 0;
  right: 0;
  height: var(--hw-web-head-center-height);
  z-index: 3;
  opacity: var(--hw-web-head-opacity);
  background-image: url("img/web-head.webp"), url("img/web-head.webp"), url("img/web-head.webp");
  background-repeat: no-repeat;
  background-size:
    auto var(--hw-web-head-center-height),
    auto var(--hw-web-head-side-height),
    auto var(--hw-web-head-side-height);
  background-position:
    50% 0,
    calc(50% - (var(--hw-web-head-center-height) * 1.5 + var(--hw-web-head-side-height) * 1.5 - var(--hw-web-head-overlap))) 0,
    calc(50% + (var(--hw-web-head-center-height) * 1.5 + var(--hw-web-head-side-height) * 1.5 - var(--hw-web-head-overlap))) 0;
}

.hw-web--lg { z-index: 5; }
.hw-web--lg.hw-web--tl {
  top: calc(var(--hw-web-large-offset-y) * -1);
  left: calc(var(--hw-web-large-offset-x) * -1);
  width: min(var(--hw-web-large-left-width), 50%);
  aspect-ratio: 272 / 246;
  opacity: var(--hw-web-large-opacity);
  background-image: url("img/web-full.webp");
  clip-path: inset(var(--hw-web-large-offset-y) 0 0 var(--hw-web-large-offset-x) round var(--hw-web-large-radius) 0 0 0);
}
.hw-web--lg.hw-web--br { width: min(var(--hw-web-large-right-width), 60%); }

.hw-bg {
  display: none;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

html.halloween .hw-bg { display: block; }

.hw-bg__side {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--hw-bg-side-width);
}

.hw-bg__side--left  { left: 0; transform: translateY(10px); }
.hw-bg__side--right { right: 0; }
.hw-bg__side--right .hw-bg__item--tree { top: calc(var(--hw-bg-tree-top) + 15px); }

.hw-bg__item,
.hw-bg__branch {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.hw-bg__item { opacity: var(--hw-bg-tree-opacity); }

.hw-bg__item--tree      { width: var(--hw-bg-tree-width); top: var(--hw-bg-tree-top); }
.hw-bg__item--tree-down { width: var(--hw-bg-tree-width); bottom: var(--hw-bg-tree-down-bottom); }

.hw-bg__side--left  .hw-bg__item--tree-down { bottom: calc(var(--hw-bg-tree-down-bottom) - 10px); transform-origin: 8% 65%;  transform: rotate(var(--hw-bg-tree-down-angle)); }
.hw-bg__side--right .hw-bg__item--tree-down { bottom: calc(var(--hw-bg-tree-down-bottom) - 30px); transform-origin: 95% 65%; transform: rotate(calc(var(--hw-bg-tree-down-angle) * -1)); }

.hw-bg__side--left  .hw-bg__item--tree,
.hw-bg__side--left  .hw-bg__item--tree-down { left: var(--hw-bg-tree-edge); }
.hw-bg__side--right .hw-bg__item--tree,
.hw-bg__side--right .hw-bg__item--tree-down { right: var(--hw-bg-tree-edge); }

.hw-bg__branch { width: var(--hw-bg-branch-width); }
.hw-bg__branch .hw-bg__item { position: relative; width: 100%; opacity: 1; }

.hw-bg__side--left  .hw-bg__branch { left: 0;  top: var(--hw-bg-branch-top-left); }
.hw-bg__side--right .hw-bg__branch { right: 0; top: var(--hw-bg-branch-top-right); }

.hw-bg__glow {
  position: absolute;
  width: 260%;
  aspect-ratio: 1;
  top: -72%;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(255, 122, 24, .34) 0%, rgba(255, 112, 20, .26) 12%, rgba(255, 104, 16, .18) 26%, rgba(255, 96, 10, .11) 40%, rgba(255, 90, 0, .06) 54%, rgba(255, 90, 0, .025) 68%, rgba(255, 90, 0, .008) 84%, transparent 100%);
  animation: hw-glow 5s ease-in-out infinite;
}

.hw-bg__side--left  .hw-bg__glow { left: -120%; }
.hw-bg__side--right .hw-bg__glow { right: -120%; }

@keyframes hw-glow {
  0%, 100% { opacity: .85; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hw-bg__glow { animation: none; }
}

@media (max-width: 1700px) {
  .hw-bg { display: none !important; }
}

:root {
  --hw-pumpkin-size: 110px;
  --hw-pumpkin-right: 24px;
  --hw-pumpkin-bottom: 24px;
}

.hw-pumpkin {
  display: none;
  position: fixed;
  right: var(--hw-pumpkin-right);
  bottom: var(--hw-pumpkin-bottom);
  z-index: 40;
  width: var(--hw-pumpkin-size);
  height: var(--hw-pumpkin-size);
  aspect-ratio: 1;
  padding: 0;
  outline: none;
  border: 0;
  background: none;
  cursor: pointer;
  transform-origin: 50% 90%;
  -webkit-tap-highlight-color: transparent;
}

html.halloween .hw-pumpkin { display: block; }

.hw-pumpkin::before {
  content: "";
  position: absolute;
  inset: 8% 8% 0;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(255, 122, 24, .5), rgba(255, 90, 0, .18) 60%, transparent 100%);
  animation: hw-pumpkin-glow 2.6s ease-in-out infinite;
}

.hw-pumpkin::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -4%;
  height: 8%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .5), transparent);
  animation: hw-pumpkin-shadow 4s ease-in-out infinite;
}

.hw-pumpkin__img {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: 50% 90%;
  animation:
    hw-pumpkin-bob 2s ease-in-out infinite alternate,
    hw-pumpkin-sway 2s ease-in-out infinite alternate,
    hw-pumpkin-squash 2s ease-in-out infinite alternate,
    hw-pumpkin-flicker 3.1s linear infinite;
}

.hw-pumpkin--jump { animation: hw-pumpkin-jump .6s cubic-bezier(.3, .7, .4, 1); }

@keyframes hw-pumpkin-bob {
  from { translate: 0 0; }
  to   { translate: 0 -8px; }
}

@keyframes hw-pumpkin-sway {
  from { rotate: -3deg; }
  to   { rotate: 3deg; }
}

@keyframes hw-pumpkin-squash {
  from { scale: .99 1.015; }
  to   { scale: 1.015 .99; }
}

@keyframes hw-pumpkin-flicker {
  0%, 100% { filter: brightness(1) saturate(1); }
  8%       { filter: brightness(1.18) saturate(1.2); }
  14%      { filter: brightness(.92) saturate(1); }
  22%      { filter: brightness(1.1) saturate(1.1); }
  50%      { filter: brightness(1.05) saturate(1.05); }
  63%      { filter: brightness(1.22) saturate(1.25); }
  70%      { filter: brightness(.95) saturate(1); }
}

@keyframes hw-pumpkin-glow {
  0%, 100% { opacity: .6; transform: scale(.95); }
  50%      { opacity: 1; transform: scale(1.15); }
}

@keyframes hw-pumpkin-shadow {
  0%, 100% { transform: scaleX(1); opacity: .7; }
  50%      { transform: scaleX(.8); opacity: .45; }
}

@keyframes hw-pumpkin-jump {
  0%   { transform: scale(1, 1); }
  18%  { transform: scale(1.12, .84); }
  42%  { transform: translateY(-26px) scale(.93, 1.1) rotate(-6deg); }
  64%  { transform: translateY(0) scale(1.1, .88) rotate(4deg); }
  82%  { transform: scale(.97, 1.04); }
  100% { transform: scale(1, 1); }
}

.hw-toast {
  position: fixed;
  right: var(--hw-pumpkin-right);
  bottom: calc(var(--hw-pumpkin-bottom) + var(--hw-pumpkin-size) + 14px);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  max-width: min(300px, calc(100vw - 24px));
  padding: 14px 18px 17px;
  overflow: hidden;
  border-radius: 16px;
  color: #fff;
  background: #171717;
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45), 0 0 40px rgba(255, 122, 24, .12);
  cursor: pointer;
  animation: hw-toast-in .35s cubic-bezier(.2, .9, .3, 1.2);
}

.hw-toast::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 0 0, rgba(255, 122, 24, .16), transparent 60%);
}

.hw-toast--out {
  opacity: 0;
  transform: translateY(8px) scale(.97);
  transition: opacity .25s, transform .25s;
}


.hw-toast__body { position: relative; min-width: 0; }


.hw-toast__text {
  font-size: 14px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .92);
}



.hw-toast__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #ff7a18, #ffb347);
  animation: hw-toast-bar linear forwards;
}

.hw-toast:hover .hw-toast__bar { animation-play-state: paused; }

@keyframes hw-toast-in {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

@keyframes hw-toast-bar {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hw-pumpkin::before,
  .hw-pumpkin::after,
  .hw-pumpkin__img { animation: none; }
}

@media (max-width: 767px) {
  :root { --hw-pumpkin-size: 76px; --hw-pumpkin-right: 12px; --hw-pumpkin-bottom: 12px; }
}

:root {
  --hw-witch-width: 165px;
}

.hw-witch {
  display: none;
  position: fixed;
  top: var(--hw-witch-top, 20px);
  left: 0;
  z-index: 35;
  width: var(--hw-witch-width);
  pointer-events: none;
  will-change: translate;
}

html.halloween .hw-witch--fly,
html.halloween .hw-witch--crazy {
  display: block;
}

html.halloween .hw-witch--fly {
  animation: hw-witch-fly var(--hw-witch-duration, 14s) linear forwards;
}

.hw-witch__body {
  position: relative;
  animation: hw-witch-arc var(--hw-witch-duration, 14s) ease-in-out forwards;
}

.hw-witch__img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 12px rgba(255, 122, 24, .4));
  transform-origin: 50% 60%;
  animation:
    hw-witch-bob 1.5s ease-in-out infinite alternate,
    hw-witch-tilt 2.4s ease-in-out infinite alternate;
}

.hw-witch__ghost {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: calc(.34 - var(--g) * .08);
  translate: calc(var(--g) * -42px) 0;
  filter: blur(calc(var(--g) * 1.6px)) hue-rotate(calc(var(--g) * -28deg)) brightness(1.5) saturate(1.4);
  animation:
    hw-witch-bob 1.5s ease-in-out infinite alternate calc(var(--g) * -.12s),
    hw-witch-tilt 2.4s ease-in-out infinite alternate calc(var(--g) * -.1s);
}

.hw-witch__img { position: relative; z-index: 1; }

.hw-witch__trail {
  position: absolute;
  left: -420px;
  top: 52%;
  width: 520px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 90, 0, .22) 40%, rgba(255, 140, 40, .5) 80%, rgba(255, 200, 100, .65));
  filter: blur(12px);
  mix-blend-mode: screen;
  transform-origin: 100% 50%;
  animation: hw-witch-trail 1.1s ease-in-out infinite alternate;
}

.hw-witch__trail--alt {
  left: -360px;
  top: 60%;
  width: 440px;
  height: 30px;
  background: linear-gradient(90deg, transparent, rgba(160, 80, 255, .25) 45%, rgba(125, 255, 178, .35) 85%, rgba(200, 255, 220, .5));
  animation-duration: 1.6s;
  animation-direction: alternate-reverse;
}

.hw-witch__spark {
  position: absolute;
  left: 4%;
  top: 70%;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 10px 2px var(--c);
  opacity: 0;
  animation: hw-witch-spark var(--d) ease-out infinite;
  animation-delay: var(--w);
}

.hw-witch__spark--star {
  border-radius: 0;
  width: calc(var(--s) * 2.2);
  height: calc(var(--s) * 2.2);
  box-shadow: none;
  background: #fff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 4px var(--c));
}
@keyframes hw-witch-fly {
  0%   { translate: calc(-1 * var(--hw-witch-width) - 560px) 0; opacity: 0; }
  8%   { opacity: 1; }
  82%  { opacity: 1; }
  100% { translate: calc(100vw + 120px) 0; opacity: 0; }
}

@keyframes hw-witch-arc {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: -26px; }
}

@keyframes hw-witch-bob {
  from { translate: 0 -10px; }
  to   { translate: 0 10px; }
}

@keyframes hw-witch-tilt {
  from { rotate: -3deg; }
  to   { rotate: 3deg; }
}

@keyframes hw-witch-spark {
  0%   { opacity: 0; translate: 0 0; scale: 1; rotate: 0deg; }
  12%  { opacity: 1; }
  100% { opacity: 0; translate: calc(var(--dx) * -1) var(--dy); scale: .2; rotate: 180deg; }
}

@keyframes hw-witch-trail {
  from { opacity: .55; transform: scaleX(.85) skewX(-6deg); }
  to   { opacity: 1; transform: scaleX(1.08) skewX(6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hw-witch { display: none !important; }
}

@media (max-width: 767px) {
  :root { --hw-witch-width: 110px; }
}

.hw-witch--fly .hw-witch__img { pointer-events: auto; cursor: pointer; }
.hw-witch--locked .hw-witch__img { pointer-events: none; cursor: default; }

.hw-witch--crazy { animation: none; translate: none; opacity: 1; }
.hw-witch--crazy .hw-witch__body { animation: none; }
.hw-witch--crazy .hw-witch__img { animation-duration: .18s, .25s; }
.hw-witch--crazy .hw-witch__trail,
.hw-witch--crazy .hw-witch__spark { display: none; }
.hw-witch--gone { opacity: 0; transition: opacity .12s; }

.hw-boom {
  position: fixed;
  z-index: 36;
  width: 0;
  height: 0;
  pointer-events: none;
}

.hw-boom__flash {
  position: absolute;
  width: 360px;
  height: 360px;
  margin: -180px 0 0 -180px;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, #fff 0%, rgba(255, 220, 140, .95) 22%, rgba(255, 122, 24, .6) 50%, transparent 100%);
  animation: hw-boom-flash .7s ease-out forwards;
}

.hw-boom__ring {
  position: absolute;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  border: 3px solid rgba(255, 190, 90, .85);
  box-shadow: 0 0 22px rgba(255, 122, 24, .8), inset 0 0 22px rgba(255, 122, 24, .5);
  opacity: 0;
  animation: hw-boom-ring .9s ease-out forwards;
}

.hw-boom__p {
  position: absolute;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 10px 2px var(--c);
  animation: hw-boom-p var(--d) cubic-bezier(.1, .7, .3, 1) forwards;
}

.hw-boom__p--star {
  width: calc(var(--s) * 2.4);
  height: calc(var(--s) * 2.4);
  margin: calc(var(--s) * -1.2) 0 0 calc(var(--s) * -1.2);
  border-radius: 0;
  box-shadow: none;
  background: #fff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 5px var(--c));
}

@keyframes hw-boom-flash {
  0%   { opacity: 1; transform: scale(.1); }
  35%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.8); }
}

@keyframes hw-boom-ring {
  0%   { opacity: 1; transform: scale(.2); }
  100% { opacity: 0; transform: scale(4.2); }
}

@keyframes hw-boom-p {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1.2); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.2); }
}
.hw-witch__tail {
  position: absolute;
  left: 4%;
  top: 70%;
  width: 0;
  height: 0;
}

.hw-drop {
  position: fixed;
  z-index: 34;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%;
  pointer-events: none;
  background: var(--c);
  box-shadow: 0 0 10px 2px var(--c);
  animation: hw-drop var(--d) ease-out forwards;
}

.hw-drop--glow {
  background: radial-gradient(circle closest-side, var(--c), transparent);
  box-shadow: none;
  filter: blur(6px);
  mix-blend-mode: screen;
  animation-name: hw-drop-glow;
}

.hw-drop--star {
  width: calc(var(--s) * 2.4);
  height: calc(var(--s) * 2.4);
  margin: calc(var(--s) * -1.2) 0 0 calc(var(--s) * -1.2);
  border-radius: 0;
  box-shadow: none;
  background: #fff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 4px var(--c));
}

@keyframes hw-drop {
  0%   { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2) rotate(120deg); }
}

@keyframes hw-drop-glow {
  0%   { opacity: .75; transform: scale(.6); }
  100% { opacity: 0; transform: scale(1.5) translate(var(--dx), calc(var(--dy) * .4)); }
}

html.halloween .hw-witch--swarm {
  display: block;
  top: 0;
  left: 0;
  will-change: transform;
}

.hw-witch--swarm .hw-witch__body { animation: none; }
.hw-witch--swarm .hw-witch__ghost { display: none; }