.halloween-nav-mascot {
  display: none;
}

html[data-site-theme="halloween"] {
  --bg: #100d0b;
  --surface: #1b1510;
  --surface-2: #2a2018;
  --line: rgba(255, 184, 110, 0.13);
  --ink: #fff5e9;
  --ink-2: #bfb2a6;
  --ink-3: #938171;
  --seasonal-accent: #ff9b3d;
  --symbol-base: #ed7b25;
  --symbol-glow: #ffdda6;
  --field-blue-base: #130d08;
  --field-violet-base: #150c10;
}

html[data-site-theme="halloween"] body {
  background-color: var(--bg);
  color: var(--ink);
}

html[data-site-theme="halloween"] [data-site-nav] {
  background: rgba(16, 13, 11, 0.88);
  border-bottom: 1px solid rgba(255, 164, 70, 0.08);
}

html[data-site-theme="halloween"] [data-nav-menu] {
  background: rgba(16, 13, 11, 0.88);
  border-bottom-color: rgba(255, 164, 70, 0.08);
}

html[data-site-theme="halloween"].nav-menu-open [data-site-nav] {
  border-bottom-color: transparent;
}

html[data-site-theme="halloween"] [data-site-brand] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

html[data-site-theme="halloween"] [data-site-brand] > span {
  align-self: baseline;
  margin-top: 2px;
}

html[data-site-theme="halloween"] .halloween-nav-mascot {
  display: block;
  width: 36px;
  height: auto;
  flex: none;
}

html[data-site-theme="halloween"] [data-hero] {
  position: relative;
  isolation: isolate;
}

html[data-site-theme="halloween"] .halloween-bats {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  container-type: inline-size;
  pointer-events: none;
  user-select: none;
  color: #7a3f16;
}

.halloween-bat {
  position: absolute;
  top: var(--bat-y);
  left: 0;
  width: var(--bat-size);
  transform: translateX(-48px);
  animation: halloween-bat-cross 45s linear var(--bat-delay) infinite backwards;
}

.halloween-bat[data-bat="1"] {
  --bat-y: 14%;
  --bat-size: 22px;
  --bat-delay: 1.5s;
}

.halloween-bat[data-bat="2"] {
  --bat-y: 46%;
  --bat-size: 16px;
  --bat-delay: 10.5s;
  animation-name: halloween-bat-cross-back;
}

.halloween-bat[data-bat="3"] {
  --bat-y: 28%;
  --bat-size: 19px;
  --bat-delay: 19.5s;
}

.halloween-bat[data-bat="4"] {
  --bat-y: 62%;
  --bat-size: 18px;
  --bat-delay: 28.5s;
  animation-name: halloween-bat-cross-back;
}

.halloween-bat[data-bat="5"] {
  --bat-y: 6%;
  --bat-size: 21px;
  --bat-delay: 37.5s;
}

.halloween-bat-bob {
  display: block;
  animation: halloween-bat-bob 1.9s ease-in-out infinite alternate;
}

.halloween-bat[data-bat="2"] .halloween-bat-bob {
  animation-duration: 2.3s;
}

.halloween-bat[data-bat="3"] .halloween-bat-bob {
  animation-duration: 1.6s;
}

.halloween-bat[data-bat="4"] .halloween-bat-bob {
  animation-duration: 2.1s;
}

.halloween-bat[data-bat="5"] .halloween-bat-bob {
  animation-duration: 1.75s;
}

.halloween-bat svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: currentColor;
}

.halloween-bat-wing {
  transform-box: view-box;
  transform-origin: 30px 12px;
  animation: halloween-bat-flap 0.26s ease-in-out infinite alternate;
}

@keyframes halloween-bat-cross {
  0% {
    transform: translateX(-48px);
  }

  15.5%,
  100% {
    transform: translateX(calc(100cqw + 48px));
  }
}

@keyframes halloween-bat-cross-back {
  0% {
    transform: translateX(calc(100cqw + 48px));
  }

  15.5%,
  100% {
    transform: translateX(-48px);
  }
}

@keyframes halloween-bat-bob {
  from {
    transform: translateY(-9px) rotate(-6deg);
  }

  to {
    transform: translateY(9px) rotate(5deg);
  }
}

@keyframes halloween-bat-flap {
  from {
    transform: rotate(-12deg) scaleY(1);
  }

  to {
    transform: rotate(18deg) scaleY(0.35);
  }
}

@media (max-width: 640px) {
  .halloween-bat[data-bat="2"],
  .halloween-bat[data-bat="4"] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-site-theme="halloween"] .halloween-bats {
    display: none;
  }
}

html[data-site-theme="halloween"] [data-site-nav] a[aria-current="page"] {
  color: var(--seasonal-accent);
}

html[data-site-theme="halloween"] .btn-primary,
html[data-site-theme="halloween"] [data-scan-mode].is-active {
  background: var(--seasonal-accent);
  color: #201105;
}

html[data-site-theme="halloween"] .btn-primary:hover {
  background: #ffb36b;
}

html[data-site-theme="halloween"] #drop-zone > svg {
  color: #ffc089;
}

html[data-site-theme="halloween"] [data-color-field="blue"] [data-color-art] {
  filter: blur(3.6cqi) hue-rotate(155deg) saturate(0.85);
}

html[data-site-theme="halloween"] [data-color-field="violet"] [data-color-art] {
  filter: blur(3.6cqi) hue-rotate(70deg) saturate(0.85);
}