:root {
  --hw-orange: #ff7a1a;
  --hw-ember: #ffc861;
  --hw-glow: rgba(255, 122, 26, 0.42);
  --z-promo: calc(var(--z-curtain) - 2);
  --accent: var(--hw-orange);
  --accent-soft: rgba(255, 122, 26, 0.45);
  --bg-2: #120d10;
  --bg-3: #1b1417;
}
html { scrollbar-color: var(--hw-orange) #0a0706; }

.promo {
  position: fixed; inset: 0; z-index: var(--z-promo);
  display: grid; place-items: center;
  padding: 16px;
}
.promo[hidden] { display: none; }
.promo__backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 60%, rgba(70, 26, 0, 0.5), rgba(0, 0, 0, 0.9) 72%);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.promo__dialog {
  position: relative; display: grid; justify-items: center; gap: 14px;
  width: min(calc(100vw - 32px), calc((100vh - 120px) * 2 / 3), 540px);
  width: min(calc(100vw - 32px), calc((100dvh - 120px) * 2 / 3), 540px);
  opacity: 0; transform: translateY(28px) scale(0.94);
  transition: opacity 0.5s var(--ease), transform 0.8s var(--ease);
}
.promo.is-open .promo__backdrop,
.promo.is-open .promo__dialog { opacity: 1; }
.promo.is-open .promo__dialog { transform: none; }
.promo__frame {
  position: relative; display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255, 122, 26, 0.38);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 60px var(--hw-glow);
  animation: hw-glow 3.2s ease-in-out infinite alternate;
}
.promo__frame img { width: 100%; height: 100%; object-fit: cover; }
.promo__close {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 1.2rem;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.5s var(--ease);
}
@media (hover: hover) { .promo__close:hover { background: var(--hw-orange); border-color: var(--hw-orange); color: #000; transform: rotate(90deg); } }
.promo__actions { display: flex; gap: 10px; width: 100%; }
.promo__actions .btn { flex: 1 1 0; min-width: 0; }
@media (max-width: 379px) {
  .promo__dialog {
    width: min(calc(100vw - 32px), calc((100vh - 180px) * 2 / 3));
    width: min(calc(100vw - 32px), calc((100dvh - 180px) * 2 / 3));
    gap: 10px;
  }
  .promo__actions { flex-direction: column; gap: 8px; }
  .promo__actions .btn { flex: none; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .promo__dialog { width: auto; grid-template-columns: auto 210px; align-items: end; gap: 16px; }
  .promo__frame {
    width: calc((100vh - 32px) * 2 / 3);
    width: calc((100dvh - 32px) * 2 / 3);
  }
  .promo__actions { flex-direction: column; gap: 8px; }
  .promo__actions .btn { flex: none; }
  .promo__close { right: calc(210px + 16px + 10px); }
}
.btn--hw { --btn-line: var(--hw-orange); --btn-fill: var(--hw-orange); --btn-fg: #0a0a0b; --btn-hover-fill: #000; }
@keyframes hw-glow { to { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 90px rgba(255, 122, 26, 0.6); } }

.promo-chip {
  display: flex; width: fit-content; align-items: center; gap: 12px;
  margin-top: 14px; padding: 6px 18px 6px 6px;
  border: 1px solid rgba(255, 122, 26, 0.45); border-radius: var(--pill);
  background: rgba(255, 122, 26, 0.08);
  font-family: var(--font-display); font-stretch: 118%; font-weight: 500;
  font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.hero .promo-chip { width: min(100%, 440px); justify-content: center; }
@media (max-width: 379px) {
  .hero__cta { padding: 0 18px; gap: 10px; letter-spacing: 0.14em; }
  .promo-chip { gap: 8px; letter-spacing: 0.08em; font-size: 0.56rem; white-space: nowrap; padding-right: 14px; }
  .promo-chip .ph { display: none; }
}
.promo-chip__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 122, 26, 0.16); }
.promo-chip__icon svg { width: 22px; height: auto; filter: drop-shadow(0 0 6px var(--hw-glow)); }
.promo-chip strong { color: var(--hw-orange); font-weight: 600; }
.promo-chip .ph { font-size: 0.95rem; transition: transform 0.5s var(--ease); }
@media (hover: hover) {
  .promo-chip:hover { background: rgba(255, 122, 26, 0.18); border-color: var(--hw-orange); }
  .promo-chip:hover .ph { transform: translateX(4px); }
}

.accent { color: var(--hw-orange); }
.label { color: var(--hw-orange); }
.label::before { background: rgba(255, 122, 26, 0.5); }
::selection { background: var(--hw-orange); color: #0a0a0b; }

.member__ring {
  --tube: var(--hw-orange);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 110, 20, 0.2), rgba(255, 110, 20, 0) 60%),
    radial-gradient(circle at 50% 35%, #1a120c 0%, #0a0705 72%);
  border-color: rgba(255, 214, 170, 0.9);
  box-shadow:
    0 0 4px rgba(255, 255, 255, 0.55),
    0 0 14px var(--tube),
    0 0 34px rgba(255, 122, 26, 0.75),
    0 0 90px rgba(255, 122, 26, 0.38),
    inset 0 0 12px rgba(255, 122, 26, 0.7),
    inset 0 0 46px rgba(255, 122, 26, 0.22);
}
.glow-name {
  --glow: var(--hw-orange);
  color: #ffe2c6;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.6),
    0 0 12px var(--glow),
    0 0 28px var(--glow),
    0 0 60px rgba(255, 122, 26, 0.7),
    0 0 110px rgba(255, 122, 26, 0.45);
}
.member__link:hover .member__ring,
.member__link:focus-visible .member__ring {
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.75),
    0 0 18px var(--tube),
    0 0 44px rgba(255, 122, 26, 0.9),
    0 0 130px rgba(255, 122, 26, 0.5),
    inset 0 0 16px rgba(255, 122, 26, 0.85),
    inset 0 0 60px rgba(255, 122, 26, 0.3);
}
.member__link:hover .glow-name,
.member__link:focus-visible .glow-name {
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.8), 0 0 16px var(--glow), 0 0 36px var(--glow), 0 0 80px var(--glow), 0 0 140px rgba(255, 122, 26, 0.6);
}

.hw-ember {
  position: fixed; inset: auto 0 0 0; height: 34vh; z-index: calc(var(--z-nav) - 6);
  pointer-events: none;
  background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(255, 110, 20, 0.09), transparent 70%);
  animation: hw-ember 5s ease-in-out infinite alternate;
}
@keyframes hw-ember { to { opacity: 0.55; } }

.hw-ticker {
  position: relative; z-index: 1;
  display: block; overflow: hidden;
  background: var(--hw-orange); color: #0a0a0b;
  border-block: 1px solid #000;
  padding: 15px 0;
}
.hw-ticker__track {
  display: flex; align-items: center; gap: 28px; width: max-content;
  font-family: var(--font-display); font-stretch: 118%; font-weight: 600;
  font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap;
  animation: hw-marquee 60s linear infinite;
}
.hw-ticker__track svg { width: 44px; height: auto; flex: none; fill: #0a0a0b; }
@media (hover: hover) { .hw-ticker:hover .hw-ticker__track { animation-play-state: paused; } }
@keyframes hw-marquee { to { transform: translateX(-50%); } }

.section-deco { position: absolute; top: 0; z-index: 0; pointer-events: none; width: clamp(96px, 11vw, 170px); }
.section-deco--right { right: 0; }
.footer .section-deco { width: clamp(72px, 7vw, 110px); }
.section-deco--left { left: 0; }
.section-deco__web { display: block; width: 100%; height: auto; fill: none; stroke: rgba(242, 242, 242, 0.13); stroke-width: 0.8; }
.section-deco--left .section-deco__web { transform: scaleX(-1); }
.section-deco__spider {
  position: absolute; top: 0; width: 18px;
  --len: 90px;
  transform: translateY(var(--len));
  animation: hw-dangle 4.5s ease-in-out infinite alternate;
}
.section-deco--right .section-deco__spider { right: 38%; }
.section-deco--left .section-deco__spider { left: 38%; }
.section-deco__spider .spooky__thread { height: 600px; }
.section-deco__spider svg { display: block; width: 100%; height: auto; overflow: visible; }
.section-deco__spider svg path { fill: none; stroke: rgba(242, 242, 242, 0.55); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.section-deco__spider svg ellipse,
.section-deco__spider svg circle:not(.spooky__eye) { fill: #141414; stroke: rgba(242, 242, 242, 0.5); stroke-width: 0.8; }
.section-deco { overflow: hidden; height: calc(var(--len, 90px) + 220px); }
@keyframes hw-dangle { to { transform: translateY(calc(var(--len) + 28px)) rotate(5deg); } }

.footer-hw {
  position: relative;
  margin-top: clamp(48px, 6vw, 80px);
  background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(255, 110, 20, 0.34), transparent 72%);
}
.footer-hw + .footer__bottom { margin-top: 0; }
.footer-hw .hw-grave { height: clamp(80px, 10vw, 140px); margin-top: -8px; }
.footer-hw__sign {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  font-family: var(--font-display); font-stretch: 118%; font-weight: 500;
  font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--hw-orange);
  text-shadow: 0 0 18px var(--hw-glow);
}
.footer-hw__pumpkin { width: 34px; filter: drop-shadow(0 0 12px var(--hw-glow)); }
.footer-hw__pumpkin svg { display: block; width: 100%; height: auto; }

.curtain-bats { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.curtain-bats__bat { position: absolute; left: 0; top: 30%; width: 72px; opacity: 0; animation: hw-cross 2.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.15s forwards; }
.curtain-bats__bat:nth-child(2) { top: 62%; width: 54px; animation-delay: 0.45s; animation-direction: reverse; }
.curtain-bats__bat:nth-child(3) { top: 18%; width: 44px; animation-delay: 0.8s; }
.curtain-bats__bat:nth-child(4) { top: 74%; width: 84px; animation-delay: 1.1s; }
.curtain-bats__bat:nth-child(5) { top: 24%; width: 60px; animation-delay: 1.4s; animation-direction: reverse; }
.curtain-bats__bat:nth-child(6) { top: 38%; width: 38px; animation-delay: 1.75s; }
.curtain-bats__bat .bat__wing { animation-duration: 0.2s; }
.curtain-bats__bat svg { display: block; width: 100%; height: auto; overflow: visible; fill: #0a0a0a; filter: drop-shadow(0 0 6px rgba(255, 122, 26, 0.8)); }
@keyframes hw-cross {
  0% { transform: translate(-10vw, 0); opacity: 1; }
  50% { transform: translate(50vw, -8vh); }
  100% { transform: translate(112vw, 4vh); opacity: 1; }
}

.spooky-host { position: relative; isolation: isolate; }
.spooky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.spooky__web {
  position: absolute; top: 0; right: 0;
  width: clamp(150px, 20vw, 300px); height: auto;
  fill: none; stroke: rgba(242, 242, 242, 0.16); stroke-width: 0.7;
}
.spooky__spider {
  position: absolute; top: 0; right: 24%;
  width: 26px;
  animation: hw-drop 7s ease-in-out infinite alternate;
}
.spooky__spider svg { display: block; width: 100%; height: auto; overflow: visible; }
.spooky__spider svg path { fill: none; stroke: rgba(242, 242, 242, 0.55); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.spooky__spider svg ellipse,
.spooky__spider svg circle:not(.spooky__eye) { fill: #141414; stroke: rgba(242, 242, 242, 0.5); stroke-width: 0.8; }
.spooky__eye { fill: var(--hw-orange); filter: drop-shadow(0 0 2px var(--hw-orange)); }
.spooky__thread { position: absolute; bottom: calc(100% - 6px); left: 50%; width: 1px; height: 100vh; background: rgba(242, 242, 242, 0.28); }
@keyframes hw-drop {
  0%, 18% { transform: translateY(110px); }
  60% { transform: translateY(210px) rotate(4deg); }
  100% { transform: translateY(170px) rotate(-3deg); }
}

.spooky__bat {
  position: absolute; left: 0; top: var(--y);
  width: calc(44px * var(--s));
  opacity: 0;
  animation: hw-fly var(--dur) linear var(--delay) infinite both;
}
.spooky__bat.is-back { animation-name: hw-fly-back; }
.scroll-bat {
  position: fixed; left: 0; top: 0; z-index: calc(var(--z-nav) - 5);
  width: calc(48px * var(--s));
  pointer-events: none;
  will-change: transform;
}
.scroll-bat svg { animation: hw-bob 0.9s ease-in-out infinite alternate; }
.scroll-bat .bat__wing { animation-duration: 0.18s; }
.spooky__bat svg,
.scroll-bat svg,
.bat-swarm__bat svg {
  display: block; width: 100%; height: auto; overflow: visible;
  fill: #0a0a0a; filter: drop-shadow(0 0 5px rgba(255, 122, 26, 0.65));
}
.spooky__bat svg { animation: hw-bob 1.3s ease-in-out infinite alternate; }
.bat__wing { transform-box: fill-box; transform-origin: 50% 20%; animation: hw-flap 0.24s ease-in-out infinite alternate; }
@keyframes hw-flap { to { transform: scaleY(0.3); } }
@keyframes hw-bob { from { transform: translateY(-7px); } to { transform: translateY(7px); } }
@keyframes hw-fly {
  0% { transform: translateX(-12vw); opacity: 0; }
  2% { opacity: 1; }
  12% { transform: translate(28vw, -5vh); }
  24% { transform: translate(66vw, 4vh); }
  36% { transform: translate(112vw, -7vh); opacity: 1; }
  37%, 100% { transform: translate(112vw, -7vh); opacity: 0; }
}
@keyframes hw-fly-back {
  0% { transform: translateX(112vw); opacity: 0; }
  2% { opacity: 1; }
  12% { transform: translate(70vw, 5vh); }
  24% { transform: translate(34vw, -4vh); }
  36% { transform: translate(-12vw, 6vh); opacity: 1; }
  37%, 100% { transform: translate(-12vw, 6vh); opacity: 0; }
}

.spooky__fog {
  position: absolute; left: -40%; right: -40%; bottom: -12%; height: 46%;
  background:
    radial-gradient(ellipse 22% 50% at 18% 72%, rgba(255, 140, 60, 0.1), transparent 70%),
    radial-gradient(ellipse 28% 46% at 52% 82%, rgba(210, 210, 220, 0.07), transparent 70%),
    radial-gradient(ellipse 20% 42% at 84% 66%, rgba(255, 122, 26, 0.08), transparent 70%);
  filter: blur(18px);
  animation: hw-drift 26s ease-in-out infinite alternate;
}
.spooky__fog--back { bottom: -4%; opacity: 0.8; animation-duration: 34s; animation-direction: alternate-reverse; }
@keyframes hw-drift { from { transform: translateX(-12%); } to { transform: translateX(12%); } }

.pumpkins { position: absolute; inset: auto 0 0 0; z-index: 0; pointer-events: none; }
.pumpkin {
  position: absolute; bottom: clamp(18px, 3vw, 40px); left: var(--gutter);
  width: clamp(58px, 7vw, 100px);
  filter: drop-shadow(0 0 22px var(--hw-glow));
}
.pumpkin--sm { left: auto; right: var(--gutter); width: clamp(44px, 5vw, 72px); }
.pumpkin svg { display: block; width: 100%; height: auto; }
.pumpkin__face { animation: hw-flicker 2.6s steps(1, end) infinite; }
.pumpkin--sm .pumpkin__face { animation-delay: -1.1s; }
@keyframes hw-flicker { 0%, 100% { opacity: 1; } 42% { opacity: 0.72; } 46% { opacity: 1; } 71% { opacity: 0.84; } 74% { opacity: 1; } }

.bat-swarm { position: fixed; inset: 0; z-index: var(--z-promo); pointer-events: none; overflow: hidden; }
.bat-swarm__bat {
  position: absolute; left: 50%; top: 50%;
  width: calc(64px * var(--s));
  opacity: 0;
  animation: hw-scatter 1.5s cubic-bezier(0.4, 0, 0.8, 0.5) var(--d) forwards;
}
.bat-swarm__bat .bat__wing { animation-duration: 0.16s; }
@keyframes hw-scatter {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.5); opacity: 0.9; }
}

.curtain-night {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 85% 42% at 50% 100%, rgba(255, 100, 20, 0.3), transparent 72%),
    radial-gradient(ellipse 46% 20% at 50% 52%, rgba(0, 0, 0, 0.7), transparent 72%),
    radial-gradient(circle at 50% 30%, rgba(255, 120, 30, 0.1), transparent 46%);
  opacity: 0;
  transition: opacity 0.8s var(--ease), transform 1.05s cubic-bezier(0.65, 0, 0.35, 1) 0.05s;
}
.curtain-night.is-on { opacity: 1; }
.curtain-night.is-leaving { transform: translateY(-100%); }
.curtain-night .hw-jack {
  left: 50%; top: 29%; width: min(38vmin, 340px);
  translate: -50% -50%;
  transform: translateY(26%) scale(0.92);
  transition: transform 2.2s var(--ease);
}
.curtain-night.is-on .hw-jack { transform: none; }
.curtain-night .hw-grave { position: absolute; left: 0; bottom: 0; width: 100%; height: clamp(110px, 20vh, 210px); }
.curtain-night__web { position: absolute; top: 0; right: 0; width: clamp(140px, 18vw, 260px); height: auto; fill: none; stroke: rgba(242, 242, 242, 0.18); stroke-width: 0.7; }
.curtain-night__web--left { right: auto; left: 0; transform: scaleX(-1); }
.curtain-night__spider { position: absolute; top: 0; left: 18%; width: 24px; transform: translateY(-40px); transition: transform 2.6s cubic-bezier(0.34, 1.4, 0.64, 1) 0.3s; }
.curtain-night.is-on .curtain-night__spider { transform: translateY(min(30vh, 260px)); }
.curtain-night__spider svg { display: block; width: 100%; height: auto; overflow: visible; }
.curtain-night__spider svg path { fill: none; stroke: rgba(242, 242, 242, 0.6); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.curtain-night__spider svg ellipse,
.curtain-night__spider svg circle:not(.spooky__eye) { fill: #141414; stroke: rgba(242, 242, 242, 0.5); stroke-width: 0.8; }
.curtain__meta { z-index: 3; }
.curtain__hw { color: var(--hw-orange); text-shadow: 0 0 14px var(--hw-glow); }

.hw-jack { position: absolute; }
.hw-jack::before { content: ""; position: absolute; inset: -45%; background: radial-gradient(circle, rgba(255, 122, 26, 0.42), rgba(255, 100, 20, 0.12) 42%, transparent 68%); pointer-events: none; }
.hw-jack svg {
  position: relative; display: block; width: 100%; height: auto; overflow: visible;
  transform-origin: 50% 100%; will-change: transform;
  filter: drop-shadow(0 0 18px rgba(255, 122, 26, 0.6));
  animation: hw-sway 4.5s ease-in-out infinite alternate;
}
@keyframes hw-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.hero .hw-jack { left: 25%; top: 16%; width: clamp(120px, 14vw, 220px); }
.page-head .hw-jack, .booking .hw-jack { right: 26%; top: calc(var(--nav-h) + 20px); width: clamp(90px, 10vw, 160px); }
.hero__title { filter: drop-shadow(0 0 26px rgba(255, 122, 26, 0.32)); }
.hero__title .line:nth-child(2) { color: var(--hw-orange); }

.hw-grave { display: block; width: 100%; fill: #050304; }
.hw-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hw-scene::before { content: ""; position: absolute; inset: auto 0 0 0; height: 60%; background: radial-gradient(ellipse 70% 70% at 50% 100%, rgba(255, 100, 20, 0.3), transparent 72%); }
.hw-scene .hw-grave { position: absolute; left: 0; bottom: 0; height: clamp(90px, 13vw, 190px); }
.hw-scene .hw-jack { right: 6%; top: 8%; width: clamp(80px, 10vw, 160px); }

.hw-drip {
  position: relative; z-index: 21;
  height: 25px; margin-bottom: -25px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='30'%3E%3Cpath fill='%23ff7a1a' d='M0 0H240V5C233 5 231 7 231 12C231 20 223 20 223 12C223 8 221 5 213 5H170C164 5 162 8 162 16C162 27 151 27 151 16C151 8 149 5 143 5H96C90 5 89 7 89 10C89 14 83 14 83 10C83 7 82 5 76 5H40C34 5 33 8 33 20C33 30 21 30 21 20C21 8 20 5 14 5H0Z'/%3E%3C/svg%3E") repeat-x 0 0 / 200px 22px;
  filter: drop-shadow(0 4px 8px rgba(255, 122, 26, 0.35));
  transform-origin: 50% 0;
  animation: hw-ooze 6s ease-in-out infinite alternate;
}
@keyframes hw-ooze { to { transform: scaleY(1.14); } }

.hw-spider { display: block; }
.hw-spider svg { display: block; width: 100%; height: auto; overflow: visible; }
.hw-spider svg path { fill: none; stroke: rgba(242, 242, 242, 0.62); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.hw-spider svg ellipse,
.hw-spider svg circle:not(.spooky__eye) { fill: #141414; stroke: rgba(242, 242, 242, 0.5); stroke-width: 0.8; }

.hw-logo { position: relative; display: block; width: fit-content; }
.hw-logo__track { position: absolute; inset: 0; z-index: 2; pointer-events: none; container-type: inline-size; }
.hw-logo__spider {
  position: absolute; left: 0; top: 0; width: clamp(14px, 11cqw, 24px);
  translate: -50% -50%;
  opacity: 0;
  animation: hw-crawl 15s linear 1s infinite;
}
.nav__logo .hw-logo__spider { animation-delay: 4s; }
.hw-logo__spider--intro { width: clamp(20px, 6cqw, 40px); animation: hw-crawl-intro 1.3s linear 0.2s forwards; }
.curtain__logo.is-flying .hw-logo__spider--intro { animation: none; opacity: 1; transform: translate(83.7cqw, 3.2cqw); }
@keyframes hw-crawl-intro {
  0% { transform: translate(-4cqw, 2.4cqw) rotate(90deg) scale(1); opacity: 0; }
  8% { opacity: 1; }
  38% { transform: translate(17.7cqw, 2.4cqw) rotate(90deg) scale(1); }
  46% { transform: translate(17.7cqw, 4.4cqw) rotate(180deg) scale(1); }
  60% { transform: translate(17.7cqw, 10.6cqw) rotate(180deg) scale(0.3); opacity: 1; }
  62% { transform: translate(17.7cqw, 10.6cqw) rotate(180deg) scale(0); opacity: 0; }
  76% { transform: translate(83.7cqw, 8.6cqw) rotate(0deg) scale(0); opacity: 0; }
  78% { transform: translate(83.7cqw, 8.6cqw) rotate(0deg) scale(0); opacity: 1; }
  100% { transform: translate(83.7cqw, 3.2cqw) rotate(0deg) scale(1); opacity: 1; }
}
.hw-logo__track .hw-spider svg path { stroke: #ff8a2a; }
.hw-logo__track .hw-spider svg ellipse,
.hw-logo__track .hw-spider svg circle:not(.spooky__eye) { stroke: #ff8a2a; }
.hw-logo__track .hw-spider { animation: hw-scuttle 0.16s steps(2, jump-none) infinite; }
@keyframes hw-scuttle { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes hw-crawl {
  0% { transform: translate(-6cqw, 2.4cqw) rotate(90deg) scale(1); opacity: 0; }
  3% { opacity: 1; }
  22% { transform: translate(17.7cqw, 2.4cqw) rotate(90deg) scale(1); }
  26% { transform: translate(17.7cqw, 4cqw) rotate(180deg) scale(1); }
  33% { transform: translate(17.7cqw, 10.6cqw) rotate(180deg) scale(0.4); opacity: 1; }
  35% { transform: translate(17.7cqw, 10.6cqw) rotate(180deg) scale(0); opacity: 0; }
  43% { transform: translate(83.7cqw, 8.6cqw) rotate(0deg) scale(0); opacity: 0; }
  44% { transform: translate(83.7cqw, 8.6cqw) rotate(0deg) scale(0); opacity: 1; }
  52% { transform: translate(83.7cqw, 8.6cqw) rotate(0deg) scale(0.5); }
  60% { transform: translate(83.7cqw, 2.4cqw) rotate(0deg) scale(1); }
  64% { transform: translate(83.7cqw, 2.4cqw) rotate(90deg) scale(1); }
  92% { transform: translate(106cqw, 2.4cqw) rotate(90deg) scale(1); opacity: 1; }
  95%, 100% { transform: translate(106cqw, 2.4cqw) rotate(90deg) scale(1); opacity: 0; }
}

.hw-hang {
  position: absolute; top: 0.04em; z-index: 1;
  width: clamp(22px, 0.36em, 38px);
  pointer-events: none;
}

.member__ring, .profile__avatar { position: relative; overflow: hidden; }
.profile__avatar {
  border-color: rgba(255, 214, 170, 0.6);
  box-shadow: 0 0 0 8px rgba(255, 122, 26, 0.05), 0 0 80px -10px rgba(255, 122, 26, 0.55);
  background: radial-gradient(50% 60% at 50% 50%, rgba(255, 110, 20, 0.18), rgba(255, 110, 20, 0) 70%), #0e0a08;
}
.member__ring .glow-name, .profile__avatar .glow-name { position: relative; z-index: 1; }
.hw-skel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hw-skel g { opacity: 0.42; }
.hw-skel__bone { fill: #eadfca; }
.hw-skel__line { fill: none; stroke: #eadfca; stroke-width: 5; stroke-linecap: round; }
.hw-skel__hole { fill: #0a0604; }
.hw-skel__teeth { fill: none; stroke: #0a0604; stroke-width: 1.6; }
.hw-skel__eye { fill: var(--hw-orange); filter: drop-shadow(0 0 3px var(--hw-orange)); animation: hw-flicker 2.6s steps(1, end) infinite; }
.member:nth-child(2) .hw-skel__eye { animation-delay: -0.9s; }
.member:nth-child(3) .hw-skel__eye { animation-delay: -1.7s; }
.hw-hang.is-tight { top: -0.62em; }
.hw-hang__bob {
  position: relative; display: block;
  transform: translateY(-2.6em); opacity: 0;
  transition: transform 1.8s cubic-bezier(0.34, 1.5, 0.64, 1), opacity 0.4s ease;
}
.hw-hang.is-down .hw-hang__bob { transform: none; opacity: 1; }
.hw-hang .spooky__thread { height: 2.4em; background: linear-gradient(to top, rgba(242, 242, 242, 0.4), transparent); }
.hw-hang.is-down .hw-spider { animation: hw-hang-bob 3.2s ease-in-out 1.8s infinite alternate; }
@keyframes hw-hang-bob { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(0.16em) rotate(5deg); } }

.hw-ghost {
  position: absolute; z-index: 0; left: min(var(--gx), calc(100% - 64px)); top: var(--gy);
  width: clamp(44px, 5vw, 74px);
  pointer-events: none;
  animation: hw-float 5.5s ease-in-out var(--gd, 0s) infinite alternate;
}
.hw-ghost svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.35)); animation: hw-phase 8s ease-in-out var(--gd, 0s) infinite; }
.hw-ghost__body { fill: rgba(236, 236, 242, 0.92); }
.hw-ghost__face { fill: #0b0b0c; }
@keyframes hw-float { from { transform: translate(-10px, 0) rotate(-5deg); } to { transform: translate(16px, -26px) rotate(5deg); } }
@keyframes hw-phase { 0%, 100% { opacity: 0.85; } 40% { opacity: 0.25; } 55% { opacity: 0.8; } }

.hw-spark {
  position: absolute; bottom: -10px; left: var(--x);
  width: var(--sz); height: var(--sz); border-radius: 50%;
  background: #ffbf63; box-shadow: 0 0 6px 2px rgba(255, 122, 26, 0.8);
  opacity: 0;
  animation: hw-rise var(--dur) linear var(--delay) infinite;
}
@keyframes hw-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 0.9; }
  50% { transform: translate(var(--dx), -16vh); }
  80% { opacity: 0.5; }
  100% { transform: translate(calc(var(--dx) * -0.5), -32vh); opacity: 0; }
}

@media (max-width: 760px) {
  .spooky__spider { right: 14%; width: 22px; }
  .spooky__web { width: 130px; }
  .hero .hw-jack { left: 6%; top: calc(var(--nav-h) + 24px); width: 74px; }
  .page-head .hw-jack, .booking .hw-jack { right: 6%; top: calc(var(--nav-h) + 24px); width: 54px; }
  .hw-scene .hw-jack { right: 8%; top: 5%; width: 64px; }
  .hw-ghost { width: 40px; }
}
@media (max-width: 379px) {
  .footer-hw__sign { gap: 10px; font-size: 0.62rem; letter-spacing: 0.18em; white-space: nowrap; }
  .footer-hw__pumpkin { width: 26px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .curtain-night .hw-jack { top: 17%; width: 22vmin; }
  .curtain-night .hw-grave { height: 22vh; }
}

@media (prefers-reduced-motion: reduce) {
  .spooky__bat, .bat-swarm, .scroll-bat, .curtain-bats, .hw-spark { display: none; }
  .hw-ticker__track, .section-deco__spider, .hw-ember, .hw-drip, .hw-ghost, .hw-ghost svg, .hw-jack svg, .hw-logo__track .hw-spider, .hw-hang .hw-spider { animation: none; }
  .hw-logo__spider { animation: none; opacity: 1; transform: translate(17.7cqw, 2.4cqw) rotate(90deg); }
  .hw-logo__spider--intro { display: none; }
  .hw-hang__bob { transition: none; }
  .spooky__spider { animation: none; transform: translateY(140px); }
  .spooky__fog, .promo__frame, .pumpkin__face { animation: none; }
}