/* RDDW-158: HALLOWEEN, the first season on the seasonal engine (functions/_seasons.js, RDDW-157).

   Linked by the edge only inside the season's window, and only then is html[data-season] set,
   so every rule below is scoped to it anyway: a stale copy of this file can never dress the
   plain site. It re-dresses the v2 night city (docs/design-v2.md) rather than replacing it:
   the moon turns into a low harvest moon, the lit windows burn candle-orange (steady -- no
   flicker, Daniel 3 Oct 2026), bats cross the moon now and then, the city band becomes the game's
   Halloween city (RDDW-199: a thick lilac fog over the street, carved pumpkins on the rooftops, a
   fence, gravestones and a ghost, round green trees, lamps glowing through the fog), a web hangs
   in the corner, and the game page's
   wordmark wears the game's own Halloween logo colours and drips (the decoration itself is
   drawn by theme.js).

   Colours are the game's (ColorDrainGod docs/design/cdg-137-halloween-pack.md): pumpkin
   #F5811F / #EE7A1E, witch purple #8963C0, acid green #7AB834, reveal ink #5B4A6E.

   Rules: decoration is aria-hidden and never takes a click; text keeps AA (the candy buttons
   keep their dark outline); reduced motion, motion-off and lite stop every animation of the
   season; and nothing here moves layout -- transform and opacity only. */

html[data-season="halloween"] {
  --hw-pumpkin: #EE7A1E;
  --hw-orange: #F5811F;
  --hw-purple: #8963C0;
  --hw-green: #7AB834;
  --hw-ink: #5B4A6E;
  --win: #FFA53A;
  --logo-c: #F5811F; --logo-o1: #8963C0; --logo-l: #7AB834; --logo-o2: #F5811F; --logo-r: #8963C0;
}

/* ------------------------------------------------------------------ the sky: a purple dusk */
html[data-season="halloween"] .hero {
  background: linear-gradient(180deg, #160F2A 0%, #1C1338 38%, #2A1846 66%, #3A1F4C 84%, #1B1234 100%);
}
html[data-season="halloween"] .horizon {
  background: radial-gradient(ellipse at 50% 100%, rgba(245, 129, 31, .26), rgba(137, 99, 192, .1) 38%, rgba(245, 129, 31, 0) 64%);
}
html[data-season="halloween"] .v2-sky {
  background: linear-gradient(180deg, rgba(42, 24, 70, .55), rgba(42, 24, 70, 0));
}

/* ------------------------------------------------------------------ the harvest moon */
html[data-season="halloween"] .moon {
  background:
    radial-gradient(circle at 63% 64%, rgba(176, 82, 22, .42) 0 8%, transparent 9.5%),
    radial-gradient(circle at 33% 60%, rgba(176, 82, 22, .32) 0 5.5%, transparent 7%),
    radial-gradient(circle at 56% 30%, rgba(176, 82, 22, .28) 0 4.5%, transparent 6%),
    radial-gradient(circle at 36% 34%, #FFE8C2 0 14%, #FFBE6E 52%, #F28A2E 100%);
  box-shadow: inset -.16em -.06em 0 rgba(170, 72, 18, .45), 0 0 .25em rgba(255, 196, 120, .85), 0 0 .8em rgba(255, 150, 60, .6), 0 0 2.2em rgba(245, 120, 30, .38);
}
html[data-season="halloween"] .moon::before {
  background: radial-gradient(circle closest-side, rgba(255, 170, 80, 0) 21%, rgba(255, 170, 80, .5) 25.5%, rgba(245, 129, 31, .22) 48%, rgba(200, 90, 30, .08) 74%, rgba(200, 90, 30, 0) 100%);
}
html[data-season="halloween"] .moon::after {
  background:
    radial-gradient(circle closest-side, rgba(255, 200, 130, 0) 40%, rgba(255, 196, 120, .55) 43%, rgba(245, 140, 50, .22) 58%, rgba(245, 129, 31, 0) 100%),
    repeating-conic-gradient(from 13deg, rgba(255, 190, 110, 0) 0deg, rgba(255, 190, 110, .06) 9deg, rgba(255, 190, 110, 0) 18deg 41deg),
    repeating-conic-gradient(rgba(255, 190, 110, 0) 0deg, rgba(255, 190, 110, .09) 6deg, rgba(255, 190, 110, 0) 12deg 26deg);
}

/* ------------------------------------------------------------------ the city at Halloween */
html[data-season="halloween"] .city .w.on { fill: var(--win); }
/* the street trees: the game's round dark-green trees (RDDW-199; theme.js stands a bush over each) */
html[data-season="halloween"] .city ellipse[fill="#274E3A"] { fill: #2B4536; }
html[data-season="halloween"] .city ellipse[fill="#33594C"] { fill: #365642; }
/* the row of houses behind the street at dusk, as in the game: a muted purple, not night navy */
html[data-season="halloween"] .city rect[fill="#0F0F2D"] { fill: #261D3B; }
html[data-season="halloween"] .city .hw-roof-glow { fill: url(#hw-glow); opacity: .9; }
html[data-season="halloween"] .city .hw-pumpkin { pointer-events: none; }

/* the bats: a small flock crosses the moon now and then; each bat flaps on its own beat */
.hw-flock { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.hw-bat { position: absolute; display: block; width: var(--s, 34px); height: calc(var(--s, 34px) / 2); color: #0B0716; will-change: transform; }
/* a warm rim from the moon, so a black bat still reads on the purple sky */
.hw-bat svg { filter: drop-shadow(0 0 1px rgba(255, 176, 90, .75)) drop-shadow(0 0 5px rgba(245, 129, 31, .35)); }
.hw-bat svg { display: block; width: 100%; height: 100%; transform-origin: 50% 40%; animation: hw-flap var(--f, .34s) ease-in-out infinite alternate; }
.hw-bat-a { top: clamp(44px, 6%, 96px); --s: 44px; animation: hw-cross-a 26s linear -3s infinite; }
.hw-bat-b { top: clamp(70px, 8.5%, 130px); --s: 34px; --f: .29s; animation: hw-cross-b 26s linear -3.6s infinite; }
.hw-bat-c { top: clamp(30px, 4%, 70px); --s: 28px; --f: .31s; animation: hw-cross-c 26s linear -4.1s infinite; }
.hw-bat-d { top: clamp(110px, 12%, 170px); --s: 22px; --f: .27s; animation: hw-cross-a 34s linear -19s infinite; }
@keyframes hw-flap { from { transform: scaleY(1); } to { transform: scaleY(.6); } }
/* the flock spends a third of its loop crossing and the rest out of sight, so the sky is mostly
   still and the crossing reads as an event */
@keyframes hw-cross-a { 0% { transform: translate3d(110vw, 0, 0); } 32% { transform: translate3d(-12vw, -3vh, 0); } 100% { transform: translate3d(-12vw, -3vh, 0); } }
@keyframes hw-cross-b { 0% { transform: translate3d(108vw, 2vh, 0); } 32% { transform: translate3d(-14vw, -1vh, 0); } 100% { transform: translate3d(-14vw, -1vh, 0); } }
@keyframes hw-cross-c { 0% { transform: translate3d(112vw, 1vh, 0); } 32% { transform: translate3d(-10vw, -4vh, 0); } 100% { transform: translate3d(-10vw, -4vh, 0); } }
html[dir="rtl"] .hw-flock { transform: scaleX(-1); }
@media (max-width: 699px) { .hw-bat-d { display: none; } .hw-bat-a { --s: 34px; } }

/* ------------------------------------------------------------------ the city band, as in the game
   (RDDW-199, Daniel 17 Oct: "the dark fog and all the things there", on every page). theme.js draws
   the props inside the city SVG (bushes, a fence, gravestones, lamps) and adds, in front of it: the
   wisps (.hw-fog), the lamps' light (.hw-glow), two cars where the band has none (.hw-traffic) and the
   ghost (.hw-stage .hw-spook). The thick fog itself is the band's ::before, so it is there from the
   first paint of every band.

   Inside the band (a stacking context of its own -- container-type: size, as the v2 bands already
   are -- so nothing here can rise over the page, the accessibility button or the cookie banner):
     the city  <  the fog bank and the wisps, the lamps' light (1)  <  the dark strip at the foot (2)
     <  the cars and the ghost (3).
   Sizes are shares of the band's height (cqh), with px fallbacks: the city is fitted to the band's
   height (xMidYMax slice), so the fog keeps the same proportions to the houses at every width.
   Performance (RDDW-171, RDDW-190): gradients only, no filter and no blur anywhere in the band; the
   two fog layers, the ghost and the cars move by transform alone, so each is drawn once and only
   slid by the compositor; all of them rest off screen (.skyline.idle) and in the calm modes. */
html[data-season="halloween"] .skyline { container-type: size; isolation: isolate; }
html[data-season="halloween"] .skyline-foot { background: linear-gradient(180deg, rgba(88, 60, 98, 0) 0%, rgba(88, 60, 98, .3) 40%, rgba(80, 54, 94, .55) 100%); }
/* the street lamps' posts in the game's lighter iron, so they read against the dusk */
html[data-season="halloween"] .city rect[fill="#2B2C5A"] { fill: #4A4B70; }
html[data-season="halloween"] .skyline::after { z-index: 2; }
html[data-season="halloween"] .skyline .traffic { z-index: 3; }

/* the fog bank: a lilac-grey band over the base of the houses and the pavement, densest where the
   houses meet the street, its top edge a row of soft billows. The billows repeat every three band
   heights and the layer is one repeat wider than the band, so sliding it by one repeat loops without
   a seam; it drifts about a band's width a minute. */
html[data-season="halloween"] .skyline::before {
  content: ""; position: absolute; left: 0; bottom: 0; z-index: 1; height: 50%; pointer-events: none;
  width: calc(100% + 720px); width: calc(100% + 300cqh);
  background:
    radial-gradient(9% 24% at 9% 52%, rgba(198, 188, 214, .58), rgba(198, 188, 214, .26) 50%, rgba(198, 188, 214, 0)),
    radial-gradient(12% 30% at 27% 44%, rgba(198, 188, 214, .52), rgba(198, 188, 214, .24) 50%, rgba(198, 188, 214, 0)),
    radial-gradient(8% 22% at 43% 55%, rgba(198, 188, 214, .56), rgba(198, 188, 214, .24) 50%, rgba(198, 188, 214, 0)),
    radial-gradient(13% 32% at 60% 42%, rgba(198, 188, 214, .5), rgba(198, 188, 214, .22) 50%, rgba(198, 188, 214, 0)),
    radial-gradient(9% 24% at 77% 53%, rgba(198, 188, 214, .58), rgba(198, 188, 214, .26) 50%, rgba(198, 188, 214, 0)),
    radial-gradient(10% 28% at 91% 46%, rgba(198, 188, 214, .5), rgba(198, 188, 214, .22) 50%, rgba(198, 188, 214, 0)),
    radial-gradient(18% 20% at 18% 78%, rgba(214, 206, 228, .3), rgba(214, 206, 228, 0)),
    radial-gradient(16% 18% at 50% 82%, rgba(214, 206, 228, .26), rgba(214, 206, 228, 0)),
    radial-gradient(18% 20% at 80% 76%, rgba(214, 206, 228, .3), rgba(214, 206, 228, 0)),
    linear-gradient(180deg, rgba(182, 171, 199, 0) 0%, rgba(182, 171, 199, .05) 28%, rgba(182, 171, 199, .24) 44%, rgba(182, 171, 199, .52) 59%, rgba(182, 171, 199, .68) 71%, rgba(182, 171, 199, .66) 84%, rgba(182, 171, 199, .46) 100%);
  background-size: 720px 100%, 720px 100%, 720px 100%, 720px 100%, 720px 100%, 720px 100%, 720px 100%, 720px 100%, 720px 100%, 100% 100%;
  background-size: 300cqh 100%, 300cqh 100%, 300cqh 100%, 300cqh 100%, 300cqh 100%, 300cqh 100%, 300cqh 100%, 300cqh 100%, 300cqh 100%, 100% 100%;
  background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat;
  animation: hw-fog-a 160s linear infinite;
}
@keyframes hw-fog-a { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-720px, 0, 0); transform: translate3d(-300cqh, 0, 0); } }
/* the wisps in front, thinner and lower, drifting the other way more slowly */
.hw-fog { position: absolute; left: 0; bottom: 0; z-index: 1; height: 44%; pointer-events: none;
  width: calc(100% + 1000px); width: calc(100% + 420cqh);
  background:
    radial-gradient(10% 26% at 12% 50%, rgba(212, 204, 226, .32), rgba(212, 204, 226, .12) 50%, rgba(212, 204, 226, 0)),
    radial-gradient(14% 22% at 40% 66%, rgba(212, 204, 226, .28), rgba(212, 204, 226, .1) 50%, rgba(212, 204, 226, 0)),
    radial-gradient(9% 26% at 63% 48%, rgba(212, 204, 226, .3), rgba(212, 204, 226, .12) 50%, rgba(212, 204, 226, 0)),
    radial-gradient(12% 22% at 86% 62%, rgba(212, 204, 226, .26), rgba(212, 204, 226, .1) 50%, rgba(212, 204, 226, 0));
  background-size: 1000px 100%; background-size: 420cqh 100%; background-repeat: repeat-x;
  transform: translate3d(-1000px, 0, 0); transform: translate3d(-420cqh, 0, 0);
  animation: hw-fog-b 230s linear infinite; }
@keyframes hw-fog-b { from { transform: translate3d(-1000px, 0, 0); transform: translate3d(-420cqh, 0, 0); } to { transform: translate3d(0, 0, 0); } }
/* the lamps' halo and pool, over the fog (the same picture box as the city, so they sit on the lamps) */
.hw-glow { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; pointer-events: none; }
/* the ghost: a box of the city's own proportions (3200 x 260, centred and fitted to the band's height
   like the city), so the ghost's place in it is the city's x and y as shares; it floats over the
   graves, its body at x 1554-1583, y 107-140 */
.hw-stage { position: absolute; left: 50%; bottom: 0; z-index: 3; height: 100%; aspect-ratio: 3200 / 260; transform: translateX(-50%); pointer-events: none; }
.hw-spook { position: absolute; left: 48.31%; top: 38.46%; width: 1.375%; display: block; opacity: .94; animation: hw-spook 7s ease-in-out infinite alternate; }
.hw-spook svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes hw-spook { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-6%, -14%, 0); } }
/* two cars on a band with an empty street: the hero's car, a blue one driving right and a red one
   driving left (the game's), on the hero's lanes (5.6% of the band high, one above the other) */
.hw-traffic { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.hw-traffic-defs { position: absolute; width: 0; height: 0; }
.hw-lane { position: absolute; left: 0; width: 100%; height: 5.6%; animation: hw-drive-r 19s linear -4s infinite; }
.hw-lane-r { bottom: .8%; color: #5B8FD5; }
.hw-lane-l { bottom: 6.6%; color: #C9504A; animation: hw-drive-l 24s linear -15s infinite; }
.hw-car { display: block; height: 100%; width: auto; aspect-ratio: 110 / 20; overflow: visible; }
.hw-lane-l .hw-car { transform: scaleX(-1); }
@keyframes hw-drive-r { from { transform: translate3d(-80px, 0, 0); } to { transform: translate3d(100%, 0, 0); } }
@keyframes hw-drive-l { from { transform: translate3d(100%, 0, 0); } to { transform: translate3d(-80px, 0, 0); } }

/* the web in the hero's corner, and its spider on a thread */
.hw-web { position: absolute; top: 0; inset-inline-end: 0; width: clamp(120px, 15vw, 210px); aspect-ratio: 1; pointer-events: none; z-index: 1; opacity: .9; color: rgba(226, 216, 250, .42); }
html[dir="rtl"] .hw-web { transform: scaleX(-1); }
.hw-web svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* the spider is its own svg over the web (theme.js), so the compositor swings it and the main thread
   never repaints the web. Its loop has a name of its own: it shared hw-dangle with the bat on a thread
   below (whose keyframes, later in this file, won), so it slid down and jumped back every 5.8 s.
   7% of the box is the 14 viewBox units it always meant to drop. */
.hw-web .hw-spider { position: absolute; inset: 0; transform-origin: 50% 0; animation: hw-spider 5.8s ease-in-out infinite; }
@keyframes hw-spider { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(7%) rotate(2deg); } }
@media (max-width: 699px) { .hw-web { width: 96px; opacity: .7; } }

/* ------------------------------------------------------------------ the season line */
.hw-note { display: inline-flex; align-items: center; gap: .55em; justify-self: start; align-self: start; margin-top: 10px;
  padding: .42em 1em .42em .7em; border-radius: 999px; font-weight: 700; font-size: .9rem; line-height: 1.25; color: #FFE7CC;
  background: linear-gradient(180deg, rgba(91, 74, 110, .62), rgba(42, 24, 70, .72)); border: 1px solid rgba(245, 129, 31, .55);
  box-shadow: 0 0 0 4px rgba(245, 129, 31, .08), 0 8px 22px rgba(0, 0, 0, .3); position: relative; z-index: 2; }
html[dir="rtl"] .hw-note { padding: .42em .7em .42em 1em; }
.hw-note svg { flex: none; width: 22px; height: 20px; filter: drop-shadow(0 0 6px rgba(255, 170, 60, .65)); }
.hw-note .hw-he { display: none; }
html[lang="he"] .hw-note .hw-en { display: none; }
html[lang="he"] .hw-note .hw-he { display: inline; }
/* the studio home (RDDW-196): the line belongs to the announcement pill above it and keeps the
   game page's rhythm, 24px under the pill and 20px before the title (the pill's own 28px bottom
   margin gives way to them). It follows the hero's alignment: start-aligned on desktop, beside
   the phone, and centred with the pill and the title wherever the hero is one centred column
   (900px and under) -- a block as wide as its text otherwise sat at the start edge there. */
html[data-season="halloween"] .hero-tag:has(+ .hw-note) { margin-bottom: 0; }
.hero-tag + .hw-note { display: flex; width: max-content; max-width: 100%; margin: 24px 0 20px; }
@media (max-width: 900px) { .hero-tag + .hw-note { margin-inline: auto; } }

/* ------------------------------------------------------------------ the wordmark */
/* the game page's COLOR DRAIN in the game's Halloween logo: COLOR orange/purple/green/orange/
   purple (the --logo-* above), DRAIN in pumpkin, and paint dripping from three of its letters
   (COLOR's would run into DRAIN, the line below it) */
html[data-season="halloween"] .ht-d { color: var(--hw-orange); }
html[data-season="halloween"] .ht-d .hw-l { position: relative; }
html[data-season="halloween"] .ht-d .hw-l { display: inline-block; }
/* one drip under three of the letters, drawn by theme.js as a real paint shape (wide where it
   leaves the letter, a narrow run, a round bead) and grown once on load; it starts inside the
   letter, so where it leaves the paint it is the letter */
.ht-d .hw-drip { position: absolute; top: 73%; left: calc(var(--dx, 44%) - .1em); width: .2em; height: auto; overflow: visible;
  fill: currentColor; pointer-events: none;
  transform-origin: 50% 0; animation: hw-drip 2.8s cubic-bezier(.45, 0, .3, 1) var(--dd, .2s) both; }
@keyframes hw-drip { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
.ht-d .hw-l:nth-child(1) { --dx: 22%; --dh: .3em; --dd: .55s; }  /* under the D's stem */
.ht-d .hw-l:nth-child(3) { --dx: 71%; --dh: .36em; --dd: .65s; }  /* the A's right leg */
.ht-d .hw-l:nth-child(5) { --dx: 18%; --dh: .24em; --dd: .75s; }  /* the N's left leg */

/* the studio home: "mobile games" in pumpkin with a warm glow */
html[data-season="halloween"] .hero-h1 .gradient-text { text-shadow: 0 .06em 0 rgba(0, 0, 0, .45), 0 0 34px rgba(245, 129, 31, .45); }
html[data-season="halloween"] .hero-tag-dot { box-shadow: 0 0 0 4px rgba(255, 165, 58, .2), 0 0 12px rgba(255, 165, 58, .75) !important; }

/* ------------------------------------------------------------------ candy buttons: pumpkin */
/* the green faces turn pumpkin (white text on #E06A16 is 4.0:1, and the dark base outline stays);
   the blue "iPhone, coming" and the dark buttons keep their colours */
html[data-season="halloween"] .candy:not(.candy-gold):not(.candy-blue):not(.candy-dark),
html[data-season="halloween"] .top-join, html[data-season="halloween"] .beta-btn, html[data-season="halloween"] .btn-candy {
  --face: #E06A16; --base: #7A3408; background: linear-gradient(180deg, #FFA457 0%, var(--face) 60%);
}
html[data-season="halloween"] .btn-primary {
  --base: #7A3408; background: linear-gradient(180deg, #FFA457 0%, #E06A16 60%) !important;
  box-shadow: 0 6px 0 #7A3408, 0 14px 24px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .5) !important;
}
html[data-season="halloween"] .store-badge-apple:not([hidden]):not(.store-btn-ios-soon),
html[data-season="halloween"] .store-live .sl-badge[data-store-badge="google-play"] { --face-top: #FFA457; --face: #E06A16; --base: #7A3408; }

/* ------------------------------------------------------------------ the reveal */
/* the game's own idea: under the paint there is Halloween. Behind every phone something hides: when
   the strip comes into view they rise one after another (theme.js marks .hw-in) and stay out,
   swaying; a mouse over a phone draws its one higher, and a tap or a click makes it jump (.hw-boo).
   Nothing here follows :hover on a touch screen or the finger: a tap used to leave a ghost's head
   stuck half out and a swipe made them pop up and drop (Daniel's iPhone, 2026-10-27). Three
   separate properties, so nothing fights: translate rises, the svg's rotate sways, transform jumps.
   The row has room above the phones (below), or the scroller would cut them off. */
html[data-season="halloween"] .shots-row { padding-top: 74px; margin-top: -56px; }
html[data-season="halloween"] .shot { position: relative; isolation: isolate; }
/* the strip has its own creatures: the bat that hangs under every other title would touch them */
#screenshots .hw-hang { display: none; }
.hw-peek { position: absolute; z-index: -1; top: -30px; inset-inline-end: 22px; width: 48px; height: 52px; pointer-events: none;
  translate: 0 54px; rotate: var(--r, 6deg); opacity: 0; transform-origin: 50% 100%;
  transition: translate .7s cubic-bezier(.28, 1.6, .5, 1) var(--hw-d, 0s), opacity .2s ease var(--hw-d, 0s); }
.shot:nth-child(even) .hw-peek { inset-inline-end: auto; inset-inline-start: 22px; --r: -8deg; }
.shot.hw-in .hw-peek { translate: 0 0; opacity: 1; }
@media (hover: hover) and (pointer: fine) { .shot.hw-in:hover .hw-peek { translate: 0 -14px; } }
.hw-peek svg { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; filter: drop-shadow(0 0 7px var(--glow, rgba(241, 236, 255, .4))); }
.hw-peek-bat { --glow: rgba(176, 140, 255, .6); }
.hw-peek-pumpkin { --glow: rgba(255, 150, 50, .5); }
.shot.hw-in .hw-peek svg { animation: hw-peek-sway 3.6s ease-in-out infinite; animation-play-state: paused; }
.shot.hw-in.hw-vis .hw-peek svg { animation-play-state: running; }
.shot:nth-child(3n+2) .hw-peek svg { animation-delay: -1.2s; } .shot:nth-child(3n) .hw-peek svg { animation-delay: -2.4s; }
.shot.hw-boo .hw-peek { animation: hw-boo .8s ease-out; }
@keyframes hw-peek-sway { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
@keyframes hw-boo {
  0% { transform: none; }
  18% { transform: translateY(5px) scale(1.12, .88); }
  45% { transform: translateY(-30px) scale(.92, 1.1); }
  70% { transform: translateY(-2px) scale(1.06, .95); }
  100% { transform: none; }
}

/* ------------------------------------------------------------------ calm modes */
@media (prefers-reduced-motion: reduce) {
  .hw-bat, .hw-bat svg, .hw-fog, .hw-spider, .hw-spook, html[data-season="halloween"] .skyline::before,
  .ht-d .hw-drip { animation: none !important; }
  .hw-lane { animation-play-state: paused; }
  .hw-flock { display: none; }
  .hw-peek { transition: none; }
  .hw-peek svg, .shot.hw-boo .hw-peek { animation: none !important; }
}
html.motion-off .hw-bat, html.motion-off .hw-bat svg, html.motion-off .hw-fog, html.motion-off .hw-spider,
html.lite .hw-bat, html.lite .hw-bat svg, html.lite .hw-fog, html.lite .hw-spider,
html.motion-off .hw-spook, html.lite .hw-spook, html.motion-off[data-season="halloween"] .skyline::before, html.lite[data-season="halloween"] .skyline::before,
html.motion-off .ht-d .hw-drip, html.lite .ht-d .hw-drip { animation: none !important; }
html.motion-off .hw-flock, html.lite .hw-flock { display: none; }
html.motion-off .hw-peek, html.lite .hw-peek { transition: none; }
html.motion-off .hw-peek svg, html.lite .hw-peek svg, html.motion-off .shot.hw-boo .hw-peek, html.lite .shot.hw-boo .hw-peek { animation: none !important; }
/* off screen, the season's animations rest with the window lights (js/v2-lights.js marks .idle);
   the cars park for "Pause motion" and in lite mode, like the hero's (RDDW-202: on a weak phone
   every decorative loop rests) */
.skyline.idle .hw-fog, .skyline.idle .hw-spook, .skyline.idle .hw-lane, html[data-season="halloween"] .skyline.idle::before,
html.motion-off .hw-lane, html.lite .hw-lane { animation-play-state: paused; }

/* high contrast (the accessibility menu): the decoration steps back */
html.a11y-contrast .hw-fog, html.a11y-contrast .hw-web, html.a11y-contrast .hw-flock, html.a11y-contrast .hw-stage { display: none; }
html.a11y-contrast[data-season="halloween"] .skyline::before { content: none; }

/* ------------------------------------------------------------------ more Halloween (Daniel, 13 Oct:
   "more pumpkins, more atmosphere"): string lights across the top of the hero, a bare branch
   reaching over the moon with a hanging lantern, embers rising, a second flock. (The lantern
   cluster in front of the city and the street pumpkin patch went with RDDW-199: the game's band is
   calmer, and the fog, the graves and the ghost stand where they stood.)
   Every light here is steady -- no flicker (Daniel, 3 Oct). */

/* the second flock crosses the other way, later in the loop */
.hw-bat-e { top: clamp(56px, 7%, 110px); --s: 30px; --f: .3s; animation: hw-cross-r 22s linear -14s infinite; }
.hw-bat-f { top: clamp(84px, 10%, 150px); --s: 24px; --f: .28s; animation: hw-cross-r 22s linear -14.5s infinite; }
.hw-bat-g { top: clamp(40px, 5%, 90px); --s: 20px; --f: .26s; animation: hw-cross-r 22s linear -15.2s infinite; }
.hw-bat-e svg, .hw-bat-f svg, .hw-bat-g svg { scale: -1 1; }
@keyframes hw-cross-r { 0% { transform: translate3d(-14vw, 2vh, 0); } 30% { transform: translate3d(112vw, -2vh, 0); } 100% { transform: translate3d(112vw, -2vh, 0); } }
@media (max-width: 699px) { .hw-bat-g { display: none; } }

/* string lights across the top of the hero */
.hw-lights { position: absolute; top: 0; inset-inline: 0; height: clamp(30px, 3.2vw, 50px); pointer-events: none; z-index: 0; }
.hw-lights svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 4px rgba(255, 170, 70, .45)); }

/* the branch over the moon's corner; the web moves to the other corner */
.hw-branch { position: absolute; top: clamp(18px, 2.6vw, 40px); inset-inline-end: 0; width: clamp(170px, 22vw, 330px); pointer-events: none; z-index: 1; }
html[dir="rtl"] .hw-branch { transform: scaleX(-1); }
@media (max-width: 699px) { .hw-branch { display: none; } }
.hw-branch svg { display: block; width: 100%; height: auto; }
.hw-web { inset-inline-end: auto; inset-inline-start: 0; opacity: .55; }
html[dir="rtl"] .hw-web { transform: none; }
html:not([dir="rtl"]) .hw-web { transform: scaleX(-1); }

/* embers rising through the hero, slowly; each one fades in and out over two seconds or more, so
   nothing pops (RDDW-185) */
.hw-embers { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.hw-embers i { position: absolute; bottom: 18%; width: 4px; height: 4px; border-radius: 50%; background: #FFB347; box-shadow: 0 0 8px 2px rgba(255, 150, 50, .55);
  opacity: 0; animation: hw-ember var(--t, 12s) linear var(--dl, 0s) infinite; }
.hw-embers i:nth-child(3n) { width: 3px; height: 3px; background: #FFD27A; }
@keyframes hw-ember { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 25% { opacity: .8; } 70% { opacity: .55; } 100% { transform: translate3d(var(--x, 0), -60vh, 0); opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .hw-embers { display: none; } }
html.motion-off .hw-embers, html.lite .hw-embers { display: none; }
html.a11y-contrast .hw-lights, html.a11y-contrast .hw-embers, html.a11y-contrast .hw-branch { display: none; }

/* ------------------------------------------------------------------ the witch and the ghosts
   (Daniel, 13 Oct: A plus B's witch and C's ghosts) */
.hw-witch { position: absolute; left: -45%; top: 14%; width: 190%; pointer-events: none; z-index: 1; opacity: 0;
  animation: hw-witch 24s linear 4s infinite; filter: drop-shadow(0 0 1px rgba(255, 170, 70, .7)); }
.hw-witch svg { display: block; width: 100%; height: auto; }
@keyframes hw-witch {
  0% { transform: translate3d(-170%, 55%, 0) rotate(-6deg); opacity: 0; }
  2% { opacity: 1; }
  16% { opacity: 1; }
  18% { transform: translate3d(170%, -45%, 0) rotate(-10deg); opacity: 0; }
  100% { transform: translate3d(170%, -45%, 0) rotate(-10deg); opacity: 0; }
}
html[dir="rtl"] .hw-witch svg { transform: scaleX(-1); }
html[dir="rtl"] .hw-witch { animation-name: hw-witch-rtl; }
@keyframes hw-witch-rtl {
  0% { transform: translate3d(170%, 55%, 0) rotate(6deg); opacity: 0; }
  2% { opacity: 1; }
  16% { opacity: 1; }
  18% { transform: translate3d(-170%, -45%, 0) rotate(10deg); opacity: 0; }
  100% { transform: translate3d(-170%, -45%, 0) rotate(10deg); opacity: 0; }
}
.hw-ghosts { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.hw-ghost { position: absolute; display: block; opacity: .5; filter: drop-shadow(0 0 12px rgba(225, 215, 255, .75));
  animation: hw-bob 7s ease-in-out infinite alternate; }
.hw-ghost svg { display: block; width: 100%; height: auto; }
.hw-ghost-a { inset-inline-start: 49%; top: 36%; width: clamp(34px, 3.6vw, 56px); --r: -8deg; }
.hw-ghosts.is-game .hw-ghost-a { top: 11%; inset-inline-start: 57%; } /* the game page's phone sits mid-hero */
.hw-ghost-b { inset-inline-end: 2.5%; top: 47%; width: clamp(30px, 3vw, 46px); --r: 6deg; animation-delay: -2.4s; }
.hw-ghost-c { inset-inline-start: 2%; top: 62%; width: clamp(26px, 2.6vw, 40px); --r: 10deg; opacity: .4; animation-delay: -4.6s; }
@keyframes hw-bob { from { transform: translateY(0) rotate(var(--r)); } to { transform: translateY(-12px) rotate(calc(var(--r) * -.4)); } }
@media (max-width: 699px) { .hw-ghost-a { display: none; } .hw-ghost-b, .hw-ghost-c { width: 28px; } }
@media (prefers-reduced-motion: reduce) { .hw-witch, .hw-ghosts { display: none; } }
html.motion-off .hw-witch, html.motion-off .hw-ghosts, html.lite .hw-witch, html.lite .hw-ghosts,
html.a11y-contrast .hw-witch, html.a11y-contrast .hw-ghosts { display: none; }

/* the city's pumpkins and props never take a click or a hover (found by the 13 Oct sweep) */
.hw-roofs, .hw-props, .hw-lamps { pointer-events: none; }

/* attention to detail (13 Oct sweep):
   - on the game page between 700 and 899px the moon drops below the title, far from the branch;
     the branch only reads as "across the moon" where they meet
   - where the moon sits in the title itself (phones), the witch takes off from the moon away from
     the words instead of crossing them */
@media (min-width: 700px) and (max-width: 899px) { .hw-branch.is-game { display: none; } }
.moon-anchor .hw-witch, .ht-d .hw-witch { animation-name: hw-witch-away; }
html[dir="rtl"] .moon-anchor .hw-witch, html[dir="rtl"] .ht-d .hw-witch { animation-name: hw-witch-away-rtl; }
@keyframes hw-witch-away {
  0% { transform: translate3d(-10%, 20%, 0) rotate(-14deg) scale(.7); opacity: 0; }
  3% { opacity: 1; }
  15% { opacity: 1; }
  18% { transform: translate3d(140%, -160%, 0) rotate(-18deg) scale(.7); opacity: 0; }
  100% { transform: translate3d(140%, -160%, 0) rotate(-18deg) scale(.7); opacity: 0; }
}
@keyframes hw-witch-away-rtl {
  0% { transform: translate3d(10%, 20%, 0) rotate(14deg) scale(.7); opacity: 0; }
  3% { opacity: 1; }
  15% { opacity: 1; }
  18% { transform: translate3d(-140%, -160%, 0) rotate(18deg) scale(.7); opacity: 0; }
  100% { transform: translate3d(-140%, -160%, 0) rotate(18deg) scale(.7); opacity: 0; }
}

/* the home marquee's small text in the season's purple, lightened to pass 4.5:1 on the dark band
   (Lighthouse, 13 Oct: #8963C0 measured 4.3:1); the big wordmark keeps the game's own purple */
html[data-season="halloween"] .marquee-item:nth-child(5n+2), html[data-season="halloween"] .marquee-item:nth-child(5n) { color: #A07FD6; }

/* ------------------------------------------------------------------ phones: room for the lights
   (Daniel's iPhone, 13 Oct: the string lights hung over the first pill under the menu). Halloween
   only, in the stylesheet the edge links in <head>, so nothing moves after the page shows. */
@media (max-width: 699px) {
  html[data-season="halloween"] .hero .hero-tag, html[data-season="halloween"] .hero .hero-badge { margin-top: 26px; }
  .hw-web { width: 64px; opacity: .55; }
}

/* ------------------------------------------------------------------ below the hero, lightly */
html[data-season="halloween"] .section-label-h, html[data-season="halloween"] .sec-lbl-h { position: relative; z-index: 2; }
html[data-season="halloween"] .cta-title { z-index: 2; }
.hw-hang { position: absolute; top: calc(100% - 1px); left: calc(50% + 22px); width: 19px; pointer-events: none; transform-origin: 50% 0;
  animation: hw-sway 5.5s ease-in-out infinite alternate; filter: drop-shadow(0 0 1px rgba(255, 190, 120, .9)) drop-shadow(0 0 5px rgba(255, 150, 60, .45)); }
.hw-hang svg { display: block; width: 100%; height: auto; }
@keyframes hw-sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
html[data-season="halloween"] .team-card { position: relative; }
.hw-cweb { position: absolute; top: 0; inset-inline-end: 0; width: clamp(48px, 7vw, 72px); aspect-ratio: 1; pointer-events: none; z-index: 0; color: rgba(226, 216, 250, .2); }
html[dir="rtl"] .hw-cweb { transform: scaleX(-1); }
.hw-cweb svg { display: block; width: 100%; height: 100%; }
.hw-dangle { position: absolute; top: 0; inset-inline-start: 12%; width: 18px; pointer-events: none; z-index: 0;
  animation: hw-dangle 6s ease-in-out infinite alternate; }
.hw-dangle svg { display: block; width: 100%; height: auto; }
@keyframes hw-dangle { from { transform: translateY(-10px); } to { transform: translateY(4px); } }
@media (max-width: 699px) { .hw-dangle { inset-inline-start: auto; inset-inline-end: 18%; width: 15px; } }
/* the marquee's separators: little pumpkins */
html[data-season="halloween"] .marquee-item .sep { position: relative; width: 14px !important; height: 12px !important; border-radius: 50% / 55% !important;
  background: radial-gradient(circle at 40% 38%, #FFB04D, #EE7A1E 60%, #B4500F) !important; box-shadow: 0 0 8px rgba(255, 150, 60, .55) !important; }
html[data-season="halloween"] .marquee-item .sep::before { content: ""; position: absolute; left: 6px; top: -4px; width: 2px; height: 5px; border-radius: 1px; background: #5E8A2C; }
@media (prefers-reduced-motion: reduce) { .hw-hang, .hw-dangle { animation: none; } }
html.motion-off .hw-hang, html.motion-off .hw-dangle, html.lite .hw-hang, html.lite .hw-dangle { animation: none; }
html.a11y-contrast .hw-hang, html.a11y-contrast .hw-cweb, html.a11y-contrast .hw-dangle { display: none; }