/* Halloween theme (Canvas mockup, 16 Oct 2026): friendly, warm, family. Pumpkins, autumn leaves, candle glow, a cute
   bat and a cute ghost. Colours only through tokens (Daylight and Lamplight), motion only transform and opacity, every
   animation runs a fixed number of times (about a minute at most) and then rests, so phones do not keep painting. */
:root {
  --hw-pk: #E8792E; --hw-pks: #CF6420; --hw-rib: #A94C15; --hw-shine: #F7AE66; --hw-stem: #6B5A2E; --hw-leafg: #6F8B3A;
  --hw-carve: #FFD36A; --hw-cheek: rgba(232, 96, 70, .45); --hw-glow: rgba(255, 196, 90, .38);
  --hw-bat: #3F3648; --hw-batw: #554A62; --hw-ghost: #FFFFFF; --hw-ghost-edge: #CFC4B2; --hw-string: #9A7B5C;
  --hw-moon: #FBE39F; --hw-crater: #F3D27E; --hw-wax: #F4EAD6; --hw-orange: #E8842F;
  --hw-lf-gold: #F0B03A; --hw-lf-orange: #E07B2E; --hw-lf-rust: #B4532A; --hw-lf-vein: rgba(60, 30, 10, .28);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hw-pk: #DD7333; --hw-pks: #BC5E25; --hw-rib: #8C4016; --hw-shine: #EFA261; --hw-stem: #8A7A48; --hw-leafg: #7F9B48;
    --hw-carve: #FFDF85; --hw-cheek: rgba(240, 120, 90, .4); --hw-glow: rgba(255, 190, 80, .5);
    --hw-bat: #9384AC; --hw-batw: #7C6E95; --hw-ghost: #EEE7DC; --hw-ghost-edge: #8A8174; --hw-string: #8C7760;
    --hw-moon: #E9D59C; --hw-crater: #D9C384; --hw-wax: #E6DCC8; --hw-orange: #DE7E36;
    --hw-lf-gold: #F2BD51; --hw-lf-orange: #DE7E36; --hw-lf-rust: #C2643A; --hw-lf-vein: rgba(30, 15, 5, .35);
  }
}
:root[data-theme="dark"] {
  --hw-pk: #DD7333; --hw-pks: #BC5E25; --hw-rib: #8C4016; --hw-shine: #EFA261; --hw-stem: #8A7A48; --hw-leafg: #7F9B48;
  --hw-carve: #FFDF85; --hw-cheek: rgba(240, 120, 90, .4); --hw-glow: rgba(255, 190, 80, .5);
  --hw-bat: #9384AC; --hw-batw: #7C6E95; --hw-ghost: #EEE7DC; --hw-ghost-edge: #8A8174; --hw-string: #8C7760;
  --hw-moon: #E9D59C; --hw-crater: #D9C384; --hw-wax: #E6DCC8; --hw-orange: #DE7E36;
  --hw-lf-gold: #F2BD51; --hw-lf-orange: #DE7E36; --hw-lf-rust: #C2643A; --hw-lf-vein: rgba(30, 15, 5, .35);
}

/* Sprite parts (selectors match the symbol originals; the clones inherit the colours). */
.hw-pk { fill: var(--hw-pk); } .hw-pks { fill: var(--hw-pks); } .hw-rib { stroke: var(--hw-rib); } .hw-shine { fill: var(--hw-shine); opacity: .7; }
.hw-stem { fill: var(--hw-stem); } .hw-leafg { fill: var(--hw-leafg); } .hw-vine { stroke: var(--hw-leafg); }
.hw-carve { fill: var(--hw-carve); } .hw-cheek { fill: var(--hw-cheek); }
.hw-batb { fill: var(--hw-bat); } .hw-batw { fill: var(--hw-batw); }
.hw-lf { fill: var(--lf, var(--hw-lf-gold)); } .hw-lfv { stroke: var(--hw-lf-vein); }
.lf-gold { --lf: var(--hw-lf-gold); } .lf-orange { --lf: var(--hw-lf-orange); } .lf-rust { --lf: var(--hw-lf-rust); }
.hw-string { stroke: var(--hw-string); }
.hw-ghost-body { fill: var(--hw-ghost); stroke: var(--hw-ghost-edge); }
.hw-wax { fill: var(--hw-wax); }
.hw-moon-disc { fill: var(--hw-moon); } .hw-crater { fill: var(--hw-crater); }
.hw-glow { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, var(--hw-glow), rgba(255, 190, 80, 0)); }

/* ambient: one bat crosses the sky band once per page view, then it is gone. */
.hw-flyby { position: absolute; top: 1px; left: 0; width: 40px; animation: hw-flyby 13s linear 1.6s 1 both; }
.hw-bob { display: block; animation: hw-bob 1.3s ease-in-out 1.6s 10 alternate; }
.hw-bob .hw-bat-svg { width: 40px; height: 21px; }
.hw-bob .hw-wing-l { animation: hw-wing-l .2s ease-in-out 1.6s 64 alternate; }
.hw-bob .hw-wing-r { animation: hw-wing-r .2s ease-in-out 1.6s 64 alternate; }

/* foot: pumpkin patch on the footer arch, a candle, two leaves; the ghost peeks out on full pages. */
.hw-patch { position: absolute; right: 22%; bottom: -10px; width: 170px; height: 74px; transform-origin: 100% 100%; }
.hw-patch > * { position: absolute; }
.hw-patch .hw-ghost { left: 22px; bottom: 26px; width: 38px; animation: hw-peek 3.4s ease-in-out 2s 12 alternate; }
.hw-patch .hw-ghost svg { width: 38px; height: 46px; }
.hw-patch .hw-glow { left: 22px; bottom: -14px; width: 100px; height: 84px; animation: hw-candle-glow 2.6s ease-in-out 18 alternate; }
.hw-p-jack { left: 42px; bottom: 0; width: 60px; height: 54px; }
.hw-p-small { left: 100px; bottom: 0; width: 34px; height: 31px; }
.hw-candle { left: 138px; bottom: 1px; width: 15px; }
.hw-candle svg { width: 15px; height: 30px; }
.hw-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: hw-flicker .9s ease-in-out 60 alternate; }
.hw-p-leaf1 { left: 4px; bottom: -2px; width: 24px; height: 24px; transform: rotate(-24deg); }
.hw-p-leaf2 { left: 152px; bottom: -3px; width: 18px; height: 18px; transform: rotate(32deg); }
@media (max-width: 699px) { .hw-patch { transform: scale(.8); right: 18%; } }

/* home.hero: harvest moon and two bats beside the title, leaves drifting down the corners, a lit pumpkin patch. */
.hw-moon { position: absolute; left: max(24px, calc(50% - 584px)); top: 58px; width: 104px; height: 104px; opacity: .92; }
.hw-hover { position: absolute; width: 40px; }
.hw-hover-1 { left: max(150px, calc(50% - 490px)); top: 40px; animation: hw-hover 6s ease-in-out 1s 8; }
.hw-hover-2 { left: max(20px, calc(50% - 616px)); top: 196px; animation: hw-hover 7s ease-in-out 2s 7 reverse; }
.hw-hover-2 .hw-bat-svg { width: 30px; height: 16px; }
.hw-flap { display: block; }
.hw-flap .hw-bat-svg { width: 40px; height: 21px; }
.hw-flap .hw-wing-l { animation: hw-wing-l .22s ease-in-out 1s 216 alternate; }
.hw-flap .hw-wing-r { animation: hw-wing-r .22s ease-in-out 1s 216 alternate; }
/* Sergiu, 16 Oct 2026: only the wings flap, each turning at its shoulder; the body and face stay as drawn. */
.hw-wing { transform-box: view-box; }
.hw-wing-l { transform-origin: 27px 15px; }
.hw-wing-r { transform-origin: 37px 15px; }
.hw-fall { position: absolute; top: -30px; width: 22px; height: 22px; opacity: 0; --dx: 30px; --dy: 520px; --rot: 220deg;
  animation: hw-fall 11s ease-in 3; }
.hw-fall svg { width: 100%; height: 100%; }
.hw-fall-1 { left: max(14px, calc(50% - 600px)); animation-delay: .4s; }
.hw-fall-2 { left: max(70px, calc(50% - 548px)); animation-delay: 4.2s; animation-duration: 13s; --dx: -18px; --rot: -180deg; width: 18px; height: 18px; }
.hw-fall-3 { right: max(14px, calc(50% - 600px)); animation-delay: 2.1s; --dx: -26px; --rot: 160deg; }
.hw-fall-4 { right: max(80px, calc(50% - 536px)); animation-delay: 6.5s; animation-duration: 12s; --dx: 16px; --rot: -240deg; width: 18px; height: 18px; }
.hw-hero-patch { position: absolute; right: max(40px, calc(50% - 576px)); top: 470px; width: 150px; height: 80px; }
.hw-hero-patch > * { position: absolute; }
.hw-hero-patch .hw-glow { left: 0; top: 0; width: 110px; height: 90px; animation: hw-candle-glow 2.8s ease-in-out 1s 16 alternate; }
.hw-hp-jack { left: 22px; bottom: 0; width: 66px; height: 60px; }
.hw-hp-small { left: 86px; bottom: 0; width: 40px; height: 36px; }
.hw-hp-leaf { left: 122px; bottom: -2px; width: 24px; height: 24px; transform: rotate(28deg); }
@media (max-width: 699px) {
  .hw-moon { left: auto; right: -18px; top: 26px; width: 56px; height: 56px; }
  .hw-hover-1 { left: auto; right: 26px; top: 36px; }
  .hw-hover-2, .hw-fall-2, .hw-fall-4 { display: none; }
  .hw-fall { --dy: 70px; }
  .hw-fall-1 { left: 6px; } .hw-fall-3 { right: 64px; --dx: 8px; }
  .hw-hero-patch { right: auto; left: 8px; top: 26px; width: 92px; height: 44px; }
  .hw-hero-patch .hw-glow { width: 70px; height: 50px; top: -4px; }
  .hw-hp-jack { left: 4px; width: 42px; height: 38px; }
  .hw-hp-small { left: 44px; width: 26px; height: 24px; }
  .hw-hp-leaf { left: 70px; width: 18px; height: 18px; }
}

@media (max-width: 389px) {
  /* narrow phones: the full garland tucks 7 px under the header edge, the hero patch keeps only the lit pumpkin */
  .season-head:not(.season-head-thin) > svg { top: -7px; }
  .hw-hero-patch .hw-hp-small, .hw-hero-patch .hw-hp-leaf { display: none; }
}

/* cause.give: one leaf and a small pumpkin tucked on the give box corner, still; the progress bar in autumn stripes. */
.season-give { top: -17px; right: 18px; width: 64px; height: 36px; }
.season-give > svg { position: absolute; }
.hw-g-leaf { left: 0; top: 8px; width: 24px; height: 24px; transform: rotate(-22deg); }
.hw-g-pumpkin { right: 0; top: 0; width: 38px; height: 34px; }
:root[data-season="halloween"]:not([data-season-off]) .give-box progress.progress::-webkit-progress-value { background: repeating-linear-gradient(-45deg, var(--gold) 0 7px, var(--hw-orange) 7px 14px); }
:root[data-season="halloween"]:not([data-season-off]) .give-box progress.progress::-moz-progress-bar { background: repeating-linear-gradient(-45deg, var(--gold) 0 7px, var(--hw-orange) 7px 14px); }

@keyframes hw-flyby { 0% { transform: translateX(-60px); opacity: 0; } 4% { opacity: 1; } 96% { opacity: 1; } 100% { transform: translateX(calc(100vw + 20px)); opacity: 0; } }
@keyframes hw-bob { from { transform: translateY(0); } to { transform: translateY(5px); } }
@keyframes hw-wing-l { from { transform: rotate(-10deg); } to { transform: rotate(26deg); } }
@keyframes hw-wing-r { from { transform: rotate(10deg); } to { transform: rotate(-26deg); } }
@keyframes hw-hover { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(9px, -6px); } 50% { transform: translate(18px, 0); } 75% { transform: translate(9px, 5px); } }
@keyframes hw-fall { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 8% { opacity: 1; } 80% { opacity: .9; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }
@keyframes hw-peek { from { transform: translate(0, 0); } to { transform: translate(-4px, -7px); } }
@keyframes hw-flicker { from { transform: scale(1, 1); opacity: 1; } to { transform: scale(.9, 1.08); opacity: .85; } }
@keyframes hw-candle-glow { from { opacity: .55; } to { opacity: 1; } }
/* Build check (16 Oct, all four languages): the Spanish eyebrow line ("0% de comisión de la plataforma") starts at x 96 px
   at 412 px wide and x 50 px at 320 px, so up to 439 px only the lit jack-o'-lantern stays on the left, tucked to the
   edge with a narrower glow, and under 340 px the first bat goes (the same line reaches it there). */
@media (max-width: 439px) {
  .hw-hero-patch { left: -4px; }
  .hw-hero-patch .hw-glow { width: 48px; }
  .hw-hero-patch .hw-hp-small, .hw-hero-patch .hw-hp-leaf { display: none; }
}
@media (max-width: 339px) { .hw-hover-1 { display: none; } }
/* Review fix (Canvas, 16 Oct 2026), after the 439 px block: on phones the hero pieces keep clear of every language's
   eyebrow and first title line at 320 to 439 px (ES is the longest eyebrow, NL and ES the widest first lines). */
@media (max-width: 439px) {
  .hw-moon { right: -14px; top: 16px; width: 48px; height: 48px; }
  .hw-fall-1 { --dx: 0px; }
  .hw-fall-3 { right: 12px; --dx: 0px; }
}
@media (max-width: 369px) { .hw-hover-1 { display: none; } }