/* Roidboard Halloween header (plugin rb_season, 20 October to 7 November). Loaded only on those days.
   The decorations sit around the real logo: sizes are in em of the wordmark, so they follow the logo on every page
   and screen (52px on the board index, 36px on other pages, 24px to 34px on phones). */

.rb-hero.is-halloween{background:#0d0716 url(/images/roidboard/banner-halloween.jpg?v=2) center/cover no-repeat}
.rb-hero.is-halloween::after{display:none}

/* the logo: orange icon, orange BOARD, a warm glow */
.rb-hero.is-halloween .rb-logo{position:relative}
.rb-hero.is-halloween .rb-wm-orb{position:relative;display:inline-flex}
.rb-hero.is-halloween .rb-wm-orb .rb-orb rect{fill:#ea580c}
.rb-hero.is-halloween .rb-wm-orb .rb-orb{box-shadow:0 0 0 2px rgba(253,186,116,.25),0 0 26px rgba(249,115,22,.55),0 8px 24px rgba(0,0,0,.45);border-radius:9px}
.rb-hero.is-halloween .rb-wm-l{position:relative;color:#fff7ed;text-shadow:0 0 18px rgba(249,115,22,.45),0 2px 14px rgba(0,0,0,.6)}
.rb-hero.is-halloween .rb-wm-l b{color:#fb923c;-webkit-text-fill-color:#fb923c;text-shadow:0 0 16px rgba(249,115,22,.7),0 2px 12px rgba(0,0,0,.55)}
.rb-hero.is-halloween .rb-logo .rb-tagline{color:#fed7aa;letter-spacing:.42em;text-shadow:0 0 10px rgba(249,115,22,.5),0 1px 6px rgba(0,0,0,.8)}
.rb-hero.is-halloween .rb-logo .rb-tagline::before,.rb-hero.is-halloween .rb-logo .rb-tagline::after{background:rgba(251,146,60,.55)}

/* witch hat, tipped on the icon */
.rb-hw-hat{position:absolute;left:-26%;top:-62%;width:112%;pointer-events:none;transform:rotate(-16deg);transform-origin:50% 90%;
 filter:drop-shadow(0 3px 6px rgba(0,0,0,.55));z-index:2}
.rb-hw-hat svg{display:block;width:100%;height:auto}

/* the jack-o'-lantern sits on the end of BOARD and glows */
.rb-hw-pumpkin{position:absolute;right:-.5em;top:-.52em;width:.66em;pointer-events:none;transform:rotate(12deg);z-index:2;
 filter:drop-shadow(0 0 .18em rgba(249,115,22,.85)) drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.rb-hw-pumpkin svg{display:block;width:100%;height:auto}
.rb-hw-pumpkin svg path[fill="#fde047"]{animation:rb-hw-flicker 3.2s ease-in-out infinite}
@keyframes rb-hw-flicker{0%,100%{opacity:1}42%{opacity:.82}46%{opacity:1}70%{opacity:.88}}

/* a cobweb hanging over the middle of the wordmark */
.rb-hw-web{position:absolute;left:46%;top:-.72em;width:.95em;opacity:.38;pointer-events:none;z-index:0}
.rb-hw-web svg{display:block;width:100%;height:auto}

/* two small bats around the logo, flapping slowly */
.rb-hw-bat{position:absolute;pointer-events:none;z-index:2;filter:drop-shadow(0 0 4px rgba(249,115,22,.35))}
.rb-hw-bat svg{display:block;width:100%;height:auto;animation:rb-hw-flap .42s ease-in-out infinite alternate;transform-origin:50% 50%}
.rb-hw-bat.is-a{width:30px;right:-46px;top:2px;animation:rb-hw-float-a 7s ease-in-out infinite}
.rb-hw-bat.is-b{width:22px;left:-40px;bottom:6px;animation:rb-hw-float-b 9s ease-in-out infinite}
.rb-hw-bat.is-b svg{animation-duration:.36s}
@keyframes rb-hw-flap{from{transform:scaleY(1)}to{transform:scaleY(.45)}}
@keyframes rb-hw-float-a{0%,100%{transform:translate(0,0) rotate(-6deg)}50%{transform:translate(-10px,-8px) rotate(4deg)}}
@keyframes rb-hw-float-b{0%,100%{transform:translate(0,0) rotate(6deg)}50%{transform:translate(8px,-10px) rotate(-4deg)}}

/* phones: smaller bats, closer in, so nothing leaves the screen */
@media (max-width:760px){
  .rb-hw-bat.is-a{width:22px;right:-26px;top:-4px}
  .rb-hw-bat.is-b{width:16px;left:-22px;bottom:2px}
  .rb-hw-hat{top:-58%}
}

/* someone who asked for less motion gets the same look, standing still */
@media (prefers-reduced-motion:reduce){
  .rb-hw-bat,.rb-hw-bat svg,.rb-hw-pumpkin svg path{animation:none!important}
}

/* RB-HALLOWEEN-PHONE-20261028 (owner asked why the Halloween header is missing on phones). A rule from UX 1.1 hides the hero for logged in members on the index on phones. This file only loads from 20 Oct to 7 Nov, so during the season the header stays. */
@media (max-width:760px){
  .rb-shell:has(.rb-index):has(#rb-member-flag) > .rb-hero.is-halloween,.rb-shell.rb-page-index.rb-is-member > .rb-hero.is-halloween{display:block}
}