/* Halloween deck theme (Sean, Oct 26: Fri Oct 30 is a spooky day).
 * Loaded by build.mjs when a day's donow.md front matter has
 * `theme: halloween`. Only the look changes: every word, form and window is
 * the same as any other day. Body text stays Georgia on dark panels so the
 * reading is as easy as ever; only the titles get the creepy font.
 * Motion lives in theme-halloween.js (and stops for prefers-reduced-motion). */
@import url("https://fonts.googleapis.com/css2?family=Creepster&display=swap");

html.theme-halloween {
  --cream: #120d18; --cream-sub: #1f1629; --paper: #1a1322;
  --ink: #efe6d2; --ink-sub: #d8c8a8; --muted: #b3a48a;
  --green: #ff8a1f; --green-light: #ffa64d;
  --gold: #ffb347; --gold-dark: #8a5a2b; --rust: #9be36b;
  --hw-slime: #9be36b; --hw-purple: #2a1838; --hw-blood: #c2261b;
  --hw-title: "Creepster", "Chiller", Impact, fantasy;
}
html.theme-halloween, html.theme-halloween body {
  background:
    radial-gradient(ellipse 60% 45% at 85% 8%, rgba(255, 179, 71, .10), transparent 70%),
    radial-gradient(ellipse 90% 60% at 20% 110%, rgba(110, 50, 150, .35), transparent 70%),
    linear-gradient(180deg, #0b0810 0%, #160f1f 60%, #1d1028 100%);
  background-attachment: fixed;
}
html.theme-halloween .deck { z-index: 1; }

/* Titles: creepy font, pumpkin orange with a soft glow. */
html.theme-halloween h1,
html.theme-halloween h2.text-title {
  font-family: var(--hw-title); font-weight: 400; letter-spacing: .04em;
  color: var(--green); text-shadow: 0 0 14px rgba(255, 138, 31, .45), 0 2px 0 #3a1500;
}
html.theme-halloween h1 { font-size: clamp(38px, 6vw, 72px); }
html.theme-halloween h2.text-title { font-size: 30px; }
html.theme-halloween h3 { color: var(--gold); }
html.theme-halloween strong { color: var(--gold); }
html.theme-halloween a { color: var(--hw-slime); }
html.theme-halloween .eyebrow { color: var(--hw-slime); }
html.theme-halloween .eyebrow::before { content: "\1F987  "; }

/* Panels: old crypt stone with a faint orange edge. */
html.theme-halloween .panel {
  background: linear-gradient(180deg, #1d1527, #160f1e);
  border: 1px solid #5c3a1c; box-shadow: 0 0 0 1px rgba(0,0,0,.6) inset, 0 8px 30px rgba(0,0,0,.55);
}
html.theme-halloween .panel.right { background: linear-gradient(180deg, #221830, #1a1224); }
html.theme-halloween .sources { color: var(--muted); border-top-color: #3a2a4a; }

html.theme-halloween .board-q {
  background: linear-gradient(135deg, #3b1a52, #241033); color: #ffd9a8;
  border: 1px solid #ff8a1f; box-shadow: 0 0 18px rgba(255, 138, 31, .25);
}
html.theme-halloween .board-q strong { color: #ffb347; }
html.theme-halloween .standing { border-left-color: var(--hw-slime); }
html.theme-halloween .cue { color: #10200a; background: var(--hw-slime); }
html.theme-halloween .ido-qs li,
html.theme-halloween .sv-item { background: #150f1c; border-color: #5c3a1c; }
html.theme-halloween details.check { border-color: var(--hw-slime); background: rgba(155, 227, 107, .07); }
html.theme-halloween details.check summary { color: var(--hw-slime); }
html.theme-halloween .sv-label { color: var(--hw-slime); }
html.theme-halloween .sv-choices li::before { color: var(--green); }
html.theme-halloween .unlinked { background: #241a10; border-color: #8a5a2b; }

/* Figure 1 is drawn in dark ink, so it sits on a sheet of old parchment. */
html.theme-halloween .figure-art {
  background: #efe2c4; border-radius: 6px; padding: 10px;
  box-shadow: 0 0 0 2px #5c3a1c, 0 0 24px rgba(255, 138, 31, .25);
}
html.theme-halloween .figure figcaption { color: var(--ink-sub); }
html.theme-halloween pre.data, html.theme-halloween pre.sv-code { background: #fbfaf6; }

/* Tabs, buttons and the slide bar. */
html.theme-halloween .tab-row button { background: #150f1c; color: var(--ink-sub); border-color: #5c3a1c; }
html.theme-halloween .tab-row button[aria-selected="true"] { background: #ff8a1f; color: #1a0d00; border-color: #ff8a1f; }
html.theme-halloween .lock-btn,
html.theme-halloween .nav button {
  background: linear-gradient(180deg, #ff9a3a, #e2690c); color: #1a0d00; border-color: #ffd08a;
  box-shadow: 0 0 14px rgba(255, 138, 31, .45);
}
html.theme-halloween .nav .counter { background: #150f1c; color: var(--ink-sub); border-color: #5c3a1c; }
html.theme-halloween .form-embed { border: 2px solid #ff8a1f; box-shadow: 0 0 20px rgba(255, 138, 31, .3); }
html.theme-halloween .guide-thumb { color: #efe6d2; }

/* ── decorations (theme-halloween.js) ─────────────────────────────────── */
.hw-back { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hw-front { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.hw-moon { position: absolute; top: 4vh; right: 7vw; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fff6d8, #f2d58f 55%, #c99a45);
  box-shadow: 0 0 60px 18px rgba(255, 214, 140, .22); opacity: .85; }
.hw-web { position: fixed; z-index: 0; width: 110px; height: 110px; pointer-events: none; opacity: .5; }
.hw-web.tl { top: 0; left: 0; }
.hw-web.tr { top: 0; right: 0; transform: scaleX(-1); }

.hw-bat { position: absolute; width: 46px; color: #050307; will-change: transform; }
.hw-bat svg { display: block; width: 100%; animation: hw-flap .18s ease-in-out infinite alternate; transform-origin: 50% 60%; }
@keyframes hw-flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
.hw-back .hw-bat { color: #2a1838; }

.hw-fog { position: absolute; left: -20%; right: -20%; bottom: -8vh; height: 34vh;
  background: radial-gradient(ellipse 30% 60% at 20% 70%, rgba(190,170,220,.10), transparent 70%),
              radial-gradient(ellipse 35% 55% at 60% 80%, rgba(190,170,220,.09), transparent 70%),
              radial-gradient(ellipse 30% 60% at 90% 70%, rgba(190,170,220,.08), transparent 70%);
  animation: hw-fog 38s ease-in-out infinite alternate; }
@keyframes hw-fog { from { transform: translateX(-6%); } to { transform: translateX(6%); } }

/* Jump-outs: big, quick, then gone. No flashing, no sound. */
.hw-ghost { position: absolute; right: 6vw; bottom: -340px; width: min(300px, 40vw); filter: drop-shadow(0 0 30px rgba(220, 230, 255, .55)); }
.hw-ghost.go { animation: hw-boo 2.4s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes hw-boo {
  0% { transform: translateY(0) rotate(-8deg); }
  22% { transform: translateY(-420px) rotate(4deg) scale(1.08); }
  32% { transform: translateY(-400px) rotate(-3deg) scale(1); }
  70% { transform: translateY(-410px) rotate(3deg); }
  100% { transform: translateY(40px) rotate(-10deg); }
}
.hw-boo { position: absolute; top: -10px; left: -30%; font: 400 clamp(40px, 6vw, 80px)/1 var(--hw-title); color: #fff; text-shadow: 0 0 18px #9be36b, 0 3px 0 #1a3a10; transform: rotate(-12deg); }

.hw-spider { position: absolute; top: 0; left: 62vw; width: 140px; transform: translateY(-140px); }
.hw-spider .thread { position: absolute; left: 50%; bottom: 100%; width: 2px; height: 100vh; background: rgba(230, 230, 230, .7); transform: translateX(-50%); }
.hw-spider svg { display: block; width: 100%; filter: drop-shadow(0 0 2px #e8ffd8) drop-shadow(0 0 12px rgba(155, 227, 107, .85)); }
.hw-spider.go { animation: hw-drop 3.4s ease-in-out forwards; }
@keyframes hw-drop {
  0% { transform: translateY(-140px); }
  18% { transform: translateY(46vh); }
  26% { transform: translateY(40vh); }
  32% { transform: translateY(44vh) rotate(6deg); }
  40% { transform: translateY(42vh) rotate(-6deg); }
  60% { transform: translateY(43vh) rotate(4deg); }
  100% { transform: translateY(-160px); }
}

.hw-flock .hw-bat { width: 64px; color: #050307; filter: drop-shadow(0 0 2px #ffcf8a) drop-shadow(0 0 10px rgba(255, 138, 31, .9)); }

.hw-pumpkin { position: absolute; left: 4vw; bottom: -260px; width: min(240px, 34vw); text-align: center; }
.hw-pumpkin svg { display: block; width: 100%; filter: drop-shadow(0 0 26px rgba(255, 138, 31, .7)); }
.hw-pumpkin.go { animation: hw-pop 3s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes hw-pop {
  0% { transform: translateY(0); }
  20% { transform: translateY(-300px) rotate(-6deg); }
  30% { transform: translateY(-280px) rotate(5deg); }
  70% { transform: translateY(-290px) rotate(-3deg); }
  100% { transform: translateY(30px); }
}
.hw-pumpkin .say { font: 400 clamp(26px, 3.4vw, 44px)/1 var(--hw-title); color: #ffb347; text-shadow: 0 0 12px #ff5a00; margin-top: 4px; }

.hw-hand { position: absolute; bottom: -230px; left: 46vw; width: 150px; }
.hw-hand.go { animation: hw-grab 2.6s ease-out forwards; }
@keyframes hw-grab {
  0% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-220px) rotate(-8deg); }
  40% { transform: translateY(-205px) rotate(8deg); }
  55% { transform: translateY(-215px) rotate(-8deg); }
  70% { transform: translateY(-205px) rotate(6deg); }
  100% { transform: translateY(20px) rotate(0); }
}

@media (max-width: 700px) {
  .hw-moon { width: 70px; height: 70px; }
  .hw-web { width: 70px; height: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-fog, .hw-bat svg { animation: none; }
}