/* Halloween layer - active only while <html data-halloween="on"> (set by theme.js during Oct 1 - Nov 2, toggled by the pumpkin button).
   Outside the season nothing here applies. Safe to delete after the holiday along with halloween.js, the .hw-btn buttons and the halloween.* links. */
:root[data-halloween="on"] { --accent: #b84e08; --accent-soft: #d9650f; }
@media (prefers-color-scheme: dark) {
  :root[data-halloween="on"]:not([data-theme="light"]) { --accent: #ff8a2b; --accent-soft: #ffa24d; --bg: #0e0a10; --paper: #17111c; }
}
:root[data-halloween="on"][data-theme="dark"] { --accent: #ff8a2b; --accent-soft: #ffa24d; --bg: #0e0a10; --paper: #17111c; }

/* cobwebs in all four corners */
:root[data-halloween="on"]::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 6; opacity: .5;
  background-repeat: no-repeat; background-size: 120px 120px;
  background-position: top right, top left, bottom right, bottom left;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' fill='none' stroke='%239a96ad' stroke-width='1' stroke-linecap='round'%3E%3Cg%3E%3Cpath d='M150 0V150M150 0L0 0M150 0L20 70M150 0L55 125M150 0L100 150M150 0L0 28'/%3E%3Cpath d='M150 28Q122 28 122 0M150 58Q100 58 92 0M150 92Q76 92 60 0M150 126Q52 126 28 0'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' fill='none' stroke='%239a96ad' stroke-width='1' stroke-linecap='round'%3E%3Cg%20transform='matrix(-1%200%200%201%20150%200)'%3E%3Cpath d='M150 0V150M150 0L0 0M150 0L20 70M150 0L55 125M150 0L100 150M150 0L0 28'/%3E%3Cpath d='M150 28Q122 28 122 0M150 58Q100 58 92 0M150 92Q76 92 60 0M150 126Q52 126 28 0'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' fill='none' stroke='%239a96ad' stroke-width='1' stroke-linecap='round'%3E%3Cg%20transform='matrix(1%200%200%20-1%200%20150)'%3E%3Cpath d='M150 0V150M150 0L0 0M150 0L20 70M150 0L55 125M150 0L100 150M150 0L0 28'/%3E%3Cpath d='M150 28Q122 28 122 0M150 58Q100 58 92 0M150 92Q76 92 60 0M150 126Q52 126 28 0'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' fill='none' stroke='%239a96ad' stroke-width='1' stroke-linecap='round'%3E%3Cg%20transform='matrix(-1%200%200%20-1%20150%20150)'%3E%3Cpath d='M150 0V150M150 0L0 0M150 0L20 70M150 0L55 125M150 0L100 150M150 0L0 28'/%3E%3Cpath d='M150 28Q122 28 122 0M150 58Q100 58 92 0M150 92Q76 92 60 0M150 126Q52 126 28 0'/%3E%3C/g%3E%3C/svg%3E");
}
@media (max-width: 640px) { :root[data-halloween="on"]::before { background-size: 80px 80px; } }

/* a bat flits across now and then */
:root[data-halloween="on"]::after {
  content: ""; position: fixed; top: 90px; left: -60px; width: 44px; height: 22px; pointer-events: none; z-index: 6; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 22' fill='%23221a2e'%3E%3Cpath d='M22 6C20 2 15 0 8 1 5 1.5 2 3 0 6c3-1 6-.5 8 1.5-1 1-1.5 2.500-1.500 4 2-1.500 4.500-2 7-1.500 1.500 2 3.500 4.500 8.500 10.500 5-6 7-8.500 8.500-10.500 2.500-.5 5 0 7 1.500 0-1.500-.5-3-1.500-4 2-2 5-2.500 8-1.500-2-3-5-4.500-8-5-7-1-12 1-14 5z'/%3E%3C/svg%3E") no-repeat center / contain;
}
:root[data-halloween="on"][data-theme="dark"]::after { filter: invert(1) brightness(.55); }
@media (prefers-color-scheme: dark) { :root[data-halloween="on"]:not([data-theme="light"])::after { filter: invert(1) brightness(.55); } }
@media (prefers-reduced-motion: no-preference) {
  :root[data-halloween="on"]::after { animation: bb-bat 26s ease-in-out 4s infinite; }
  :root[data-halloween="on"] .wordmark b { animation: bb-flicker 5s steps(1) infinite; }
}
@keyframes bb-bat {
  0% { left: -60px; top: 90px; opacity: 0; transform: scaleY(1); } 3% { opacity: .85; }
  10% { top: 60px; transform: scaleY(.6); } 17% { top: 100px; transform: scaleY(1); }
  24% { top: 55px; transform: scaleY(.6); } 31% { top: 85px; transform: scaleY(1); }
  36% { left: calc(100vw + 60px); top: 50px; opacity: .85; } 37%, 100% { left: calc(100vw + 60px); opacity: 0; }
}
@keyframes bb-flicker { 0%, 100%, 91%, 93%, 96% { opacity: 1; } 92% { opacity: .55; } 95% { opacity: .7; } }

:root[data-halloween="on"] footer::after {
  content: "happy halloween \2014  don't feed the bots after midnight"; flex-basis: 100%;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--accent);
}
.hw-btn { display: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ink); background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .3s, color .3s, transform .4s cubic-bezier(.2,.8,.2,1); }
.hw-btn:hover { transform: rotate(-12deg) scale(1.06); }
:root[data-halloween="on"] .hw-btn { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-hw-season] .hw-btn { display: grid; }