/* davecooper.name skin: halloween -- over the top on purpose
   (2026-10-04).  Every rule is scoped under
   :root[data-skin="halloween"]; the structure is css/style.css and
   what a skin may do is in source/skins.lisp.

   Two moods, following the reader's light/dark switch: dusk (light:
   a pumpkin-patch sunset) and midnight (dark: purple-black, stars,
   lightning).  Whatever differs between them is a custom property,
   set in the three token blocks at the top; the rest of the sheet
   reads the properties and is written once.

   The decoration layer (.dc-decor, eight <i>): 1 and 2 the cobwebs in
   the top corners, 3 a spider on its thread, 4 to 6 bats crossing, 7 a
   ghost rising, 8 the jack-o'-lantern in the corner; ::before is the
   lightning, ::after the ground fog.  All of it sits behind the text
   and takes no clicks.  prefers-reduced-motion stills everything.

   The display face is Creepster (Font Diner, SIL OFL 1.1: licence in
   creepster-OFL.txt), served from this directory. */

@font-face {
  font-family: "Creepster";
  src: url("creepster.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---- tokens: dusk ---- */
:root[data-skin="halloween"] {
  --bg: #ffdcae;
  --bg-card: #fff1dc;
  --ink: #2a1136;
  --ink-soft: #6d4a63;
  --accent: #5b1a8c;
  --accent-soft: #c2410c;
  --rule: #e6a15c;
  --pill: #ffc988;
  --pill-on: #2a1136;
  --pill-on-ink: #ffa436;
  --gloss: #7c2d12;
  --warn: #b00020;

  --hw-sky: linear-gradient(180deg, #5b2a86 0%, #c2410c 30%, #ff9a3c 55%, #ffdcae 100%);
  --hw-sky-size: 100% 17rem;
  --hw-header-ink: #fff1dc;
  --hw-nav-ink: #fff1dc;
  --hw-bat-opacity: .5;
  --hw-stars: none;
  --hw-moon: radial-gradient(circle at 50% 50%, #fff3c4 0 58%, #ffb347 60% 66%, transparent 68%);
  --hw-glow: rgba(194, 65, 12, .55);
  --hw-slime: #4d7c0f;
  --hw-flash: 0;
  --hw-fog: rgba(91, 26, 140, .16);
  --hw-bat-shadow: none;
  --hw-display: "Creepster", "Chiller", "Luminari", "Papyrus", fantasy;
}
/* ---- tokens: midnight ---- */
@media (prefers-color-scheme: dark) {
  :root[data-skin="halloween"]:not([data-theme="light"]) {
    --bg: #0c0613;
    --bg-card: #190d26;
    --ink: #f1e6d0;
    --ink-soft: #b7a3c8;
    --accent: #ff7a18;
    --accent-soft: #8be04e;
    --rule: #3b1f55;
    --pill: #26133a;
    --pill-on: #ff7a18;
    --pill-on-ink: #140a1f;
    --gloss: #c9a0ff;
    --warn: #ff4d4d;

    --hw-sky: linear-gradient(180deg, #1c0b33 0%, #0c0613 100%);
    --hw-sky-size: 100% 30rem;
    --hw-stars:
      radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 28% 62%, #ffe9b0 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 44% 30%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 61% 74%, #cfd8ff 50%, transparent 51%),
      radial-gradient(2px 2px at 73% 22%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 86% 55%, #ffe9b0 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 95% 12%, #fff 50%, transparent 51%);
    --hw-moon: radial-gradient(circle at 50% 50%, #fff8d6 0 58%, rgba(255, 233, 150, .35) 60% 80%, transparent 82%);
    --hw-glow: rgba(255, 122, 24, .75);
    --hw-slime: #6fd13a;
    --hw-flash: .14;
    --hw-fog: rgba(190, 160, 255, .13);
    --hw-bat-shadow: drop-shadow(0 0 4px rgba(255, 122, 24, .85));
    --hw-header-ink: #ff7a18;
    --hw-nav-ink: #8be04e;
    --hw-bat-opacity: 1;
  }
}
:root[data-skin="halloween"][data-theme="dark"] {
  --bg: #0c0613;
  --bg-card: #190d26;
  --ink: #f1e6d0;
  --ink-soft: #b7a3c8;
  --accent: #ff7a18;
  --accent-soft: #8be04e;
  --rule: #3b1f55;
  --pill: #26133a;
  --pill-on: #ff7a18;
  --pill-on-ink: #140a1f;
  --gloss: #c9a0ff;
  --warn: #ff4d4d;

  --hw-sky: linear-gradient(180deg, #1c0b33 0%, #0c0613 100%);
  --hw-sky-size: 100% 30rem;
  --hw-stars:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 62%, #ffe9b0 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 30%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 61% 74%, #cfd8ff 50%, transparent 51%),
    radial-gradient(2px 2px at 73% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 55%, #ffe9b0 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 95% 12%, #fff 50%, transparent 51%);
  --hw-moon: radial-gradient(circle at 50% 50%, #fff8d6 0 58%, rgba(255, 233, 150, .35) 60% 80%, transparent 82%);
  --hw-glow: rgba(255, 122, 24, .75);
  --hw-slime: #6fd13a;
  --hw-flash: .14;
  --hw-fog: rgba(190, 160, 255, .13);
  --hw-bat-shadow: drop-shadow(0 0 4px rgba(255, 122, 24, .85));
  --hw-header-ink: #ff7a18;
  --hw-nav-ink: #8be04e;
  --hw-bat-opacity: 1;
}

/* ---- the sky ---- */
:root[data-skin="halloween"] body {
  background-color: var(--bg);
  background-image: var(--hw-stars), var(--hw-sky);
  background-size: 420px 300px, var(--hw-sky-size);
  background-repeat: repeat, no-repeat;
  background-attachment: fixed, scroll;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 64 56'%3E%3Cellipse cx='32' cy='32' rx='28' ry='22' fill='%23ff7a18' stroke='%237c2d12' stroke-width='3'/%3E%3Crect x='29' y='3' width='6' height='10' fill='%233f6212'/%3E%3Cpath d='M18 27 L24 18 L28 29 Z M46 27 L40 18 L36 29 Z M16 37 Q32 52 48 37 L43 39 L39 35 L35 41 L32 36 L29 41 L25 35 L21 39 Z' fill='%232a0a00'/%3E%3C/svg%3E") 14 14, auto;
}
:root[data-skin="halloween"] ::selection { background: #b00020; color: #fff; }

/* the page's parts above the decoration layer */
:root[data-skin="halloween"] .dc-header,
:root[data-skin="halloween"] .dc-main,
:root[data-skin="halloween"] .dc-footer { position: relative; z-index: 1; }

/* ---- type ---- */
:root[data-skin="halloween"] h1,
:root[data-skin="halloween"] h2,
:root[data-skin="halloween"] .dc-brand {
  font-family: var(--hw-display);
  font-weight: 400;
  letter-spacing: .04em;
}
:root[data-skin="halloween"] h1 {
  font-size: 3rem;
  line-height: 1.05;
  color: var(--accent);
  text-shadow: 0 0 .35em var(--hw-glow), .06em .08em 0 rgba(0, 0, 0, .45);
  animation: hw-flicker 5.5s infinite;
}
:root[data-skin="halloween"] h2 {
  font-size: 1.7rem;
  text-shadow: 0 0 .5em var(--hw-glow);
}
/* a bat before every section heading */
:root[data-skin="halloween"] h2::before {
  content: "";
  display: inline-block;
  width: 1.5em;
  height: .75em;
  margin-right: .35em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath fill='%23ff7a18' d='M32 10C30 4 27 3 26 0c-1 4-2 6-4 7C16 2 8 3 0 10c5 0 8 2 10 6 3-3 7-3 9 1 3-3 7-2 9 3 1 4 3 6 4 10 1-4 3-6 4-10 2-5 6-6 9-3 2-4 6-4 9-1 2-4 5-6 10-6C56 3 48 2 42 7c-2-1-3-3-4-7-1 3-4 4-6 10z'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root[data-skin="halloween"] .dc-brand { font-size: 1.45rem; color: var(--hw-header-ink); text-shadow: 0 0 .5em var(--hw-glow); }
:root[data-skin="halloween"] .dc-nav a { color: var(--hw-nav-ink); }
:root[data-skin="halloween"] .dc-subtitle { font-style: italic; }
:root[data-skin="halloween"] a { color: var(--accent-soft); text-decoration-style: wavy; text-decoration-thickness: 1px; }
:root[data-skin="halloween"] a:hover { color: var(--accent); text-shadow: 0 0 .6em var(--hw-glow); }
:root[data-skin="halloween"] .dc-brand,
:root[data-skin="halloween"] .dc-nav a { text-decoration: none; }

/* ---- the header drips slime ---- */
:root[data-skin="halloween"] .dc-header { border-bottom: 5px solid var(--hw-slime); }
:root[data-skin="halloween"] .dc-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 34px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 100% at 50% 0, var(--hw-slime) 0 97%, transparent 100%) 0 0 / 97px 30px repeat-x,
    radial-gradient(ellipse 50% 100% at 50% 0, var(--hw-slime) 0 97%, transparent 100%) 31px 0 / 53px 17px repeat-x,
    radial-gradient(ellipse 50% 100% at 50% 0, var(--hw-slime) 0 97%, transparent 100%) 11px 0 / 23px 9px repeat-x;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}
:root[data-skin="halloween"] .dc-main { padding-top: 3rem; }

/* ---- lists: a pumpkin for a bullet ---- */
:root[data-skin="halloween"] .dc-sections li {
  position: relative;
  padding-left: 1.9rem;
}
:root[data-skin="halloween"] .dc-sections li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  width: 1.3rem;
  height: 1.15rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 56'%3E%3Cellipse cx='32' cy='32' rx='28' ry='22' fill='%23ff7a18'/%3E%3Cellipse cx='32' cy='32' rx='13' ry='22' fill='none' stroke='%23c2410c' stroke-width='2.5'/%3E%3Crect x='29' y='3' width='6' height='10' rx='2' fill='%233f6212'/%3E%3Cpath d='M18 27 L24 18 L28 29 Z M46 27 L40 18 L36 29 Z M16 37 Q32 52 48 37 L43 39 L39 35 L35 41 L32 36 L29 41 L25 35 L21 39 Z' fill='%23ffe066'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s;
}
:root[data-skin="halloween"] .dc-sections li:hover::before { transform: rotate(-18deg) scale(1.25); }
:root[data-skin="halloween"] .dc-group { color: var(--accent); letter-spacing: .14em; }

/* cards and pills pick up a glow */
:root[data-skin="halloween"] .phj-songs li a,
:root[data-skin="halloween"] .skt-lesson,
:root[data-skin="halloween"] .skt-cell { box-shadow: 0 0 0 1px var(--rule), 0 0 14px -4px var(--hw-glow); }
:root[data-skin="halloween"] .dc-stamp { border-style: dashed; border-color: var(--accent); color: var(--accent); }

/* ---- the footer: candy corn, tombstones, a blood-red odometer ---- */
:root[data-skin="halloween"] .dc-footer {
  margin-top: 2rem;
  padding-top: 3.4rem;
  border-top: 8px solid;
  border-image: repeating-linear-gradient(90deg, #ff7a18 0 14px, #ffd43b 14px 28px, #fff 28px 42px) 8;
}
:root[data-skin="halloween"] .dc-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 40'%3E%3Cg fill='%236b5a7a'%3E%3Cpath d='M12 40V17Q12 4 25 4t13 13v23z'/%3E%3Cpath d='M72 40V20h7v-9h8v9h7v20z' transform='rotate(-6 83 40)'/%3E%3Cpath d='M112 40V22q0-10 10-10t10 10v18z' transform='rotate(5 122 40)'/%3E%3C/g%3E%3Cpath d='M19 18h12M25 13v14' stroke='%232a1136' stroke-width='2.5'/%3E%3C/svg%3E") left bottom / 150px 40px repeat-x;
  opacity: .9;
}
:root[data-skin="halloween"] .dc-counter-label { font-size: 0; }
:root[data-skin="halloween"] .dc-counter-label::after {
  content: "Souls lured here";
  font-family: var(--hw-display);
  font-size: 1.05rem;
  letter-spacing: .08em;
  text-transform: none;
  color: var(--accent);
}
:root[data-skin="halloween"] .dc-digit {
  position: relative;
  font-family: var(--hw-display);
  font-size: 1.25rem;
  font-weight: 400;
  color: #ff2b2b;
  background: #0a0408;
  border: 1px solid #5a0c0c;
  border-radius: .15rem .15rem .5rem .5rem;
  text-shadow: 0 0 .5em #ff2b2b;
  box-shadow: inset 0 -6px 8px -6px #b00020;
}
/* the digits bleed */
:root[data-skin="halloween"] .dc-digit:nth-child(odd)::after {
  content: "";
  position: absolute;
  left: 45%;
  top: 100%;
  width: 4px;
  height: 9px;
  border-radius: 0 0 4px 4px;
  background: #b00020;
  animation: hw-drip 3.8s ease-in infinite;
}
:root[data-skin="halloween"] .dc-digit:nth-child(3)::after { animation-delay: 1.3s; }
:root[data-skin="halloween"] .dc-digit:nth-child(5)::after { animation-delay: 2.4s; }
:root[data-skin="halloween"] .dc-skins-label { font-size: 0; }
:root[data-skin="halloween"] .dc-skins-label::after {
  content: "Costume";
  font-size: .7rem;
}

/* ---- the decoration layer ---- */
:root[data-skin="halloween"] .dc-decor {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
:root[data-skin="halloween"] .dc-decor i { position: absolute; display: block; }

/* the moon, top left, behind everything */
:root[data-skin="halloween"] body::before {
  content: "";
  position: fixed;
  left: 3vw;
  top: 4.5rem;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  background: var(--hw-moon);
  opacity: .85;
  z-index: 0;
  pointer-events: none;
  animation: hw-bob 11s ease-in-out infinite;
}

/* lightning (midnight only: --hw-flash is 0 at dusk) */
:root[data-skin="halloween"] .dc-decor::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #e9e4ff;
  opacity: 0;
  animation: hw-lightning 23s linear infinite;
}
/* ground fog */
:root[data-skin="halloween"] .dc-decor::after {
  content: "";
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: 0;
  height: 11rem;
  background:
    radial-gradient(ellipse 30% 60% at 20% 100%, var(--hw-fog) 0, transparent 70%),
    radial-gradient(ellipse 35% 70% at 55% 100%, var(--hw-fog) 0, transparent 70%),
    radial-gradient(ellipse 30% 55% at 85% 100%, var(--hw-fog) 0, transparent 70%),
    linear-gradient(0deg, var(--hw-fog), transparent);
  animation: hw-fog 31s ease-in-out infinite alternate;
}

/* 1, 2: cobwebs in the top corners */
:root[data-skin="halloween"] .dc-decor i:nth-child(1),
:root[data-skin="halloween"] .dc-decor i:nth-child(2) {
  top: 0;
  width: 13rem;
  height: 13rem;
  opacity: .75;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%239a8fa8' stroke-width='1.6'%3E%3Cpath d='M0 0L200 0M0 0L185 77M0 0L141 141M0 0L77 185M0 0L0 200'/%3E%3Cpath d='M60 0Q51 10 55 23Q43 29 42 42Q29 43 23 55Q10 51 0 60'/%3E%3Cpath d='M110 0Q93 18 102 42Q79 53 78 78Q53 79 42 102Q18 93 0 110'/%3E%3Cpath d='M160 0Q136 27 148 61Q115 77 113 113Q77 115 61 148Q27 136 0 160'/%3E%3C/svg%3E") left top / contain no-repeat;
}
:root[data-skin="halloween"] .dc-decor i:nth-child(1) { left: 0; }
:root[data-skin="halloween"] .dc-decor i:nth-child(2) { right: 0; transform: scaleX(-1); }

/* 3: a spider on its thread */
:root[data-skin="halloween"] .dc-decor i:nth-child(3) {
  top: 0;
  right: 14vw;
  width: 2px;
  height: 22vh;
  background: linear-gradient(#9a8fa8, #9a8fa8);
  opacity: .9;
  animation: hw-spider 9s ease-in-out infinite;
}
:root[data-skin="halloween"] .dc-decor i:nth-child(3)::after {
  content: "";
  position: absolute;
  left: -19px;
  top: 100%;
  width: 40px;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='%231a0f1f' stroke-width='2' fill='none' stroke-linecap='round'%3E%3Cpath d='M14 18L4 10M13 22L2 22M14 26L4 34M15 29L9 39M26 18L36 10M27 22L38 22M26 26L36 34M25 29L31 39'/%3E%3C/g%3E%3Ccircle cx='20' cy='24' r='8.5' fill='%231a0f1f'/%3E%3Ccircle cx='20' cy='13' r='5' fill='%231a0f1f'/%3E%3Ccircle cx='18' cy='12' r='1.3' fill='%23ff2b2b'/%3E%3Ccircle cx='22' cy='12' r='1.3' fill='%23ff2b2b'/%3E%3Cpath d='M17 24l3 4 3-4-3-4z' fill='%23b00020'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: var(--hw-bat-shadow);
}

/* 4, 5, 6: bats crossing; the element flies, its ::before flaps */
:root[data-skin="halloween"] .dc-decor i:nth-child(4),
:root[data-skin="halloween"] .dc-decor i:nth-child(5),
:root[data-skin="halloween"] .dc-decor i:nth-child(6) {
  left: -12vw;
  width: 4.5rem;
  height: 2.25rem;
  animation: hw-fly 17s linear infinite;
}
:root[data-skin="halloween"] .dc-decor i:nth-child(4) { top: 16vh; }
:root[data-skin="halloween"] .dc-decor i:nth-child(5) { top: 38vh; width: 3rem; height: 1.5rem; animation-duration: 23s; animation-delay: -9s; }
:root[data-skin="halloween"] .dc-decor i:nth-child(6) { top: 62vh; width: 5.5rem; height: 2.75rem; animation-duration: 13s; animation-delay: -4s; animation-direction: reverse; }
:root[data-skin="halloween"] .dc-decor i:nth-child(4)::before,
:root[data-skin="halloween"] .dc-decor i:nth-child(5)::before,
:root[data-skin="halloween"] .dc-decor i:nth-child(6)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath fill='%23120818' d='M32 10C30 4 27 3 26 0c-1 4-2 6-4 7C16 2 8 3 0 10c5 0 8 2 10 6 3-3 7-3 9 1 3-3 7-2 9 3 1 4 3 6 4 10 1-4 3-6 4-10 2-5 6-6 9-3 2-4 6-4 9-1 2-4 5-6 10-6C56 3 48 2 42 7c-2-1-3-3-4-7-1 3-4 4-6 10z'/%3E%3Ccircle cx='29.5' cy='9' r='1.2' fill='%23ff2b2b'/%3E%3Ccircle cx='34.5' cy='9' r='1.2' fill='%23ff2b2b'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: var(--hw-bat-shadow);
  opacity: var(--hw-bat-opacity);
  animation: hw-flap .32s ease-in-out infinite alternate;
}

/* 7: a ghost rising */
:root[data-skin="halloween"] .dc-decor i:nth-child(7) {
  left: 6vw;
  bottom: -6rem;
  width: 4rem;
  height: 4.8rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath d='M20 2C9 2 4 11 4 22v24l6-6 5 6 5-6 5 6 5-6 6 6V22C36 11 31 2 20 2z' fill='%23fff' stroke='%232a1136' stroke-width='1.5'/%3E%3Ccircle cx='14' cy='20' r='3' fill='%232a1136'/%3E%3Ccircle cx='26' cy='20' r='3' fill='%232a1136'/%3E%3Cellipse cx='20' cy='31' rx='3' ry='4.5' fill='%232a1136'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: hw-ghost 19s ease-in-out infinite;
}

/* 8: the jack-o'-lantern in the corner */
:root[data-skin="halloween"] .dc-decor i:nth-child(8) {
  right: 2vw;
  bottom: 1rem;
  width: 6.5rem;
  height: 5.7rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 56'%3E%3Cellipse cx='32' cy='32' rx='28' ry='22' fill='%23ff7a18'/%3E%3Cellipse cx='32' cy='32' rx='20' ry='22' fill='none' stroke='%23c2410c' stroke-width='1.6'/%3E%3Cellipse cx='32' cy='32' rx='10' ry='22' fill='none' stroke='%23c2410c' stroke-width='1.6'/%3E%3Cpath d='M29 12q-1-8 5-10l3 2q-4 2-2 8z' fill='%233f6212'/%3E%3Cpath d='M18 27 L24 18 L28 29 Z M46 27 L40 18 L36 29 Z M30 33l2-4 2 4z M16 37 Q32 52 48 37 L43 39 L39 35 L35 41 L32 36 L29 41 L25 35 L21 39 Z' fill='%23ffe066'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 12px var(--hw-glow));
  animation: hw-lantern 2.7s ease-in-out infinite;
}

/* ---- narrow screens: the text has no margins to spare ---- */
@media (max-width: 900px) {
  :root[data-skin="halloween"] h1 { font-size: 2.4rem; }
  :root[data-skin="halloween"] .dc-brand { font-size: 1.1rem; white-space: nowrap; }
  /* the ghost is opaque and would pass behind the text */
  :root[data-skin="halloween"] .dc-decor i:nth-child(7) { display: none; }
  :root[data-skin="halloween"] body::before { width: 4rem; height: 4rem; left: auto; right: 4vw; top: 5.5rem; opacity: .5; }
  :root[data-skin="halloween"] .dc-decor i:nth-child(1),
  :root[data-skin="halloween"] .dc-decor i:nth-child(2) { width: 6rem; height: 6rem; opacity: .5; }
  :root[data-skin="halloween"] .dc-decor i:nth-child(8) { width: 3rem; height: 2.6rem; bottom: .4rem; opacity: .8; }
  :root[data-skin="halloween"] .dc-decor i:nth-child(3) { right: 6vw; }
}

/* ---- motion ---- */
@keyframes hw-flicker {
  0%, 19%, 23%, 61%, 65%, 100% { opacity: 1; text-shadow: 0 0 .35em var(--hw-glow), .06em .08em 0 rgba(0, 0, 0, .45); }
  21%, 63% { opacity: .72; text-shadow: none; }
}
@keyframes hw-drip {
  0% { height: 0; opacity: 1; transform: translateY(0); }
  55% { height: 9px; opacity: 1; transform: translateY(0); }
  100% { height: 6px; opacity: 0; transform: translateY(16px); }
}
@keyframes hw-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(.6rem); }
}
@keyframes hw-lightning {
  0%, 1.2%, 2.4%, 100% { opacity: 0; }
  .5%, 1.8% { opacity: var(--hw-flash); }
}
@keyframes hw-fog {
  from { transform: translateX(-12%); }
  to { transform: translateX(12%); }
}
@keyframes hw-spider {
  0%, 100% { height: 14vh; }
  45%, 60% { height: 52vh; }
}
@keyframes hw-fly {
  0% { transform: translate(0, 0); }
  25% { transform: translate(31vw, -9vh); }
  50% { transform: translate(62vw, 5vh); }
  75% { transform: translate(93vw, -6vh); }
  100% { transform: translate(126vw, 3vh); }
}
@keyframes hw-flap {
  from { transform: scaleY(1); }
  to { transform: scaleY(.45); }
}
@keyframes hw-ghost {
  0% { transform: translate(0, 0) rotate(-6deg); opacity: 0; }
  12% { opacity: .85; }
  50% { transform: translate(4vw, -55vh) rotate(7deg); opacity: .7; }
  88% { opacity: .35; }
  100% { transform: translate(-1vw, -115vh) rotate(-5deg); opacity: 0; }
}
@keyframes hw-lantern {
  0%, 100% { transform: rotate(-3deg); filter: drop-shadow(0 0 12px var(--hw-glow)); }
  50% { transform: rotate(3deg) translateY(-3px); filter: drop-shadow(0 0 22px var(--hw-glow)); }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-skin="halloween"] *,
  :root[data-skin="halloween"] *::before,
  :root[data-skin="halloween"] *::after,
  :root[data-skin="halloween"] body::before { animation: none !important; }
  :root[data-skin="halloween"] .dc-decor i:nth-child(4),
  :root[data-skin="halloween"] .dc-decor i:nth-child(5),
  :root[data-skin="halloween"] .dc-decor i:nth-child(6) { left: auto; right: 24vw; }
  :root[data-skin="halloween"] .dc-decor i:nth-child(7) { bottom: 2rem; opacity: .6; }
}

@media print {
  :root[data-skin="halloween"] body { background: #fff; }
  :root[data-skin="halloween"] h1,
  :root[data-skin="halloween"] h2 { animation: none; text-shadow: none; color: #000; }
}