/* Hexar.io Halloween 2026 - WH1 "pirate night". On: <html class="halloween-2026"> + this stylesheet. */
html.halloween-2026{--hx-rival:#FFA100;--hx-rival-pend:#FFE6BC;--hw-orange:#FF7A1A;--hw-purple:#3B1E5A;
  --head:#3B1E5A;--hw-bat:#3B1E5A;--hw-star:rgba(59,30,90,.35);--hw-sky-a:#E9DEF7;--hw-sky-b:rgba(255,230,188,.4);--hw-moon:#FFD9A0;
  --shadow-board:0 10px 30px rgba(255,122,26,.30)}
html.halloween-2026[data-theme=dark]{--head:#2A1646;--hw-bat:#0B0614;--hw-star:#fff;--hw-sky-a:#2A1646;--hw-sky-b:rgba(59,30,90,.35);--hw-moon:#FFE9A8;
  --shadow-board:0 0 0 1px rgba(255,122,26,.45),0 10px 40px rgba(255,122,26,.30)}
@media (prefers-color-scheme:dark){html.halloween-2026:not([data-theme=light]){--head:#2A1646;--hw-bat:#0B0614;--hw-star:#fff;--hw-sky-a:#2A1646;--hw-sky-b:rgba(59,30,90,.35);--hw-moon:#FFE9A8;
  --shadow-board:0 0 0 1px rgba(255,122,26,.45),0 10px 40px rgba(255,122,26,.30)}}

html.halloween-2026 .top{border-bottom:4px solid var(--hw-orange)}
html.halloween-2026 .get{border-top:4px solid var(--hw-orange)}
html.halloween-2026 section h2::after{content:"";display:block;width:56px;height:6px;margin-top:10px;border-radius:3px;background:var(--hw-orange)}
html.halloween-2026 .get h2::after{margin-inline:auto}
html.halloween-2026 .link-btn{border-color:var(--hw-orange)}

/* night sky behind the hero */
html.halloween-2026 main{position:relative;z-index:0;overflow-x:clip}
html.halloween-2026 main::before{content:"";position:absolute;inset:0 0 auto 0;height:720px;z-index:-1;pointer-events:none;
  background:
   url(assets/halloween-moon.svg) right 75px top 59px/42px 42px no-repeat,
   radial-gradient(circle at calc(100% - 96px) 80px,rgba(255,201,60,.22) 22px,transparent 64px),
   radial-gradient(1.5px 1.5px at 6% 90px,var(--hw-star) 50%,transparent 100%),
   radial-gradient(1.5px 1.5px at 14% 40px,var(--hw-star) 50%,transparent 100%),
   radial-gradient(2px 2px at 23% 150px,var(--hw-star) 50%,transparent 100%),
   radial-gradient(1.5px 1.5px at 33% 60px,var(--hw-star) 50%,transparent 100%),
   radial-gradient(1.5px 1.5px at 44% 120px,var(--hw-star) 50%,transparent 100%),
   radial-gradient(2px 2px at 52% 30px,var(--hw-star) 50%,transparent 100%),
   radial-gradient(1.5px 1.5px at 61% 95px,var(--hw-star) 50%,transparent 100%),
   radial-gradient(1.5px 1.5px at 70% 45px,var(--hw-star) 50%,transparent 100%),
   radial-gradient(2px 2px at 78% 140px,var(--hw-star) 50%,transparent 100%),
   radial-gradient(1.5px 1.5px at 88% 35px,var(--hw-star) 50%,transparent 100%),
   radial-gradient(1.5px 1.5px at 94% 160px,var(--hw-star) 50%,transparent 100%),
   linear-gradient(180deg,var(--hw-sky-a) 0,var(--hw-sky-b) 70%,transparent 100%)}
html.halloween-2026 main::after{content:"";position:absolute;left:62%;top:20px;width:260px;height:70px;z-index:-1;pointer-events:none;
  background:var(--hw-bat);-webkit-mask:url(assets/halloween-bats.svg) no-repeat center/contain;mask:url(assets/halloween-bats.svg) no-repeat center/contain}
@media (prefers-reduced-motion:no-preference){
 html.halloween-2026 main::after{left:0;animation:hw-fly 60s linear infinite}
 @keyframes hw-fly{from{transform:translateX(-300px)}to{transform:translateX(100vw)}}
}

/* pirate-hat avatar as the hero character, perched under the board */
html.halloween-2026 .hero-board{position:relative}
html.halloween-2026 .hero-board::after{content:"";position:absolute;right:12px;bottom:-40px;width:88px;height:88px;pointer-events:none;
  background:url(assets/halloween-pirate-192.webp) center/contain no-repeat;
  background-image:image-set(url(assets/halloween-pirate-192.webp) 1x,url(assets/halloween-pirate-512.webp) 2x);
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
@media (min-width:900px){html.halloween-2026 .hero-board::after{right:-18px;bottom:-52px;width:140px;height:140px}}