/*
 * trivit.app on 31 October (Design, halloween-site, 15 October; Martin's rulings the same day).
 *
 * Everything here hangs off `html.hw`, which the page sets for itself from the visitor's own date
 * (build.js, `hwEarly`), so the site, like the app and the board, wears it for exactly the
 * visitor's 31st. Values are Design's, from the frames' markup and the costume reference.
 */

/* F72: forced dark, the switch hidden. The page is set to the dark room before it paints. */
html.hw .rooms { display: none; }

/* F73: the accent and the pills turn pumpkin orange. Cards and their hues do not change. */
/* As specific as the room's own rule (:root[data-room="dark"]), and later, so it wins. */
:root.hw[data-room] {
  --accent: #E07A24;
  --teal: #E07A24;
  --onteal: #12100E;
  --teal-edge: #A85A17;
}
html.hw .strip .js-count { color: #E07A24; }

/* The speaker that takes the switch's place in the strip (F80). */
.hw-speaker { display: none; }
html.hw .hw-speaker {
  display: block;
  margin-left: 14px;
  width: 22px;
  height: 16px;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  color: #A9A199;
}
html.hw .hw-speaker[aria-pressed="true"] { color: #E07A24; }
html.hw .hw-speaker svg { display: block; }

/* F76: cobwebs in the top corners, under the header and never over text; the spider in the right. */
.hw-top {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  pointer-events: none;
  z-index: 0;
}
.hw-top > div { position: absolute; top: 0; }
.hw-top svg { display: block; }
.hw-web-l { left: 0; }
.hw-web-r { right: 0; transform: scaleX(-1); }
.hw-spider { right: 30px; width: 20px; overflow: hidden; }
.hw-spider .thread { margin-left: 9.5px; width: 1px; background: #8B837A; }
/* The drop lets silk out the way a spider does (Martin, 16 October, over Design's 1.6 s spring): it
   lowers steadily, slows into the last of the thread, then bobs twice on it, each smaller, and hangs.
   2.8 s in all, after the 600 ms Design gave it. */
.hw-spider .drop { animation: hwSpiderDrop 2800ms linear 600ms both; }
@keyframes hwSpiderDrop {
  0%   { transform: translateY(-118px); animation-timing-function: cubic-bezier(.33,0,.4,1); }
  64%  { transform: translateY(3px);    animation-timing-function: ease-in-out; }
  78%  { transform: translateY(-1.5px); animation-timing-function: ease-in-out; }
  90%  { transform: translateY(.8px);   animation-timing-function: ease-in-out; }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .hw-spider .drop { animation: none; } }

/* F75: every page ends on the hill, the house on it; the footer is the hill continued. */
.hw-hill { display: none; }
html.hw .hw-hill {
  display: block;
  position: relative;
  margin: 28px calc(50% - 50vw) -1px;
}
html.hw .hw-hill svg { display: block; width: 100%; height: auto; pointer-events: none; }
/* Risen under the page, its sky must not take the clicks meant for what is above it; the house still does. */
html.hw .hw-house {
  position: absolute;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}
html.hw .hw-hill .win { transition: opacity 120ms; }
html.hw .hw-hill.flicker .win { animation: hwFlicker 1.2s steps(6) 1; }
@keyframes hwFlicker { 0%, 100% { opacity: 1 } 20% { opacity: .2 } 40% { opacity: .9 } 60% { opacity: .1 } 80% { opacity: .8 } }
html.hw footer {
  border-top: 0;
  background: #0C0A09;
  box-shadow: 0 0 0 100vmax #0C0A09;
  clip-path: inset(0 -100vmax);
}

/* The speaker's first paint: both states are drawn, the early script sets html[data-hwsound]. */
.hw-speaker .hw-off { display: none; }
html[data-hwsound="off"] .hw-speaker .hw-on { display: none; }
html[data-hwsound="off"] .hw-speaker .hw-off { display: inline; }
html.hw[data-hwsound="off"] .hw-speaker { color: #A9A199; }

/* Nothing decorative may widen the page: the moon rises past the fan and the bat leaves it. */
html.hw body { overflow-x: clip; }

/* F81: the fan wears the costume. Both sets are in the page; the day picks one. */
.fan .hwc, .hw-moon, .hw-bat, .hw-line, .hw-playsky { display: none; }
html.hw .fan .tc:not(.hwc) { display: none; }
html.hw .fan .hwc { display: block; }

/* F74, on Design's anchor (answers 1): the disc is 0.9 of a card wide, centred on the middle
   card's top-right corner raised a tenth of its height, behind it. The disc is 0.56 of the
   drawing, so the drawing is 1.607 cards wide; every figure is --hero-w times a ratio, like
   the fan's own. */
html.hw .hw-moon {
  display: block;
  position: absolute;
  left: calc(var(--hero-w) * .773);
  top: calc(8px - var(--hero-w) * .944);
  width: calc(var(--hero-w) * 1.607);
  pointer-events: none;
}
.hw-moon svg, .hw-bat svg, .hw-playsky svg { display: block; width: 100%; height: auto; overflow: visible; }

/* F77: one bat, 34 wide, crosses once through the moon in 9 s, wings at 280 ms, then gone.
   F78: with Reduce Motion it perches still in front of the moon. */
html.hw .hw-bat {
  display: block;
  position: absolute;
  width: 34px;
  z-index: 4;
  pointer-events: none;
  animation: hwBatCross 9s linear 1200ms both;
}
html.hw .hw-bat .wing { transform-origin: 50% 45%; animation: hwFlap 280ms ease-in-out 1200ms 32; }
@keyframes hwBatCross {
  0% { left: -12%; top: 66%; opacity: 1 }
  25% { top: 46% } 50% { top: 32% } 60% { top: 28% } 80% { top: 16% }
  99% { opacity: 1 }
  100% { left: 112%; top: 6%; opacity: 0 }
}
@keyframes hwFlap { 0%, 100% { transform: scaleY(1) } 50% { transform: scaleY(.45) } }
@media (prefers-reduced-motion: reduce) {
  html.hw .hw-bat { animation: none; left: calc(var(--hero-w) * 1.3); top: calc(8px - var(--hero-w) * .35); }
  html.hw .hw-bat .wing { animation: none; }
}

/* F79, cut by Martin (15 October) to "Happy Halloween." alone, in accent: under the sub, above the buttons. 15/600. */
html.hw .hw-line {
  display: block;
  margin: -16px 0 36px;
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
}
html.hw .hw-line span { color: var(--accent); }

/* The play page at 1280: the moon and two still bats, in the left column under the head and
   outside the board's. Design's frame 1d, its positions taken relative to the moon. */
@media (min-width: 1120px) {
  html.hw .hw-playsky { display: block; position: relative; width: 240px; margin-top: 24px; pointer-events: none; }
  .hw-playsky .b1 { position: absolute; left: 180px; top: 46px; width: 34px; }
  .hw-playsky .b2 { position: absolute; left: 142px; top: 82px; width: 22px; transform: rotate(-8deg); }
}

/* Text always paints over the moon: it sits under the page's text, above its ground. */
html.hw .hw-moon { z-index: -1; }
/* Stacked, the fan sits right under the header, and the middle card's corner would raise the
   disc onto the nav. Below 1120 it anchors on the right card's corner instead, 40 lower, so the
   disc's top meets the fan's top and the header stays clear. */
@media (max-width: 1119px) {
  html.hw .hw-moon { left: calc(var(--hero-w) * 1.35); top: calc(48px - var(--hero-w) * .944); }
}