/* ============================================================
   SPACE Seasonal Effects · Halloween v2.3
   Cinematic, contained, non-interactive. Scoped to Classic.
   ============================================================ */

.space-seasonal-root { display: none !important; }

/* Atmospheric light, never a control or a layout element. */
.space-halloween-body-atmosphere {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none !important;
  isolation: isolate;
}
.space-halloween-body-atmosphere::before,
.space-halloween-body-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.space-halloween-body-atmosphere::before {
  background:
    radial-gradient(circle at 8% 13%, rgba(218, 93, 21, .055), transparent 28rem),
    radial-gradient(circle at 90% 8%, rgba(244, 160, 69, .035), transparent 22rem);
}
.space-halloween-body-atmosphere::after {
  background: linear-gradient(to bottom, rgba(5, 5, 9, .018), transparent 35%);
}

/* Only apply stacking to the existing cover while Halloween is present. */
.hero > .cover.space-halloween-cover-active {
  isolation: isolate;
}
.hero .cover > .coverMedia { z-index: 0; }
.hero .cover > .coverOverlay { z-index: 1; }
.hero .cover > .space-halloween-hero-atmosphere { z-index: 2; }
.hero .cover > .space-halloween-hero-scene { z-index: 6; }
.hero .cover > .coverBottom { z-index: 7; }

.space-halloween-hero-atmosphere,
.space-halloween-hero-scene {
  position: absolute;
  inset: 0;
  pointer-events: none !important;
  overflow: hidden;
  border-radius: inherit;
}
.space-halloween-hero-atmosphere::before,
.space-halloween-hero-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.space-halloween-hero-atmosphere::before {
  background:
    radial-gradient(ellipse at 12% 20%, rgba(227, 100, 28, .18), transparent 46%),
    radial-gradient(ellipse at 90% 10%, rgba(240, 165, 71, .06), transparent 40%);
  opacity: .92;
}
.space-halloween-hero-atmosphere::after {
  background: linear-gradient(180deg, rgba(12, 9, 8, .04), transparent 35%, rgba(9, 7, 8, .1));
}
.space-halloween-art {
  position: absolute;
  display: block;
  object-fit: contain;
  user-select: none;
  pointer-events: none !important;
  -webkit-user-drag: none;
}
.space-halloween-web {
  top: -9px;
  left: -9px;
  width: 62px;
  height: 62px;
  opacity: .82;
  filter: none;
}
.space-halloween-pumpkin {
  left: clamp(9px, 2vw, 20px);
  top: clamp(12px, 2vw, 18px);
  width: clamp(32px, 4vw, 49px);
  aspect-ratio: 1;
  filter: drop-shadow(0 7px 13px rgba(0, 0, 0, .28));
  animation: spaceHalloweenFloat 6.6s ease-in-out infinite;
}
.space-halloween-pumpkin-glow {
  position: absolute;
  top: 0;
  left: -18px;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 104, 24, .22), rgba(236, 104, 24, .045) 48%, transparent 74%);
  filter: blur(16px);
  opacity: .72;
  pointer-events: none !important;
  animation: spaceHalloweenGlow 5s ease-in-out infinite;
}
.space-halloween-mist {
  position: absolute;
  inset: auto -15% -15% -15%;
  height: 54%;
  background:
    radial-gradient(ellipse at 22% 100%, rgba(224, 206, 190, .09), transparent 52%),
    radial-gradient(ellipse at 78% 100%, rgba(246, 216, 186, .06), transparent 55%);
  filter: blur(16px);
  opacity: .6;
  animation: spaceHalloweenHaze 14s ease-in-out infinite alternate;
  pointer-events: none !important;
}

/* The 70x74 ghost stays visible on both mobile and desktop.
   Its rare animation is an accent, not its sole moment of visibility. */
.space-halloween-ghost {
  /* Below the language selector, away from the hero's text and glass cards. */
  top: 58px;
  right: 16px;
  width: 70px;
  height: 74px;
  opacity: .94;
  z-index: 2;
  filter: drop-shadow(0 0 16px rgba(226, 238, 255, .6));
  animation: spaceHalloweenGhostFloat 7s ease-in-out infinite;
}
.space-halloween-apparition.is-active {
  animation: spaceHalloweenApparition 7.5s ease-in-out 1 both;
}

/* Pumpkins live in the real heading stacking context, not in a 0px sibling.
   No margin, padding or height changes to the category sections. */
#spaceMenuContent .sectionHead.space-halloween-decorated-heading {
  position: relative;
  isolation: isolate;
  overflow: visible;
}
#spaceMenuContent .sectionHead.space-halloween-decorated-heading > b,
#spaceMenuContent .sectionHead.space-halloween-decorated-heading > small {
  position: relative;
  z-index: 2;
}
#spaceMenuContent .sectionHead .space-halloween-section-pumpkin {
  position: absolute;
  top: 0;
  right: 5px;
  width: 65px;
  height: 65px;
  z-index: 1;
  opacity: .76;
  animation: spaceHalloweenBob 6s ease-in-out infinite;
}

@keyframes spaceHalloweenFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  50% { transform: translate3d(0, -4px, 0) rotate(2deg); }
}
@keyframes spaceHalloweenGlow {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: .84; transform: scale(1.06); }
}
@keyframes spaceHalloweenHaze {
  from { transform: translate3d(-2%, 0, 0); }
  to { transform: translate3d(2%, -3%, 0); }
}
@keyframes spaceHalloweenBob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-5px) rotate(3deg); }
}
@keyframes spaceHalloweenGhostFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-4px, -6px, 0); }
}
@keyframes spaceHalloweenApparition {
  0%, 100% { opacity: .74; transform: translate3d(0, 0, 0); }
  25% { opacity: .87; }
  50% { opacity: .95; transform: translate3d(-12px, -9px, 0); }
  75% { opacity: .86; }
}

@media (max-width: 640px) {
  .space-halloween-web { width: 62px; height: 62px; opacity: .82; }
  .space-halloween-pumpkin { width: 34px; top: 13px; left: 10px; }
  .space-halloween-pumpkin-glow { width: 92px; height: 92px; left: -13px; }
  .space-halloween-ghost { top: 58px; right: 12px; width: 70px; height: 74px; opacity: .94; }
  #spaceMenuContent .sectionHead .space-halloween-section-pumpkin { width: 65px; height: 65px; }
}

/* Static mood for reduced motion, no periodic animation. */
@media (prefers-reduced-motion: reduce) {
  .space-halloween-art,
  .space-halloween-mist,
  .space-halloween-pumpkin-glow { animation: none !important; }
  .space-halloween-ghost { opacity: .94; }
}


/* ============================================================
   HALLOWEEN SPIDER · contextual, scroll-driven silk descent
   Anchored outside the #dock visual bounds and below its controls.
   ============================================================ */
.space-halloween-spider-layer {
  --space-spider-drop: 0px;
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 490; /* Dock is 500, miniHeader 1000, dialogs 3000+. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
  user-select: none;
  overflow: visible;
  transition: opacity .24s ease, visibility .24s ease;
  contain: style;
}
.space-halloween-spider-layer.is-visible {
  opacity: 1;
  visibility: visible;
}
.space-halloween-spider-knot {
  position: absolute;
  top: -13px;
  left: -17px;
  width: 34px;
  height: 24px;
  pointer-events: none !important;
  opacity: .74;
  background:
    linear-gradient(75deg, transparent 48.5%, rgba(242, 238, 226, .48) 49.5%, rgba(242, 238, 226, .48) 50.5%, transparent 51.5%),
    linear-gradient(112deg, transparent 48.5%, rgba(242, 238, 226, .45) 49.5%, rgba(242, 238, 226, .45) 50.5%, transparent 51.5%),
    repeating-radial-gradient(ellipse at 50% 5%, transparent 0 5px, rgba(237, 235, 223, .36) 5.5px 6px, transparent 6.5px 10px);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 96%);
  mask-image: linear-gradient(to bottom, #000, transparent 96%);
}
.space-halloween-spider-thread {
  position: absolute;
  left: -.5px;
  top: 0;
  width: 1px;
  height: var(--space-spider-drop);
  transform-origin: top center;
  background: linear-gradient(90deg, rgba(255,255,255,.46), rgba(170,191,197,.85));
  box-shadow: 0 0 2px rgba(230,243,249,.24);
  opacity: .82;
  pointer-events: none !important;
}
.space-halloween-spider-body {
  position: absolute;
  left: -20px;
  top: calc(var(--space-spider-drop) - 4px);
  width: 40px;
  height: 46px;
  pointer-events: none !important;
  transform-origin: 50% 0;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.38))
          drop-shadow(0 0 8px rgba(0,0,0,.2));
  animation: spaceHalloweenSpiderSway 4.7s ease-in-out infinite;
}
.space-halloween-spider-body img {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none !important;
  user-select: none;
  -webkit-user-drag: none;
}
@keyframes spaceHalloweenSpiderSway {
  0%, 100% { transform: rotate(-2.2deg) translateX(-.5px); }
  35% { transform: rotate(1.4deg) translateX(1px); }
  67% { transform: rotate(-1deg) translateX(-.25px); }
}
@media (max-width: 640px) {
  .space-halloween-spider-body {
    left: -18px;
    width: 36px;
    height: 41px;
  }
  .space-halloween-spider-knot { opacity: .84; }
}
@media (prefers-reduced-motion: reduce) {
  /* Deliberately suppress the scroll-driven character, not the static mood. */
  .space-halloween-spider-layer { display: none !important; }
  .space-halloween-spider-body { animation: none !important; }
}