.navbar .logo-text {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.hw-pumpkin-wrap {
  display: inline-flex;
  flex-shrink: 0;
  width: 2.5rem;
  margin-top: -6px;
  position: relative;
  z-index: 201;
  transform-origin: 50% 90%;
  transition: transform .25s ease;
}
.logo-text:hover .hw-pumpkin-wrap { transform: rotate(-8deg) scale(1.08); }
.hw-pumpkin {
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 45%));
}

@keyframes hw-flicker {
  0%, 100% { opacity: 1; }
  38%      { opacity: .8; }
  40%      { opacity: 1; }
  68%      { opacity: .88; }
}

.hw-corner {
  position: fixed;
  top: 0;
  right: 0;
  width: 190px;
  height: 190px;
  pointer-events: none;
  z-index: -1;
}
.hw-corner > svg { display: block; width: 100%; height: 100%; }

.hw-spider-layer {
  position: fixed;
  top: 0;
  right: 0;
  width: 190px;
  height: 190px;
  pointer-events: none;
  z-index: 5;
}
.hw-spider {
  position: absolute;
  left: 75.53%;
  top: 33.53%;
  width: 0;
  height: 0;
}
.hw-spider__wrap { pointer-events: auto; }
.hw-spider__rig { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.hw-spider__thread {
  position: absolute;
  left: -.5px;
  top: 0;
  width: 1px;
  height: 110px;
  background: linear-gradient(to bottom, rgb(255 255 255 / 10%), rgb(255 255 255 / 45%));
}
.hw-spider__wrap {
  position: absolute;
  left: -22px;
  top: 0;
  width: 44px;
  cursor: pointer;
  transform: translateY(110px);
  -webkit-tap-highlight-color: transparent;
}

.hw-spider.is-auto .hw-spider__thread { animation: hw-crawl-thread 18s ease-in-out infinite; }
.hw-spider.is-auto .hw-spider__wrap { animation: hw-crawl 18s ease-in-out infinite; }

.hw-spider.is-tracking .hw-spider__pupil { animation: none; }
.hw-spider.is-moving .hw-spider__legs-l,
.hw-spider.is-moving .hw-spider__legs-r { animation-duration: .16s; }
.hw-spider__body {
  display: block;
  width: 100%;
  height: auto;
  margin-top: -9px;
  overflow: visible;
  transform-origin: 50% 0;
  filter: drop-shadow(0 0 .6px rgb(255 255 255 / 45%)) drop-shadow(0 4px 6px rgb(0 0 0 / 55%));
  animation: hw-sway 4.5s ease-in-out infinite;
  transition: filter .2s;
}
.hw-spider__wrap:hover .hw-spider__body {
  filter: drop-shadow(0 0 .5px #ff2b2b) drop-shadow(0 0 .5px #ff2b2b) drop-shadow(0 0 5px rgb(255 43 43 / 30%));
}
.hw-spider__legs-l,
.hw-spider__legs-r { transform-origin: 32px 32px; animation: hw-legs .4s ease-in-out infinite alternate; }
.hw-spider__legs-r { animation-direction: alternate-reverse; }
.hw-spider__pupil { animation: hw-look 7s ease-in-out infinite; }
.hw-spider__eyes { transform-origin: 32px 30px; animation: hw-blink 5s infinite; }
.hw-spider__eye { transform-box: fill-box; transform-origin: center; transition: transform .15s; }

.hw-spider__bubble {
  position: absolute;
  right: calc(100% + 6px);
  top: 4px;
  padding: .35rem .6rem;
  border-radius: 10px 10px 2px 10px;
  background: #f4ecdf;
  color: #1b1320;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px) scale(.8);
  transform-origin: right center;
  transition: opacity .15s, transform .15s;
  pointer-events: none;
}

.hw-spider.is-scared .hw-spider__bubble { opacity: 1; transform: none; }
.hw-spider.is-scared .hw-spider__eye { transform: scale(1.25); }
.hw-spider.is-scared .hw-spider__pupil { animation: none; r: 1.6; }
.hw-spider.is-scared .hw-spider__legs-l,
.hw-spider.is-scared .hw-spider__legs-r { animation-duration: .08s; }
.hw-spider.is-scared .hw-spider__body { animation: hw-shiver .1s linear infinite; }
.hw-spider.is-scared .hw-spider__wrap,
.hw-spider.is-scared .hw-spider__thread { animation-play-state: paused; }

.hw-spider.is-fleeing .hw-spider__wrap { animation: hw-flee .8s cubic-bezier(.5, 0, .9, .4) forwards; }
.hw-spider.is-fleeing .hw-spider__thread { animation: hw-flee-thread .8s cubic-bezier(.5, 0, .9, .4) forwards; }
.hw-spider.is-fleeing .hw-spider__body { animation: hw-flip .8s ease-in forwards; }
.hw-spider.is-fleeing .hw-spider__bubble { opacity: 0; }

.hw-spider.is-hidden .hw-spider__wrap,
.hw-spider.is-hidden .hw-spider__thread { animation: none; opacity: 0; height: 0; }

.hw-spider.is-returning .hw-spider__wrap { animation: hw-return 2.5s ease-out forwards; }
.hw-spider.is-returning .hw-spider__thread { animation: hw-return-thread 2.5s ease-out forwards; }

@keyframes hw-crawl-thread {
  0%, 8%    { height: 110px; }
  30%, 42%  { height: 340px; }
  58%, 66%  { height: 200px; }
  80%, 86%  { height: 280px; }
  100%      { height: 110px; }
}
@keyframes hw-crawl {
  0%, 8%    { transform: translateY(110px); }
  30%, 42%  { transform: translateY(340px); }
  58%, 66%  { transform: translateY(200px); }
  80%, 86%  { transform: translateY(280px); }
  100%      { transform: translateY(110px); }
}
@keyframes hw-flee        { from { transform: translateY(var(--from, 110px)); } 70% { opacity: 1; } to { transform: translateY(0); opacity: 0; } }
@keyframes hw-flee-thread { from { height: var(--from, 110px); } to { height: 0; } }
@keyframes hw-return        { from { transform: translateY(-20px); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(110px); } }
@keyframes hw-return-thread { from { height: 0; } to { height: 110px; } }
@keyframes hw-flip   { from { transform: rotate(0); } to { transform: rotate(360deg) scale(.7); } }
@keyframes hw-shiver { 0%, 100% { transform: translateX(-1px) rotate(-3deg); } 50% { transform: translateX(1px) rotate(3deg); } }
@keyframes hw-sway   { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes hw-legs   { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes hw-blink  { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes hw-look {
  0%, 20%   { transform: translate(0, 0); }
  28%, 45%  { transform: translate(-1.6px, .4px); }
  53%, 70%  { transform: translate(1.4px, -.6px); }
  78%, 100% { transform: translate(0, 0); }
}

@media (max-width: 768px) {
  .hw-pumpkin-wrap { width: 1.85rem; margin-top: -4px; }
  .hw-corner { width: 120px; height: 120px; }
  .hw-spider-layer { width: 120px; height: 120px; }
  .hw-spider__wrap { width: 34px; left: -17px; }
}

@media (prefers-reduced-motion: reduce) {
  .hw-pumpkin__face, .hw-pumpkin__glow, .hw-spider *, .hw-spider__body { animation-duration: 0s !important; animation-iteration-count: 1 !important; }
}

.hw-orb,
.hw-orb-layer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 260px;
  height: 260px;
  pointer-events: none;
}
.hw-orb { z-index: -1; }
.hw-orb > svg { display: block; width: 100%; height: 100%; }
.hw-orb-layer { z-index: 150; }

.hw-walker {
  position: absolute;
  left: 0;
  top: 0;
  width: 38px;
  height: 38px;
  offset-distance: 0%;
  offset-rotate: 0deg;
  offset-anchor: 50% 50%;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hw-walker__body {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 .6px rgb(255 255 255 / 45%)) drop-shadow(0 3px 4px rgb(0 0 0 / 55%));
  transition: filter .2s;
}
.hw-walker:hover .hw-walker__body {
  filter: drop-shadow(0 0 .5px #ff2b2b) drop-shadow(0 0 .5px #ff2b2b) drop-shadow(0 0 5px rgb(255 43 43 / 30%));
}
.hw-walker__legs-l,
.hw-walker__legs-r { transform-origin: 32px 32px; }
.hw-walker.is-walking .hw-walker__legs-l { animation: hw-step .25s ease-in-out infinite alternate; }
.hw-walker.is-walking .hw-walker__legs-r { animation: hw-step .25s ease-in-out infinite alternate-reverse; }
.hw-walker.is-walking .hw-walker__body { animation: hw-waddle .5s ease-in-out infinite; }
.hw-walker.is-rush .hw-walker__legs-l,
.hw-walker.is-rush .hw-walker__legs-r { animation-duration: .07s; }

.hw-walker__bubble {
  position: absolute;
  padding: .35rem .6rem;
  border-radius: 10px 10px 10px 2px;
  background: #f4ecdf;
  color: #1b1320;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translate(0, -100%) scale(.8);
  transform-origin: left bottom;
  transition: opacity .15s, transform .15s;
  pointer-events: none;
}
.hw-walker__bubble.is-show { opacity: 1; transform: translate(0, -100%); }

@keyframes hw-step { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes hw-waddle { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

@media (max-width: 1079px) {
  .hw-orb, .hw-orb-layer { display: none; }
}

.navbar { position: relative; }

.hw-bat {
  position: absolute;
  top: 100%;
  left: 46%;
  width: 0;
  height: 0;
  z-index: 20;
}
.hw-bat__fig {
  position: absolute;
  left: -36px;
  top: -10px;
  width: 72px;
  cursor: pointer;
  transform: rotate(180deg);
  -webkit-tap-highlight-color: transparent;
}
.hw-bat__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform-origin: 50% 80%;
  filter: drop-shadow(0 0 .6px rgb(255 255 255 / 45%)) drop-shadow(0 4px 5px rgb(0 0 0 / 50%));
  animation: hw-bat-sway 5s ease-in-out infinite;
  transition: filter .2s;
}
.hw-bat__fig:hover .hw-bat__svg {
  filter: drop-shadow(0 0 .5px #ff2b2b) drop-shadow(0 0 .5px #ff2b2b) drop-shadow(0 0 5px rgb(255 43 43 / 30%));
}
.hw-bat__open { display: none; }
.hw-bat__eyes { transform-origin: 50px 20px; animation: hw-blink-long 6s infinite; }
.hw-bat__wl { transform-origin: 42px 30px; }
.hw-bat__wr { transform-origin: 58px 30px; }

.hw-bat__bubble {
  position: absolute;
  left: 26px;
  top: 18px;
  padding: .35rem .6rem;
  border-radius: 2px 10px 10px 10px;
  background: #f4ecdf;
  color: #1b1320;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: scale(.8);
  transform-origin: left top;
  transition: opacity .15s, transform .15s;
  pointer-events: none;
}

.hw-bat.is-awake.is-talk .hw-bat__bubble { opacity: 1; transform: none; }
.hw-bat.is-awake .hw-bat__eyes { animation: none; transform: scale(1.15); }
.hw-bat.is-awake .hw-bat__svg { animation: hw-shiver .1s linear infinite; }

.hw-bat.is-flying .hw-bat__open,
.hw-bat.is-returning .hw-bat__open { display: inline; }
.hw-bat.is-flying .hw-bat__folded,
.hw-bat.is-returning .hw-bat__folded { display: none; }
.hw-bat.is-flying .hw-bat__wl,
.hw-bat.is-returning .hw-bat__wl { animation: hw-flap-l .14s ease-in-out infinite alternate; }
.hw-bat.is-flying .hw-bat__wr,
.hw-bat.is-returning .hw-bat__wr { animation: hw-flap-r .14s ease-in-out infinite alternate; }
.hw-bat.is-flying .hw-bat__svg,
.hw-bat.is-returning .hw-bat__svg { animation: none; }
.hw-bat.is-flying .hw-bat__fig { animation: hw-bat-fly 2.2s ease-in forwards; pointer-events: none; }
.hw-bat.is-returning .hw-bat__fig { animation: hw-bat-fly 2.2s ease-out reverse forwards; pointer-events: none; }
.hw-bat.is-gone .hw-bat__fig { opacity: 0; pointer-events: none; }

@keyframes hw-bat-fly {
  0%   { transform: translate(0, 0) rotate(180deg); opacity: 1; }
  15%  { transform: translate(-10px, 26px) rotate(0deg); opacity: 1; }
  45%  { transform: translate(18vw, 6vh) rotate(-6deg); opacity: 1; }
  100% { transform: translate(55vw, -30vh) rotate(-14deg) scale(.6); opacity: 0; }
}
@keyframes hw-flap-l { from { transform: rotate(-22deg); } to { transform: rotate(16deg) scaleY(.75); } }
@keyframes hw-flap-r { from { transform: rotate(22deg); } to { transform: rotate(-16deg) scaleY(.75); } }
@keyframes hw-bat-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes hw-blink-long { 0%, 90%, 100% { transform: scaleY(1); } 93%, 95% { transform: scaleY(.1); } }

.hw-ghosts {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 160;
}
.hw-ghost {
  position: absolute;
  left: 0;
  top: var(--y, 40vh);
  width: 64px;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  animation: hw-ghost-x var(--d, 20s) linear forwards;
  -webkit-tap-highlight-color: transparent;
}
.hw-ghost.rtl { animation-name: hw-ghost-x-rtl; }
.hw-ghost__bob { position: relative; animation: hw-ghost-bob 3.2s ease-in-out infinite alternate; }
.hw-ghost__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  opacity: .88;
  filter: drop-shadow(0 0 10px rgb(220 210 255 / 35%));
  transform: rotate(6deg);
  transition: transform .3s;
}
.hw-ghost.rtl .hw-ghost__svg { transform: rotate(-6deg); }
.hw-ghost__sheet { transform-origin: 40px 40px; animation: hw-ghost-tail 1.6s ease-in-out infinite alternate; }
.hw-ghost__bubble {
  position: absolute;
  left: 50%;
  bottom: 100%;
  padding: .35rem .6rem;
  border-radius: 10px;
  background: #f4ecdf;
  color: #1b1320;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 6px) scale(.8);
  transition: opacity .15s, transform .15s;
  pointer-events: none;
}
.hw-ghost.is-poof { animation-play-state: paused; }
.hw-ghost.is-poof .hw-ghost__bubble { opacity: 1; transform: translate(-50%, -4px); }
.hw-ghost.is-poof .hw-ghost__mouth { transform: scale(1.5); transform-box: fill-box; transform-origin: center; }
.hw-ghost.is-poof .hw-ghost__svg { animation: hw-ghost-poof 1.2s ease-in forwards; }

@keyframes hw-ghost-x {
  0%   { transform: translateX(-90px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(calc(100vw + 90px)); opacity: 0; }
}
@keyframes hw-ghost-x-rtl {
  0%   { transform: translateX(calc(100vw + 90px)); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(-90px); opacity: 0; }
}
@keyframes hw-ghost-bob  { from { transform: translateY(-14px); } to { transform: translateY(14px); } }
@keyframes hw-ghost-tail { from { transform: skewX(-4deg); } to { transform: skewX(4deg); } }
@keyframes hw-ghost-poof {
  0%, 45% { transform: scale(1); opacity: .88; filter: drop-shadow(0 0 10px rgb(220 210 255 / 35%)); }
  100%    { transform: scale(1.5) translateY(-10px); opacity: 0; filter: blur(4px); }
}

@media (max-width: 768px) {
  .hw-bat__fig { width: 54px; left: -27px; top: -8px; }
  .hw-ghost { width: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-bat__svg, .hw-bat__eyes { animation: none !important; }
}