/* Halloween sprites by Lewis Pixels (Bryan, Oct 31). Markup and timing: halloween.js. The pirate's
   hat peeks over the job board's first notice and the ghost's hem sticks out under the Community post
   box; hover, or tap on a phone, and the second frame pops out with the credit beside it. Pixel art
   at 2x, flat, the only motion a two-step hop that stays still when motion is off. */
.hw-sprite {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}
.hw-art,
.hw-frame {
  display: block;
}
.hw-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  -webkit-user-select: none;
  user-select: none;
}
.hw-dark,
.hw-up,
.hw-sprite.is-up .hw-down,
:root[data-theme='dark'] .hw-light {
  display: none;
}
.hw-sprite.is-up .hw-up.hw-light,
:root[data-theme='dark'] .hw-down.hw-dark,
:root[data-theme='dark'] .hw-sprite.is-up .hw-up.hw-dark {
  display: block;
}
:root[data-theme='dark'] .hw-sprite.is-up .hw-down.hw-dark,
:root[data-theme='dark'] .hw-sprite.is-up .hw-up.hw-light {
  display: none;
}
.hw-art {
  position: absolute;
  inset: 0;
}
.hw-hit {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.hw-hit:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.hw-sprite.is-up {
  z-index: 8;
}
.hw-sprite.is-up .hw-art,
.hw-sprite.is-up .hw-credit {
  pointer-events: auto;
}
.hw-credit {
  position: absolute;
  display: none;
  padding: 3px 7px;
  border: 2px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  font: 700 11px/1.3 'DM Sans', system-ui, sans-serif;
  white-space: nowrap;
  text-decoration: none;
}
.hw-credit:hover {
  text-decoration: underline;
}
.hw-sprite.is-up .hw-credit {
  display: block;
}
/* Popped out, they land over the page (the pirate's words over the filters, BOO over the tabs), so
   the frame gets a 4px edge in the page colour to keep the art readable. The pirate's goes up and
   sideways only: below him is the notice. */
.hw-ghost.is-up .hw-up {
  filter: drop-shadow(2px 0 0 var(--bg)) drop-shadow(-2px 0 0 var(--bg)) drop-shadow(0 2px 0 var(--bg)) drop-shadow(0 -2px 0 var(--bg))
    drop-shadow(2px 0 0 var(--bg)) drop-shadow(-2px 0 0 var(--bg)) drop-shadow(0 2px 0 var(--bg)) drop-shadow(0 -2px 0 var(--bg));
}
.hw-pirate.is-up .hw-up {
  filter: drop-shadow(2px 0 0 var(--bg)) drop-shadow(-2px 0 0 var(--bg)) drop-shadow(0 -2px 0 var(--bg)) drop-shadow(2px 0 0 var(--bg))
    drop-shadow(-2px 0 0 var(--bg)) drop-shadow(0 -2px 0 var(--bg));
}
@media (prefers-reduced-motion: no-preference) {
  .hw-sprite.is-up .hw-up {
    animation: hw-hop 0.16s steps(2, end);
  }
}
@keyframes hw-hop {
  from {
    transform: translateY(6px);
  }
  to {
    transform: none;
  }
}

/* The pirate: 104 x 82 art pixels, his bottom edge on the notice's top edge, the hat at the right. */
.hw-pirate {
  right: 10px;
  bottom: 100%;
  width: 208px;
  height: 164px;
}
.hw-pirate .hw-hit {
  top: 108px;
  left: 80px;
  width: 128px;
  height: 56px;
}
.hw-pirate .hw-credit {
  right: calc(100% + 2px);
  bottom: 8px;
}

/* The ghost: 77 x 78 art pixels; the hem's top row meets the post box's bottom edge, so he looks
   tucked under it. The slot cancels the box's gap and leaves room for the hem. */
.hw-slot {
  position: relative;
  height: 0;
  margin: -14px 0 40px;
}
.hw-ghost {
  top: -124px;
  left: 24px;
  width: 154px;
  height: 156px;
}
.hw-ghost .hw-hit {
  top: 124px;
  left: 30px;
  width: 84px;
  height: 32px;
}
.hw-ghost .hw-credit {
  left: calc(100% + 2px);
  bottom: 36px;
}
/* The pumpkins (pumpkin-1 to -3, 2x like the rest), each sitting on a box edge. */
.hw-perch {
  position: relative;
}
.hw-pumpkin {
  position: absolute;
  z-index: 2;
  line-height: 0;
  pointer-events: none;
}
.hw-pumpkin img {
  display: block;
  image-rendering: pixelated;
  -webkit-user-select: none;
  user-select: none;
}
/* Home on a phone: on the line under Open roles, between the title and the count. */
.hw-pk-home {
  bottom: 0;
  left: 52%;
}
/* Job board: on top of the Role queue box, clear of Post a role and How to post. */
.hw-pk-board {
  right: 22px;
  bottom: calc(100% - 2px);
}
/* Browse creators: on the search box, between the title and the count on a phone. */
.hw-pk-browse {
  bottom: calc(100% - 2px);
  left: 60%;
}
/* Community: sitting in the pinned post's empty bottom corner. */
.hw-pk-pinned {
  right: 14px;
  bottom: 0;
}
/* Footer on a phone: next to the achievements button (the phone footer hides its other spans). On
   a wider screen the footer rows are full, so it stays off there. */
.footer > .hw-pumpkin.hw-pk-footer {
  position: static;
  display: block;
  align-self: center;
}
@media (min-width: 761px) {
  .hw-pk-board {
    right: auto;
    left: 64%;
  }
  .hw-pk-browse {
    left: 48%;
  }
  .footer > .hw-pumpkin.hw-pk-footer {
    display: none;
  }
}
@media (max-width: 379px) {
  .hw-pk-browse {
    display: none;
  }
}
@media print {
  .hw-pumpkin,
  .hw-sprite,
  .hw-slot {
    display: none;
  }
}