/* ============================================================
   Halloween site theme. Loaded on the homepage and the panel only while it
   is active. Everything is scoped to html[data-site-theme="halloween"] so the
   file is harmless anywhere else.
   ============================================================ */

html[data-site-theme="halloween"] {
  /* Panel palette */
  --p: #ff7a1a;
  --bg: #0b0610;
  --g: rgba(30, 12, 34, .78);
  --gb: rgba(255, 122, 26, .26);
  --gh: rgba(38, 16, 44, .82);
  --td: #dcbcd0;
  /* Homepage palette */
  --red: #ff7a1a;
  --red-bright: #ff9a3c;
  --surface: #120b16;
  --surface-2: #19101e;
  --hw-orange: #ff7a1a;
  --hw-orange-soft: rgba(255, 122, 26, .16);
  --hw-purple: #8b5cf6;
  --hw-green: #84cc16;
}

html[data-site-theme="halloween"] body { background-color: #0b0610; }

/* Homepage background glow: orange and purple instead of red. */
html[data-site-theme="halloween"] body::before {
  background:
    radial-gradient(700px at 8% 2%, rgba(255, 122, 26, .16), transparent 60%),
    radial-gradient(800px at 92% 10%, rgba(139, 92, 246, .16), transparent 60%),
    radial-gradient(900px at 50% 100%, rgba(255, 122, 26, .08), transparent 60%) !important;
}

/* Panel background blobs */
html[data-site-theme="halloween"] .blob-bg.pink { background: rgba(255, 122, 26, .5) !important; }
html[data-site-theme="halloween"] .blob-bg.blue { background: rgba(139, 92, 246, .45) !important; }
html[data-site-theme="halloween"] .blob-bg.purple { background: rgba(132, 204, 22, .18) !important; }

/* Primary buttons and highlights glow like a jack-o'-lantern. */
html[data-site-theme="halloween"] .btn.bp,
html[data-site-theme="halloween"] .home-button.primary,
html[data-site-theme="halloween"] .home-button.compact {
  background: linear-gradient(135deg, #ff8a2a, #e8590c) !important;
  border-color: rgba(255, 170, 90, .55) !important;
  color: #1a0b02 !important;
  box-shadow: 0 8px 28px rgba(255, 122, 26, .28) !important;
}

html[data-site-theme="halloween"] .btn.bp:hover,
html[data-site-theme="halloween"] .home-button.primary:hover,
html[data-site-theme="halloween"] .home-button.compact:hover { box-shadow: 0 10px 34px rgba(255, 122, 26, .45) !important; }

/* Homepage hero and buttons */
html[data-site-theme="halloween"] .btn-primary {
  background: linear-gradient(135deg, #ff8a2a, #e8590c) !important;
  border-color: rgba(255, 170, 90, .55) !important;
  color: #1a0b02 !important;
}

html[data-site-theme="halloween"] .btn-primary:hover { box-shadow: 0 12px 30px rgba(255, 122, 26, .4) !important; }
html[data-site-theme="halloween"] .floating-blob.pink { background: rgba(255, 122, 26, .45) !important; }
html[data-site-theme="halloween"] .floating-blob.blue { background: rgba(139, 92, 246, .4) !important; }

html[data-site-theme="halloween"] .hero-main-title .highlight {
  background: linear-gradient(100deg, #ffb347, #ff7a1a 45%, #c2410c) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 22px rgba(255, 122, 26, .45));
  animation: hw-title-glow 4s ease-in-out infinite;
}

@keyframes hw-title-glow {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(255, 122, 26, .35)); }
  50% { filter: drop-shadow(0 0 30px rgba(255, 140, 40, .7)); }
}

html[data-site-theme="halloween"] .hl,
html[data-site-theme="halloween"] .home-accent,
html[data-site-theme="halloween"] .tf {
  color: #ff8a2a !important;
  -webkit-text-fill-color: currentColor;
  text-shadow: 0 0 22px rgba(255, 122, 26, .45);
}

html[data-site-theme="halloween"] .nl.active,
html[data-site-theme="halloween"] .admin-nav.atb .ab.active {
  border-color: rgba(255, 122, 26, .4) !important;
  background: linear-gradient(120deg, rgba(255, 122, 26, .2), rgba(139, 92, 246, .1)) !important;
  box-shadow: inset 3px 0 0 #ff7a1a !important;
}

html[data-site-theme="halloween"] .gc,
html[data-site-theme="halloween"] .sb,
html[data-site-theme="halloween"] .mn { border-color: rgba(255, 122, 26, .12) !important; }

/* Themed logo: wider than the square default, with a flickering glow. */
.site-theme-logo {
  height: 36px !important;
  width: auto !important;
  max-width: 120px;
  object-fit: contain;
  cursor: pointer;
  filter: drop-shadow(0 0 8px rgba(255, 122, 26, .55));
  animation: hw-flicker 3.2s ease-in-out infinite;
  transform-origin: 50% 60%;
}

.site-theme-logo:hover { animation: hw-wiggle .6s ease-in-out; }
.home-brand .site-theme-logo { height: 34px !important; }
.alogo .site-theme-logo { height: 44px !important; }

@keyframes hw-flicker {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 122, 26, .55)); }
  45% { filter: drop-shadow(0 0 14px rgba(255, 140, 40, .85)); }
  50% { filter: drop-shadow(0 0 4px rgba(255, 122, 26, .3)); }
  55% { filter: drop-shadow(0 0 12px rgba(255, 140, 40, .75)); }
}

@keyframes hw-wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-9deg) scale(1.08); }
  60% { transform: rotate(7deg) scale(1.05); }
}

/* ── Sky: stars, moon and clouds behind everything ── */
.hw-sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.hw-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255, 255, 255, .8), transparent 60%),
    radial-gradient(1px 1px at 28% 42%, rgba(255, 255, 255, .6), transparent 60%),
    radial-gradient(1.6px 1.6px at 46% 12%, rgba(255, 240, 210, .9), transparent 60%),
    radial-gradient(1px 1px at 63% 33%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(1.3px 1.3px at 78% 22%, rgba(255, 255, 255, .7), transparent 60%),
    radial-gradient(1px 1px at 88% 48%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1.2px 1.2px at 6% 60%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1px 1px at 38% 70%, rgba(255, 255, 255, .4), transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 66%, rgba(255, 230, 200, .55), transparent 60%);
  animation: hw-twinkle 5s ease-in-out infinite alternate;
}

@keyframes hw-twinkle { from { opacity: .45; } to { opacity: 1; } }

.hw-moon {
  position: absolute;
  top: 7vh;
  right: 7vw;
  width: clamp(90px, 11vw, 170px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fff6df 0%, #ffd9a0 46%, #f4a35a 100%);
  box-shadow: 0 0 60px 18px rgba(255, 190, 110, .22), 0 0 160px 60px rgba(255, 122, 26, .12);
  opacity: .82;
  animation: hw-moon-glow 7s ease-in-out infinite alternate;
}

.hw-moon span { position: absolute; border-radius: 50%; background: rgba(214, 140, 70, .35); }
.hw-moon span:nth-child(1) { width: 22%; height: 22%; top: 24%; left: 52%; }
.hw-moon span:nth-child(2) { width: 14%; height: 14%; top: 58%; left: 30%; }
.hw-moon span:nth-child(3) { width: 10%; height: 10%; top: 40%; left: 22%; }

@keyframes hw-moon-glow {
  from { box-shadow: 0 0 50px 14px rgba(255, 190, 110, .18), 0 0 140px 50px rgba(255, 122, 26, .1); }
  to { box-shadow: 0 0 80px 26px rgba(255, 190, 110, .28), 0 0 200px 80px rgba(255, 122, 26, .16); }
}

.hw-cloud {
  position: absolute;
  height: 48px;
  border-radius: 999px;
  background: rgba(40, 22, 54, .85);
  filter: blur(6px);
  animation: hw-cloud-drift linear infinite;
}

.hw-cloud-a { top: calc(7vh + 60px); width: 240px; animation-duration: 70s; }
.hw-cloud-b { top: calc(7vh + 120px); width: 170px; animation-duration: 95s; animation-delay: -40s; opacity: .7; }

@keyframes hw-cloud-drift { from { transform: translateX(110vw); } to { transform: translateX(-300px); } }

/* ── Fog rolling along the bottom ── */
.hw-fog {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 2;
  height: 26vh;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent);
  mask-image: linear-gradient(to top, #000 10%, transparent);
  opacity: .5;
}

.hw-fog div {
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 200%;
  height: 100%;
  background:
    radial-gradient(40% 60% at 10% 80%, rgba(190, 170, 230, .28), transparent 70%),
    radial-gradient(35% 50% at 35% 90%, rgba(220, 200, 255, .22), transparent 70%),
    radial-gradient(45% 60% at 62% 85%, rgba(180, 160, 220, .26), transparent 70%),
    radial-gradient(35% 55% at 88% 90%, rgba(220, 200, 255, .2), transparent 70%);
  animation: hw-fog-roll 38s linear infinite;
}

.hw-fog div + div { animation-duration: 56s; animation-direction: reverse; opacity: .7; bottom: -40px; }

@keyframes hw-fog-roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Bats ── */
.hw-bat {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: 54px;
  height: 27px;
  pointer-events: none;
  animation: hw-bat-fly var(--dur, 9s) linear forwards;
}

.hw-bat svg { width: 100%; height: 100%; fill: #120812; filter: drop-shadow(0 0 6px rgba(255, 122, 26, .35)); animation: hw-bat-bob .9s ease-in-out infinite; }
.hw-bat.is-flipped svg { transform: scaleX(-1); }
.hw-bat-eye { fill: #ffb347; }
.hw-wing { transform-box: fill-box; animation: hw-flap .22s ease-in-out infinite alternate; }
.hw-wing-l { transform-origin: 100% 60%; }
.hw-wing-r { transform-origin: 0 60%; }

@keyframes hw-flap { from { transform: scaleY(1); } to { transform: scaleY(.25); } }
@keyframes hw-bat-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes hw-bat-fly {
  from { transform: translate(var(--x0), var(--y0)) scale(var(--scale, 1)); }
  50% { transform: translate(calc((var(--x0) + var(--x1)) / 2), calc(var(--y1) - 40px)) scale(var(--scale, 1)); }
  to { transform: translate(var(--x1), var(--y1)) scale(var(--scale, 1)); }
}

/* ── Spider dangling from the top ── */
.hw-spider {
  position: fixed;
  top: 0;
  right: max(18px, 14vw);
  z-index: 4;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  animation: hw-spider-dangle 9s ease-in-out infinite;
  transform-origin: 50% -200px;
}

.hw-spider svg { width: 100%; height: 100%; fill: #140a14; stroke: #140a14; stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(255, 122, 26, .4)); }
.hw-spider .hw-legs { fill: none; animation: hw-legs 1.4s ease-in-out infinite; transform-origin: 50% 60%; }
.hw-spider-eye { fill: #ff4d2e; stroke: none; }

.hw-thread {
  position: absolute;
  bottom: 70%;
  left: 50%;
  width: 1px;
  height: 100vh;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .05), rgba(255, 255, 255, .45));
}

.hw-spider.is-scared { animation: hw-spider-flee 1.1s ease-in forwards; }

@keyframes hw-spider-dangle {
  0% { transform: translateY(-40px) rotate(0); }
  30% { transform: translateY(150px) rotate(4deg); }
  45% { transform: translateY(130px) rotate(-3deg); }
  60% { transform: translateY(160px) rotate(2deg); }
  100% { transform: translateY(-40px) rotate(0); }
}

@keyframes hw-spider-flee { to { transform: translateY(-80px) rotate(10deg); } }
@keyframes hw-legs { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.9); } }

/* ── Falling leaves ── */
.hw-leaves { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }

.hw-leaf {
  position: absolute;
  top: -30px;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  border-radius: 0 70% 0 70%;
  background: hsl(var(--hue), 90%, 52%);
  opacity: .5;
  animation: hw-leaf-fall var(--dur) linear var(--delay) infinite;
}

@keyframes hw-leaf-fall {
  0% { transform: translate(0, -5vh) rotate(0); }
  50% { transform: translate(calc(var(--drift) / 2), 52vh) rotate(200deg); }
  100% { transform: translate(var(--drift), 108vh) rotate(420deg); }
}

/* ── Ghost ── */
.hw-ghost-wrap {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}

.hw-ghost-wrap > * { pointer-events: auto; }

.hw-ghost {
  width: 78px;
  height: 92px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 10px 22px rgba(139, 92, 246, .45)) drop-shadow(0 0 14px rgba(255, 255, 255, .25));
  animation: hw-ghost-float 3.6s ease-in-out infinite;
  transition: transform .2s ease;
}

.hw-ghost:hover { transform: scale(1.08) rotate(-4deg); }
.hw-ghost:focus-visible { outline: 2px solid #ff7a1a; outline-offset: 4px; border-radius: 40%; }
.hw-ghost svg { width: 100%; height: 100%; overflow: visible; }
.hw-ghost .hw-ghost-body { animation: hw-ghost-sway 2.4s ease-in-out infinite; transform-origin: 50% 20%; }
.hw-ghost.is-blinking .hw-ghost-eyes { transform: scaleY(.1); transform-origin: 50% 40%; transform-box: fill-box; }
.hw-ghost .hw-ghost-mouth { transform-box: fill-box; transform-origin: center; transition: transform .2s ease; }
.hw-ghost-wrap.is-talking .hw-ghost-mouth { animation: hw-ghost-talk .35s ease-in-out infinite alternate; }
.hw-ghost.is-boo { animation: hw-ghost-boo .7s ease-out, hw-ghost-float 3.6s ease-in-out .7s infinite; }
.hw-ghost.is-peek { animation: hw-ghost-peek 1.6s ease-in-out, hw-ghost-float 3.6s ease-in-out 1.6s infinite; }

@keyframes hw-ghost-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes hw-ghost-sway { 0%, 100% { transform: skewX(0); } 50% { transform: skewX(-3deg); } }
@keyframes hw-ghost-talk { from { transform: scale(.8, .6); } to { transform: scale(1.1, 1.2); } }
@keyframes hw-ghost-boo {
  0% { transform: scale(1); }
  30% { transform: scale(1.35) rotate(-8deg); }
  60% { transform: scale(.92) rotate(5deg); }
  100% { transform: scale(1); }
}
@keyframes hw-ghost-peek {
  0%, 100% { opacity: 1; transform: translateX(0); }
  40% { opacity: .15; transform: translateX(30px) scale(.9); }
  60% { opacity: .15; transform: translateX(30px) scale(.9); }
}

.hw-ghost-hint {
  margin-right: 6px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 99px;
  background: rgba(20, 10, 28, .85);
  color: #e9e1ff;
  font: 600 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: .3px;
  animation: hw-hint 2.6s ease-in-out infinite;
  pointer-events: none !important;
}

.hw-ghost-wrap.has-talked .hw-ghost-hint { display: none; }
@keyframes hw-hint { 0%, 100% { opacity: .55; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

.hw-bubble {
  position: relative;
  width: min(300px, calc(100vw - 44px));
  padding: 16px 16px 14px;
  border: 1px solid rgba(255, 122, 26, .4);
  border-radius: 18px 18px 6px 18px;
  background: linear-gradient(160deg, rgba(36, 16, 48, .97), rgba(16, 8, 20, .97));
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5), 0 0 30px rgba(139, 92, 246, .25);
  color: #f3eaff;
  font-family: Inter, system-ui, sans-serif;
  animation: hw-bubble-in .35s cubic-bezier(.2, .9, .3, 1.3);
}

.hw-bubble[hidden] { display: none; }
@keyframes hw-bubble-in { from { opacity: 0; transform: translateY(12px) scale(.9); } to { opacity: 1; transform: none; } }

.hw-bubble-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, .55);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.hw-bubble-close:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.hw-whisper { min-height: 22px; margin: 0 22px 0 0; font-size: 16px; font-style: italic; font-weight: 700; letter-spacing: .4px; color: #e9e1ff; text-shadow: 0 0 12px rgba(200, 180, 255, .6); }
.hw-secret { margin-top: 10px; }
.hw-secret.is-in { animation: hw-bubble-in .4s ease-out; }
.hw-secret p { margin: 0 0 10px; color: rgba(243, 234, 255, .75); font-size: 12.5px; line-height: 1.5; }

.hw-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px dashed rgba(255, 122, 26, .7);
  border-radius: 12px;
  background: rgba(255, 122, 26, .1);
}

.hw-code strong { color: #ffb066; font: 800 20px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 2px; }
.hw-code span { padding: 4px 9px; border-radius: 99px; background: #ff7a1a; color: #1a0b02; font-size: 12px; font-weight: 800; }
.hw-bubble-actions { display: flex; gap: 8px; margin-top: 10px; }

.hw-copy, .hw-shop {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  color: #fff;
  font: 700 12px/1 Inter, system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
}

.hw-copy { border-color: rgba(255, 140, 50, .6); background: linear-gradient(135deg, #ff8a2a, #e8590c); color: #1a0b02; }
.hw-copy:hover, .hw-shop:hover { filter: brightness(1.1); }

.hw-preview-badge {
  position: fixed;
  top: 86px;
  left: 50%;
  z-index: 9001;
  padding: 7px 14px;
  border: 1px solid rgba(255, 122, 26, .5);
  border-radius: 99px;
  background: rgba(20, 10, 28, .92);
  color: #ffd2a8;
  font: 700 12px/1 Inter, system-ui, sans-serif;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Keep the ghost clear of the panel's floating lock button and toasts. */
html[data-site-theme="halloween"] body.modal-open .hw-ghost-wrap { opacity: .25; }

@media (max-width: 720px) {
  .hw-ghost { width: 60px; height: 72px; }
  .hw-ghost-wrap { right: 12px; bottom: 14px; }
  .hw-moon { top: 9vh; right: 5vw; opacity: .6; }
  .hw-spider { right: 22vw; }
  .hw-fog { height: 18vh; opacity: .4; }
}

/* Calm mode: keep the look, drop most of the motion. */
.hw-effects-calm .hw-leaf { animation-duration: calc(var(--dur) * 1.6); }
.hw-effects-calm .hw-spider { animation-duration: 16s; }

@media (prefers-reduced-motion: reduce) {
  .hw-stars, .hw-moon, .hw-cloud, .hw-fog div, .hw-ghost, .hw-ghost .hw-ghost-body, .hw-ghost-hint, .site-theme-logo { animation: none !important; }
}