/* Haunted Harlem is decorative and opt-in. Normal pages use no rule in this file. */
html[data-seasonal-theme="haunted"] body {
  background: radial-gradient(circle at 80% 6%, rgba(118, 31, 178, .18), transparent 32rem),
    radial-gradient(circle at 6% 55%, rgba(118, 31, 178, .09), transparent 30rem), var(--void-black, #030105);
}
html[data-seasonal-theme="haunted"] .site-header,
html[data-seasonal-theme="haunted"] .portal-header {
  border-color: rgba(210, 173, 104, .25);
}
html[data-seasonal-theme="haunted"] .button-primary:hover,
html[data-seasonal-theme="haunted"] .button-primary:focus-visible {
  box-shadow: 0 0 0 2px rgba(210, 173, 104, .34), 0 0 24px rgba(186, 56, 255, .3);
}
html[data-seasonal-theme="haunted"] section.hero,
html[data-seasonal-theme="haunted"] .page-hero,
html[data-seasonal-theme="haunted"] .inner-hero,
html[data-seasonal-theme="haunted"] .events-hero,
html[data-seasonal-theme="haunted"] .portfolio-hero,
html[data-seasonal-theme="haunted"] .join-hero,
html[data-seasonal-theme="haunted"] .partners-hero,
html[data-seasonal-theme="haunted"] .spotlight-hero,
html[data-seasonal-theme="haunted"] .status-hero,
html[data-seasonal-theme="haunted"] .login-shell {
  position: relative;
  isolation: isolate;
}
.haunted-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .65;
}
html[data-seasonal-intensity="full"] .haunted-sky { opacity: 1; }
html[data-seasonal-intensity="off"] .haunted-sky { opacity: .42; }
.haunted-sky ~ * { position: relative; z-index: 1; }
.haunted-moon {
  position: absolute;
  top: clamp(5rem, 11vw, 10rem);
  right: clamp(1rem, 14vw, 14rem);
  width: clamp(5rem, 13vw, 10rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 33%, #ead7f4 0, #ba8ad2 45%, #70418d 76%, #412557 100%);
  box-shadow: 0 0 3rem rgba(186, 56, 255, .4), 0 0 7rem rgba(126, 35, 188, .23);
  opacity: .76;
}
.haunted-fog {
  position: absolute;
  left: -10%;
  bottom: 1%;
  width: 120%;
  height: 36%;
  background: radial-gradient(ellipse at 25% 80%, rgba(126, 57, 166, .26), transparent 49%),
    radial-gradient(ellipse at 75% 70%, rgba(198, 128, 221, .14), transparent 52%);
  animation: haunted-drift 24s ease-in-out infinite alternate;
}
.haunted-fog-far { bottom: 19%; opacity: .5; animation-direction: alternate-reverse; animation-duration: 31s; }
.haunted-bat { position: absolute; width: 2.2rem; height: 1.2rem; fill: #09050e; filter: drop-shadow(0 0 .15rem #b266d0); }
.haunted-bat-1 { top: 25%; right: 28%; transform: rotate(-12deg); animation: haunted-wing 9s ease-in-out infinite alternate; }
.haunted-bat-2 { top: 19%; right: 17%; width: 1.5rem; opacity: .7; animation: haunted-wing 11s ease-in-out infinite alternate-reverse; }
.haunted-bat-3 { top: 35%; right: 12%; width: 1.1rem; opacity: .5; animation: haunted-wing 13s ease-in-out infinite alternate; }
html[data-seasonal-intensity="off"] .haunted-fog,
html[data-seasonal-intensity="off"] .haunted-bat { display: none; }
.haunted-label, .haunted-countdown {
  display: inline-block;
  position: relative;
  z-index: 3;
  margin: 0 0 1.2rem;
  padding: .45rem .8rem;
  border: 1px solid rgba(210, 173, 104, .38);
  background: rgba(9, 5, 14, .84);
  color: #f2e5f7;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.haunted-label { color: #ddbd7e; border-color: rgba(210, 173, 104, .2); }
html[data-seasonal-theme="haunted"] .portal-page .portal-shell,
html[data-seasonal-theme="haunted"] .verification-main {
  background-image: radial-gradient(circle at 96% 0, rgba(154, 64, 208, .12), transparent 23rem);
}
@keyframes haunted-drift { to { transform: translateX(7%); } }
@keyframes haunted-wing { to { transform: translate(1.1rem, -.4rem) rotate(8deg); } }
@media (max-width: 620px) {
  .haunted-moon { top: 6.5rem; right: 1.4rem; width: 5rem; opacity: .38; }
  .haunted-bat-1 { right: 16%; top: 17%; }
  .haunted-bat-2, .haunted-bat-3 { display: none; }
  .haunted-fog { height: 23%; }
  .haunted-countdown { max-width: 100%; font-size: .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .haunted-fog, .haunted-bat { animation: none !important; }
  .haunted-fog { opacity: .35; }
}