/* ===== Seasonal themes (toggled from the dev panel via window.IYEN.theme) ===== */

.season-layer{position:fixed;inset:0;pointer-events:none;z-index:9990;overflow:hidden;}
#snowCanvas{position:fixed;inset:0;pointer-events:none;z-index:9991;}

/* ---------- CHRISTMAS ---------- */
/* Just falling snow (the #snowCanvas, drawn in theme.js). No snow on buttons. */

/* ---------- HALLOWEEN ---------- */
.spook-tint{position:absolute;inset:0;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(255,120,0,.16), transparent 70%),
    radial-gradient(75% 60% at 50% 100%, rgba(124,58,237,.20), transparent 70%),
    radial-gradient(120% 95% at 50% 45%, transparent 52%, rgba(0,0,0,.45) 100%);}
.cobweb{position:absolute;font-size:78px;line-height:1;opacity:.45;filter:grayscale(.25) drop-shadow(0 2px 4px rgba(0,0,0,.6));}
.cobweb.cw-l{top:-16px;left:-12px;transform:rotate(-8deg);}
.cobweb.cw-r{top:-16px;right:-12px;transform:scaleX(-1) rotate(-8deg);}
.spook{position:absolute;bottom:-60px;will-change:transform,opacity;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.55));animation:floatUp linear infinite;}
@keyframes floatUp{
  0%{transform:translateY(0) rotate(0deg);opacity:0;}
  10%{opacity:1;} 90%{opacity:1;}
  100%{transform:translateY(-118vh) rotate(360deg);opacity:0;}
}
.bat{position:absolute;will-change:transform;animation:flyAcross linear infinite;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6));}
@keyframes flyAcross{
  from{transform:translateX(-14vw) translateY(0);}
  50%{transform:translateX(50vw) translateY(-6vh);}
  to{transform:translateX(114vw) translateY(2vh);}
}
/* spooky orange glow on the key buttons */
body.theme-halloween .btn-primary,
body.theme-halloween .nav-sub,
body.theme-halloween .nav-follow{
  box-shadow:0 0 16px rgba(255,120,0,.55), 0 12px 30px rgba(255,90,0,.4), inset 0 1px 0 rgba(255,255,255,.4) !important;
}