/* Optional Halloween layer shared by the modern and legacy views. */
.psy-halloween {
  --psy-halloween-orange: #ff7a18;
  --psy-halloween-purple: #9d4edd;
  position: fixed;
  z-index: 100;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
body.admin-bar .psy-halloween { top: 32px; }

.psy-halloween__lights {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 18px;
  border-top: 2px solid rgba(32, 22, 36, .85);
}
.psy-halloween__lights::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 9px;
  border-bottom: 2px solid rgba(32, 22, 36, .7);
  border-radius: 0 0 50% 50%;
  content: "";
}
.psy-halloween__lights span {
  position: relative;
  z-index: 1;
  width: 7px;
  height: 11px;
  margin-top: 7px;
  border-radius: 55% 55% 50% 50%;
  background: var(--psy-halloween-orange);
  box-shadow: 0 0 7px 2px rgba(255, 122, 24, .72);
  animation: psy-halloween-glow 2.4s ease-in-out infinite alternate;
}
.psy-halloween__lights span:nth-child(even) {
  background: var(--psy-halloween-purple);
  box-shadow: 0 0 7px 2px rgba(157, 78, 221, .68);
  animation-delay: -1.2s;
}
.psy-halloween__lights span::before {
  position: absolute;
  top: -4px;
  left: 2px;
  width: 3px;
  height: 5px;
  border-radius: 2px;
  background: #242127;
  content: "";
}

.psy-halloween__web {
  position: absolute;
  top: 0;
  width: 112px;
  height: 112px;
  fill: none;
  stroke: rgba(230, 225, 235, .58);
  stroke-linecap: round;
  stroke-width: 1.25;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
}
.psy-halloween__web--left { left: 0; }
.psy-halloween__web--right { right: 0; transform: scaleX(-1); }
.psy-theme-light .psy-halloween__web { stroke: rgba(63, 47, 70, .38); }

.psy-halloween__bat {
  position: absolute;
  fill: #17121b;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35));
  transform-origin: 50% 50%;
  animation: psy-halloween-float 5s ease-in-out infinite;
}
.psy-halloween__bat--one { top: 88px; left: 8%; width: 48px; transform: rotate(-9deg); }
.psy-halloween__bat--two { top: 116px; right: 11%; width: 38px; transform: rotate(12deg); animation-delay: -2.1s; }
.psy-halloween__bat--three { top: 82px; right: 28%; width: 27px; opacity: .72; animation-delay: -3.4s; }
.psy-theme-dark .psy-halloween__bat { fill: #070609; }

.psy-halloween__pumpkin {
  position: absolute;
  right: 22px;
  bottom: 16px;
  width: 58px;
  height: 58px;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .38));
  animation: psy-halloween-bob 4s ease-in-out infinite;
}
.psy-halloween__stem { fill: none; stroke: #526d2c; stroke-linecap: round; stroke-width: 7; }
.psy-halloween__pumpkin-body { fill: var(--psy-halloween-orange); stroke: #c64b0a; stroke-width: 2; }
.psy-halloween__pumpkin-lines { fill: none; stroke: rgba(136, 49, 5, .5); stroke-width: 2; }
.psy-halloween__face { fill: #28132d; }

@keyframes psy-halloween-glow {
  from { opacity: .72; transform: scale(.92); }
  to { opacity: 1; transform: scale(1.08); }
}
@keyframes psy-halloween-float {
  0%, 100% { margin-top: 0; }
  50% { margin-top: 7px; }
}
@keyframes psy-halloween-bob {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(-5px); }
}

@media (max-width: 767px) {
  .psy-halloween__web { width: 78px; height: 78px; opacity: .75; }
  .psy-halloween__bat--two,
  .psy-halloween__bat--three { display: none; }
  .psy-halloween__bat--one { top: 76px; left: 18%; width: 32px; opacity: .8; }
  .psy-halloween__pumpkin { right: 10px; bottom: 9px; width: 44px; height: 44px; }
}

@media (max-width: 782px) {
  body.admin-bar .psy-halloween { top: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .psy-halloween__lights span,
  .psy-halloween__bat,
  .psy-halloween__pumpkin { animation: none; }
}

@media print {
  .psy-halloween { display: none !important; }
}