/* Halloween on the homepage, drawn like a search-engine doodle (turned on by halloween.js around October 31) */
body.halloween {
  --bg-glow-1: rgba(124, 58, 237, 0.16);
  --bg-glow-2: rgba(255, 127, 78, 0.2);
  --bg-glow-3: rgba(255, 211, 107, 0.18);
  --firefly: rgba(255, 150, 60, 0.7);
  --night: #3a2a52;
  --night-far: rgba(120, 98, 160, 0.28);
  --rim: transparent;
  --stone: #5a487c;
  --engrave: rgba(255, 255, 255, 0.45);
  --hat: #2b1f3d;
  --bat: #2b1f3d;
  --ghost: #ffffff;
  --ghost-line: rgba(58, 42, 82, 0.3);
  --ghost-ink: #2b1f3d;
  --star: #e0a63f;
  --mist: rgba(255, 255, 255, 0.4);
  --moon-glow: rgba(255, 210, 130, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.halloween {
    --bg-glow-1: rgba(124, 58, 237, 0.24);
    --bg-glow-2: rgba(255, 127, 78, 0.14);
    --bg-glow-3: rgba(124, 58, 237, 0.12);
    --night: #2e2245;
    --night-far: rgba(70, 52, 104, 0.45);
    --rim: rgba(255, 214, 140, 0.28);
    --stone: #3b2e57;
    --engrave: rgba(255, 255, 255, 0.24);
    --hat: #3a2858;
    --bat: #2a1e3c;
    --ghost: #f1ecff;
    --ghost-line: transparent;
    --ghost-ink: #1a1124;
    --star: #fff3d1;
    --mist: rgba(190, 178, 232, 0.16);
    --moon-glow: rgba(255, 210, 130, 0.3);
  }
}
:root[data-theme="dark"] body.halloween {
  --bg-glow-1: rgba(124, 58, 237, 0.24);
  --bg-glow-2: rgba(255, 127, 78, 0.14);
  --bg-glow-3: rgba(124, 58, 237, 0.12);
  --night: #2e2245;
  --night-far: rgba(70, 52, 104, 0.45);
  --rim: rgba(255, 214, 140, 0.28);
  --stone: #3b2e57;
  --engrave: rgba(255, 255, 255, 0.24);
  --hat: #3a2858;
  --bat: #2a1e3c;
  --ghost: #f1ecff;
  --ghost-line: transparent;
  --ghost-ink: #1a1124;
  --star: #fff3d1;
  --mist: rgba(190, 178, 232, 0.16);
  --moon-glow: rgba(255, 210, 130, 0.3);
}

/* The scene: moon, sky (stars and bats), ground (hill, tree, graves, pumpkins), mist, then the fox on top */
.doodle {
  position: relative;
  width: min(520px, calc(100vw - 32px));
  aspect-ratio: 480 / 220;
  margin: 0 auto 6px;
  animation: hw-fade 0.9s ease-out both;
}
.doodle > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.doodle .ground {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(#000 93%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(#000 93%, transparent);
  mask-composite: intersect;
}
@keyframes hw-fade { from { opacity: 0; } }

.doodle .moon {
  position: absolute;
  left: 54.6%;
  top: 41%;
  width: 27.5%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fffdf4, #fff1c8 52%, #f0d697);
  box-shadow: 0 0 40px 10px var(--moon-glow), 0 0 110px 36px var(--moon-glow);
  cursor: pointer;
  transition: scale 0.3s var(--ease-spring);
  animation: moon-rise 1.6s var(--ease-out) both, moon-glow 6s ease-in-out 1.6s infinite;
}
.doodle .moon:hover { scale: 1.04; }
.doodle .moon::before, .doodle .moon::after { content: ""; position: absolute; border-radius: 50%; background: rgba(206, 168, 96, 0.26); }
.doodle .moon::before { width: 20%; height: 20%; top: 22%; left: 56%; }
.doodle .moon::after { width: 13%; height: 13%; top: 60%; left: 28%; }
@keyframes moon-rise { from { opacity: 0; transform: translateY(30px); } }
@keyframes moon-glow { 50% { box-shadow: 0 0 56px 16px var(--moon-glow), 0 0 150px 52px var(--moon-glow); } }

.doodle .star { fill: var(--star); transform-box: fill-box; transform-origin: center; animation: twinkle 3.2s ease-in-out infinite; }
.doodle g:nth-child(2n) > .star { animation-delay: -1.1s; animation-duration: 2.6s; }
.doodle g:nth-child(3n) > .star { animation-delay: -2.2s; animation-duration: 3.8s; }
@keyframes twinkle { 50% { transform: scale(0.45) rotate(45deg); opacity: 0.45; } }

.hw-bat { fill: var(--bat); }
.hw-bat .bat-eye { fill: #ffd36b; }
.hw-bat .wing { transform-box: fill-box; animation: flap 0.2s ease-in-out infinite alternate; }
.hw-bat .wing.l { transform-origin: 100% 60%; }
.hw-bat .wing.r { transform-origin: 0% 60%; }
.doodle .sky .hw-bat { filter: drop-shadow(0 0 2px var(--moon-glow)); }
@keyframes flap { to { transform: scaleY(-0.4); } }

.doodle .far { fill: var(--night-far); }
.doodle .hill { fill: var(--night); stroke: var(--rim); stroke-width: 1.2; }
.doodle .trunk { fill: var(--night); }
.doodle .branch { fill: none; stroke: var(--night); stroke-linecap: round; }
.doodle .stone { fill: var(--stone); }
.doodle .cross { fill: none; stroke: var(--stone); stroke-width: 4; stroke-linecap: round; }
.doodle .stone-text { fill: var(--engrave); font: 700 8px var(--font-display); letter-spacing: 0.08em; text-anchor: middle; }
.doodle .graves, .doodle .gpk { cursor: pointer; }

/* A spider bobs on its thread from the tree */
.doodle .thread { fill: none; stroke: var(--night); stroke-width: 1; transform-box: fill-box; transform-origin: top; animation: thread-stretch 3.6s ease-in-out infinite alternate; }
.doodle .spider-body { fill: var(--night); animation: spider-bob 3.6s ease-in-out infinite alternate; }
.doodle .spider-body .legs { fill: none; stroke: var(--night); stroke-width: 1.4; stroke-linecap: round; }
@keyframes thread-stretch { to { transform: scaleY(1.6); } }
@keyframes spider-bob { to { transform: translateY(9.6px); } }

/* A ghost peeks out from behind the gravestone now and then, and right away if you click the graves */
.doodle .ghost { transform-box: fill-box; transform-origin: 50% 100%; animation: ghost-peek 9s ease-in-out 2.5s infinite; }
.doodle .ghost.boo { animation: ghost-boo 1.3s var(--ease-spring); }
.doodle .ghost-body { fill: var(--ghost); stroke: var(--ghost-line); stroke-width: 1; }
.doodle .ghost-eye { fill: var(--ghost-ink); transform-box: fill-box; transform-origin: center; animation: blink 4s infinite; }
@keyframes ghost-peek {
  0%, 50%, 86%, 100% { transform: none; }
  58% { transform: translateY(-22px) rotate(-5deg); }
  68% { transform: translateY(-20px) rotate(5deg); }
  78% { transform: translateY(-22px) rotate(-2deg); }
}
@keyframes ghost-boo { 0%, 100% { transform: none; } 30% { transform: translateY(-36px) scale(1.15); } 70% { transform: translateY(-32px) rotate(4deg); } }
@keyframes blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.1); } }

.doodle .mist { position: absolute; bottom: 0; width: 60%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, var(--mist), transparent); filter: blur(4px); pointer-events: none; animation: mist-drift 14s ease-in-out infinite alternate; }
.doodle .mist.a { left: 4%; }
.doodle .mist.b { right: 9%; bottom: -3%; animation-duration: 18s; animation-direction: alternate-reverse; }
@keyframes mist-drift { from { transform: translateX(-6%); } to { transform: translateX(8%); } }

/* The fox stands on the hill in a witch's hat */
.doodle .hero-fox { position: absolute; left: 50%; bottom: 14.5%; width: 30%; margin: 0; translate: -50% 0; }
body.halloween .hero-fox .body { position: relative; }
.witch-hat { position: absolute; left: -8%; top: -27%; width: 44%; transform: rotate(-16deg); transform-origin: 50% 90%; animation: hat-on 0.9s var(--ease-spring) 1.1s both; }
.witch-hat svg { display: block; width: 100%; overflow: visible; }
.witch-hat .hat-fill { fill: var(--hat); }
.witch-hat .hat-shine { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 3; stroke-linecap: round; }
.witch-hat .hat-band { fill: #ff7f4e; }
.witch-hat .hat-buckle { fill: none; stroke: #ffd36b; stroke-width: 2.4; }
.witch-hat .hat-brim-top { fill: rgba(255, 255, 255, 0.08); }
.witch-hat .hat-star { fill: #ffd36b; transform-box: fill-box; transform-origin: center; animation: twinkle 2.4s ease-in-out infinite; }
@keyframes hat-on { from { opacity: 0; transform: translateY(-60px) rotate(-40deg); } to { opacity: 1; transform: rotate(-16deg); } }

/* Pumpkins: the o in Sorweb, two on the hill and the chip icon */
.pk-stem { fill: #4f7a3a; }
.pk-vine { fill: none; stroke: #6a9a4c; stroke-width: 3; stroke-linecap: round; }
.pk-side { fill: #e0622f; }
.pk-mid { fill: #ff8547; }
.pk-rib { fill: none; stroke: rgba(140, 50, 15, 0.3); stroke-width: 2.2; }
.pk-face { fill: #ffd36b; filter: drop-shadow(0 0 4px #ffb347); animation: flicker 2.6s infinite; }
.doodle .pk-glow { fill: rgba(255, 170, 70, 0.5); filter: blur(5px); animation: flicker 2.6s infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; } 8% { opacity: 0.7; } 12% { opacity: 1; } 47% { opacity: 0.85; } 50% { opacity: 0.55; } 53% { opacity: 1; } 78% { opacity: 0.9; } }

.hero .logo .word .ch.pumpkin { width: 0.82em; vertical-align: -0.06em; cursor: pointer; animation-name: letter-in, pumpkin-sway; animation-duration: 0.7s, 3.4s; animation-timing-function: var(--ease-spring), ease-in-out; animation-iteration-count: 1, infinite; animation-delay: calc(0.55s + var(--i) * 0.06s), 1.4s; animation-fill-mode: both, none; }
.ch.pumpkin svg { display: block; width: 100%; overflow: visible; }
.ch.pumpkin:hover .pk-face { fill: #fff1b0; }
@keyframes pumpkin-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-2px); } }

.chip-spooky { border-color: rgba(255, 127, 78, 0.45); }
.chip-spooky svg { width: 16px; height: 16px; flex: none; }

/* Click treats: candy from the pumpkins, a flock of bats from the moon */
.candy { position: fixed; z-index: 70; width: 12px; height: 14px; pointer-events: none; clip-path: polygon(50% 100%, 0 0, 100% 0); background: linear-gradient(#fff6e0 0 30%, #ff9a3c 30% 65%, #ffd36b 65%); animation: candy-fly 1.1s cubic-bezier(0.2, 0.7, 0.4, 1) forwards; }
@keyframes candy-fly { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }
.flock-bat { position: fixed; z-index: 70; width: var(--s); pointer-events: none; animation: flock 1.7s cubic-bezier(0.3, 0.6, 0.4, 1) both; }
.flock-bat svg { display: block; width: 100%; overflow: visible; filter: drop-shadow(0 0 3px var(--moon-glow)); }
@keyframes flock {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  12%, 80% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); opacity: 0; }
}

/* Keep the wordmark and byline snug under the scene */
body.halloween .hero .logo .word { margin: -4px 0 0.14em; }

/* The browser's stage turns to dusk for Halloween */
body.halloween {
  --sky-1: #2e2140;
  --sky-2: #c9714a;
  --hill-back: #5a487c;
  --hill-front: #2b1f3d;
  --cloud: rgba(255, 255, 255, 0.12);
  --sun-1: #fffaf0;
  --sun-2: #f1d9a0;
  --sun-glow: rgba(255, 214, 140, 0.4);
}