/* Halloween - Night (Heavy). The whole site goes to a Halloween night: a
   dark theme (the palette); a moon, rising embers, cobwebs in the top
   corners and a spider on its thread behind the content; bats crossing
   over it, two or three at a time; jack-o'-lanterns in the bottom corners
   and a witch's hat on the logo. */

html[data-gimmick="halloween-night"]:not([data-gimmick-hidden]) {
  color-scheme: dark;
  background: radial-gradient(ellipse 120% 60% at 50% 115%, #3b1c0c 0%, #15111d 62%) fixed #15111d;
}
/* The page's own background steps aside for the night sky, so the moon and
   embers behind the content show through. */
html[data-gimmick="halloween-night"]:not([data-gimmick-hidden]) body { background: transparent; }

html[data-gimmick="halloween-night"] .gn-moon {
  position: absolute;
  top: 9%;
  right: 7%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fff6dc 0%, #f6dfa0 55%, #e7c172 100%);
  box-shadow: 0 0 60px 18px rgb(246 214 140 / 0.22);
  opacity: 0.85;
}
html[data-gimmick="halloween-night"] .gn-ember {
  position: absolute;
  bottom: -12px;
  border-radius: 50%;
  background: #ffb04a;
  box-shadow: 0 0 6px 2px rgb(255 140 40 / 0.7);
  opacity: 0;
  animation-name: gn-rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes gn-rise {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 0.95; }
  50%  { transform: translate(var(--sway), -55vh); }
  85%  { opacity: 0.5; }
  100% { transform: translate(0, -112vh); opacity: 0; }
}

html[data-gimmick="halloween-night"] .gn-pumpkin {
  position: absolute;
  bottom: 6px;
  width: 64px;
  filter: drop-shadow(0 0 10px rgb(255 140 30 / 0.35));
}
html[data-gimmick="halloween-night"] .gn-pl { left: 14px; }
html[data-gimmick="halloween-night"] .gn-pr { right: 14px; width: 52px; }
html[data-gimmick="halloween-night"] .gn-pumpkin-svg { display: block; width: 100%; height: auto; }
html[data-gimmick="halloween-night"] .gn-p1 { fill: #d9630f; }
html[data-gimmick="halloween-night"] .gn-p2 { fill: #f07a16; }
html[data-gimmick="halloween-night"] .gn-stem { fill: #4c6b1f; }
html[data-gimmick="halloween-night"] .gn-face {
  fill: #ffd25a;
  animation: gn-flicker 3.2s ease-in-out infinite;
}
@keyframes gn-flicker {
  0%, 100% { opacity: 1; }
  40%      { opacity: 0.75; }
  55%      { opacity: 0.95; }
  70%      { opacity: 0.7; }
}
/* Behind the page (the back layer), so a button or line of text scrolled
   over a corner stays on top; and clear of the Hide decorations button. */
html[data-gimmick="halloween-night"] .gn-pl { left: 56px; }
@media (max-width: 640px) {
  html[data-gimmick="halloween-night"] .gn-pumpkin { width: 40px; }
  html[data-gimmick="halloween-night"] .gn-pr { width: 34px; }
  html[data-gimmick="halloween-night"] .gn-pl { left: 44px; }
  html[data-gimmick="halloween-night"] .gn-moon { width: 72px; height: 72px; top: 12%; right: 5%; }
}

/* The still state: the night, the moon, the lanterns lit steady and the
   embers held mid-rise. */
@media (prefers-reduced-motion: reduce) {
  /* The embers held at three heights up the page, scattered by their own
     left positions. */
  html[data-gimmick="halloween-night"] .gn-ember { opacity: 0.6; }
  html[data-gimmick="halloween-night"] .gn-ember:nth-child(3n) { bottom: 22%; }
  html[data-gimmick="halloween-night"] .gn-ember:nth-child(3n+1) { bottom: 48%; }
  html[data-gimmick="halloween-night"] .gn-ember:nth-child(3n+2) { bottom: 71%; }
}

html[data-gimmick="halloween-night"] [data-gimmick-anchor="logo"]::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: var(--gimmick-logo-x, -0.5em);
  top: var(--gimmick-logo-y, -0.4em);
  width: calc(1.8em * var(--gimmick-logo-size, 1));
  height: calc(1.57em * var(--gimmick-logo-size, 1));
  background: url("hat.svg") center / contain no-repeat;
  transform: rotate(-16deg);
  filter: drop-shadow(0 0 1.5px rgb(255 150 60 / 0.8)) drop-shadow(0 0 7px rgb(255 110 30 / 0.3));
  pointer-events: none;
}

/* Each one's place, size and timing: here rather than inline, so a
   strict style-src doesn't refuse them. */
html[data-gimmick="halloween-night"] .gn-ember:nth-child(5){left:3%;width:5px;height:5px;animation-duration:10s;animation-delay:-7.6s;--sway:-25px}
html[data-gimmick="halloween-night"] .gn-ember:nth-child(6){left:89%;width:3px;height:3px;animation-duration:11s;animation-delay:-10.5s;--sway:-25px}
html[data-gimmick="halloween-night"] .gn-ember:nth-child(7){left:93%;width:4px;height:4px;animation-duration:11s;animation-delay:-10.8s;--sway:-40px}
html[data-gimmick="halloween-night"] .gn-ember:nth-child(8){left:86%;width:3px;height:3px;animation-duration:11s;animation-delay:-2.5s;--sway:40px}
html[data-gimmick="halloween-night"] .gn-ember:nth-child(9){left:69%;width:5px;height:5px;animation-duration:12s;animation-delay:-12.0s;--sway:-40px}
html[data-gimmick="halloween-night"] .gn-ember:nth-child(10){left:17%;width:3px;height:3px;animation-duration:15s;animation-delay:-5.1s;--sway:-25px}
html[data-gimmick="halloween-night"] .gn-ember:nth-child(11){left:44%;width:5px;height:5px;animation-duration:14s;animation-delay:-8.4s;--sway:-25px}
html[data-gimmick="halloween-night"] .gn-ember:nth-child(12){left:28%;width:4px;height:4px;animation-duration:15s;animation-delay:-8.8s;--sway:-40px}
html[data-gimmick="halloween-night"] .gn-ember:nth-child(13){left:8%;width:4px;height:4px;animation-duration:14s;animation-delay:-1.9s;--sway:-25px}
html[data-gimmick="halloween-night"] .gn-ember:nth-child(14){left:50%;width:3px;height:3px;animation-duration:10s;animation-delay:-7.4s;--sway:40px}
html[data-gimmick="halloween-night"] .gn-ember:nth-child(15){left:85%;width:4px;height:4px;animation-duration:12s;animation-delay:-9.6s;--sway:25px}
html[data-gimmick="halloween-night"] .gn-ember:nth-child(16){left:26%;width:4px;height:4px;animation-duration:12s;animation-delay:-5.8s;--sway:25px}
html[data-gimmick="halloween-night"] .gn-ember:nth-child(17){left:45%;width:4px;height:4px;animation-duration:14s;animation-delay:-8.0s;--sway:40px}
html[data-gimmick="halloween-night"] .gn-ember:nth-child(18){left:84%;width:4px;height:4px;animation-duration:12s;animation-delay:-11.7s;--sway:-40px}
html[data-gimmick="halloween-night"] .gn-ember:nth-child(19){left:41%;width:4px;height:4px;animation-duration:17s;animation-delay:-10.6s;--sway:25px}
html[data-gimmick="halloween-night"] .gn-ember:nth-child(20){left:13%;width:4px;height:4px;animation-duration:12s;animation-delay:-0.3s;--sway:25px}

/* Cobwebs in the top corners, behind the page: the logo and nav read over
   them. */
html[data-gimmick="halloween-night"] .gn-web { position: absolute; top: 0; width: 170px; }
html[data-gimmick="halloween-night"] .gn-web-l { left: 0; }
html[data-gimmick="halloween-night"] .gn-web-r { right: 0; transform: scaleX(-1); }
html[data-gimmick="halloween-night"] .gn-web-svg { display: block; width: 100%; height: auto; }
html[data-gimmick="halloween-night"] .gn-silk { fill: none; stroke: #d9cfe8; stroke-width: 1; stroke-linecap: round; opacity: 0.45; }

/* A spider on its thread from the right-hand web, slowly dropping and
   climbing back. */
html[data-gimmick="halloween-night"] .gn-spider {
  position: absolute;
  top: 0;
  right: 92px;
  width: 26px;
  animation: gn-dangle 11s ease-in-out infinite;
}
html[data-gimmick="halloween-night"] .gn-thread {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 1px;
  height: 400px;
  background: #d9cfe8;
  opacity: 0.45;
}
html[data-gimmick="halloween-night"] .gn-spider-svg { display: block; width: 100%; height: auto; }
/* Dark against the night, so its outline is what reads. */
html[data-gimmick="halloween-night"] .gn-legs { fill: none; stroke: #9a86b5; stroke-width: 1.8; stroke-linecap: round; }
html[data-gimmick="halloween-night"] .gn-body { fill: #1a1222; stroke: #9a86b5; stroke-width: 1; }
html[data-gimmick="halloween-night"] .gn-eye { fill: #ff4b2b; }
@keyframes gn-dangle {
  0%, 100% { transform: translateY(70px); }
  45%      { transform: translateY(190px) rotate(4deg); }
  60%      { transform: translateY(176px) rotate(-3deg); }
}

/* Bats, over the page as Bats has them: six crossing in turn, each in the
   air half its cycle, so two or three are flying at any moment - from the
   first paint, as their delays are already under way. */
html[data-gimmick="halloween-night"] .gn-bat {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 1.2px rgb(255 160 70 / 0.95)) drop-shadow(0 0 5px rgb(255 110 30 / 0.4));
}
html[data-gimmick="halloween-night"] .gn-wing { fill: #33204a; }
html[data-gimmick="halloween-night"] .gn-bat .gn-body { fill: #33204a; stroke: none; }
html[data-gimmick="halloween-night"] .gn-bat .gn-eye { fill: #ffb627; }
html[data-gimmick="halloween-night"] .gn-wing { transform-box: fill-box; animation: gn-flap-l 0.26s ease-in-out infinite alternate; }
html[data-gimmick="halloween-night"] .gn-wl { transform-origin: 100% 45%; }
html[data-gimmick="halloween-night"] .gn-wr { transform-origin: 0% 45%; animation-name: gn-flap-r; }
@keyframes gn-flap-l { from { transform: rotate(24deg) scaleY(0.9); } to { transform: rotate(-22deg) scaleY(0.55); } }
@keyframes gn-flap-r { from { transform: rotate(-24deg) scaleY(0.9); } to { transform: rotate(22deg) scaleY(0.55); } }

html[data-gimmick="halloween-night"] .gn-flight {
  position: absolute;
  left: 0;
  will-change: transform;
  animation: gn-cross 24s linear infinite;
}
html[data-gimmick="halloween-night"] .gn-bob { animation: gn-bob 2.6s ease-in-out infinite alternate; }
@keyframes gn-cross {
  0%        { transform: translateX(-14vw); }
  50%, 100% { transform: translateX(112vw); }
}
@keyframes gn-cross-back {
  0%        { transform: translateX(112vw); }
  50%, 100% { transform: translateX(-14vw); }
}
@keyframes gn-bob {
  from { transform: translateY(-22px) rotate(-6deg); }
  to   { transform: translateY(22px) rotate(5deg); }
}
html[data-gimmick="halloween-night"] .gn-b1 { top: 16%; width: 62px; animation-delay: -2s; }
html[data-gimmick="halloween-night"] .gn-b2 { top: 38%; width: 40px; animation-delay: -6s; animation-name: gn-cross-back; animation-duration: 26s; }
html[data-gimmick="halloween-night"] .gn-b3 { top: 24%; width: 50px; animation-delay: -10s; }
html[data-gimmick="halloween-night"] .gn-b4 { top: 58%; width: 34px; animation-delay: -14s; animation-name: gn-cross-back; animation-duration: 22s; }
html[data-gimmick="halloween-night"] .gn-b5 { top: 30%; width: 46px; animation-delay: -18s; animation-duration: 25s; }
html[data-gimmick="halloween-night"] .gn-b6 { top: 70%; width: 38px; animation-delay: -21s; animation-name: gn-cross-back; }
html[data-gimmick="halloween-night"] .gn-b2 .gn-bob { animation-duration: 2.1s; }
html[data-gimmick="halloween-night"] .gn-b4 .gn-bob { animation-duration: 1.9s; }
html[data-gimmick="halloween-night"] .gn-b5 .gn-bob { animation-duration: 3.1s; }
html[data-gimmick="halloween-night"] .gn-b2 .gn-wing,
html[data-gimmick="halloween-night"] .gn-b4 .gn-wing { animation-duration: 0.2s; }

/* A phone: smaller bats, cobwebs and spider. */
@media (max-width: 640px) {
  html[data-gimmick="halloween-night"] .gn-b1 { width: 42px; }
  html[data-gimmick="halloween-night"] .gn-b2 { width: 28px; }
  html[data-gimmick="halloween-night"] .gn-b3 { width: 34px; }
  html[data-gimmick="halloween-night"] .gn-b4 { width: 24px; }
  html[data-gimmick="halloween-night"] .gn-b5 { width: 32px; }
  html[data-gimmick="halloween-night"] .gn-b6 { width: 26px; }
  html[data-gimmick="halloween-night"] .gn-web { width: 96px; }
  html[data-gimmick="halloween-night"] .gn-spider { right: 56px; width: 18px; }
}

/* Still: no bats in the air (a bat that never moves would sit on the
   text); the webs stay, and the spider hangs where it is. */
@media (prefers-reduced-motion: reduce) {
  html[data-gimmick="halloween-night"] .gn-flight { display: none; }
  html[data-gimmick="halloween-night"] .gn-spider { transform: translateY(120px); }
}