/* Moving main-menu backdrop only. Gameplay canvases, maps, HUD, controls and menu layout stay untouched. */
:root {
  --home-haunt-ink: #040207;
  --home-haunt-plum: #160a25;
  --home-haunt-violet: #3b1c59;
  --home-haunt-gold: #f4d37a;
  --home-haunt-green: #87cf94;
}

#homeAtmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: none;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  contain: layout paint style;
  background:
    radial-gradient(circle at 50% 46%, rgba(61, 30, 88, 0.34), transparent 38rem),
    radial-gradient(circle at 86% 12%, rgba(244, 211, 122, 0.15), transparent 13rem),
    linear-gradient(115deg, #050207 0%, #13071f 52%, #090311 100%);
  transition: opacity 420ms ease, visibility 420ms ease;
}

body.home-atmosphere-active #homeAtmosphere {
  display: block;
  opacity: 1;
  visibility: visible;
}

body.home-atmosphere-active #homeScreen {
  position: relative;
  z-index: 2;
}

body.home-atmosphere-active #homeScreen::before,
body.home-atmosphere-active #homeScreen::after {
  display: none !important;
  content: none !important;
}

#homeAtmosphere *,
#homeAtmosphere *::before,
#homeAtmosphere *::after {
  animation-play-state: paused !important;
}

body.home-atmosphere-active:not(.home-atmosphere-paused) #homeAtmosphere *,
body.home-atmosphere-active:not(.home-atmosphere-paused) #homeAtmosphere *::before,
body.home-atmosphere-active:not(.home-atmosphere-paused) #homeAtmosphere *::after {
  animation-play-state: running !important;
}

.haunt-sky {
  position: absolute;
  inset: -12% -10%;
  opacity: 0.95;
  background:
    radial-gradient(circle at 18% 18%, rgba(137, 207, 148, 0.08) 0 0.18rem, transparent 0.24rem),
    radial-gradient(circle at 66% 10%, rgba(244, 211, 122, 0.12) 0 0.13rem, transparent 0.18rem),
    radial-gradient(circle at 72% 68%, rgba(210, 170, 255, 0.10) 0 0.15rem, transparent 0.22rem),
    linear-gradient(135deg, rgba(5, 2, 9, 0), rgba(76, 34, 102, 0.16), rgba(5, 2, 9, 0));
  background-size: 17rem 13rem, 21rem 15rem, 14rem 19rem, 100% 100%;
  animation: haunt-stars 26s linear infinite;
}

.haunt-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.13;
  mix-blend-mode: screen;
  background-image:
    linear-gradient(115deg, transparent 0 48%, rgba(255,255,255,.08) 49% 50%, transparent 51% 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 5px);
  background-size: 38rem 38rem, 100% 7px;
  animation: haunt-rain 13s linear infinite;
}

.haunt-moon {
  position: absolute;
  top: clamp(18px, 6vh, 58px);
  right: clamp(22px, 8vw, 118px);
  width: clamp(86px, 12vw, 148px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.86;
  background:
    radial-gradient(circle at 35% 33%, #fff2b8 0 11%, transparent 12%),
    radial-gradient(circle at 64% 62%, rgba(88, 65, 71, .22) 0 8%, transparent 9%),
    radial-gradient(circle, #f3d681 0 55%, #b58043 72%, transparent 73%);
  box-shadow: 0 0 38px rgba(244, 211, 122, 0.38), 0 0 120px rgba(88, 43, 118, 0.4);
  animation: haunt-moon-breathe 7.5s ease-in-out infinite;
}

.haunt-location {
  position: absolute;
  width: min(33vw, 430px);
  height: min(45vh, 360px);
  border: 1px solid rgba(244, 211, 122, 0.11);
  border-radius: 20px;
  opacity: 0.34;
  background-position: center;
  background-size: cover;
  filter: sepia(.36) saturate(.78) hue-rotate(225deg) contrast(1.12) brightness(.54);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .48), inset 0 0 120px rgba(5, 2, 9, .9);
  transform: rotate(var(--tilt, -5deg)) translate3d(0, 0, 0);
  animation: haunt-location-drift 18s ease-in-out infinite;
}

.haunt-location::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(5,2,9,.88), transparent 42%, rgba(5,2,9,.86)),
    radial-gradient(circle at 50% 25%, transparent, rgba(5,2,9,.82) 74%);
}

.haunt-location--school {
  left: max(-90px, -5vw);
  top: 12vh;
  --tilt: -8deg;
  background-image: url('/assets/survival-school-campus.webp');
}

.haunt-location--hospital {
  right: max(-120px, -7vw);
  top: 28vh;
  --tilt: 7deg;
  animation-delay: -7s;
  background-image: url('/assets/survival-hospital-campus.webp');
}

.haunt-location--lagos {
  left: 8vw;
  bottom: -8vh;
  width: min(38vw, 520px);
  height: min(30vh, 250px);
  --tilt: 4deg;
  opacity: .22;
  animation-delay: -12s;
  background-image: url('/assets/survival-lagos-campus.webp');
}

.haunt-location--prison {
  right: 13vw;
  bottom: -12vh;
  width: min(34vw, 460px);
  height: min(32vh, 250px);
  --tilt: -4deg;
  opacity: .18;
  animation-delay: -4s;
  background-image: url('/assets/survival-prison-campus.webp');
}

.haunt-graveyard {
  position: absolute;
  left: -2vw;
  right: -2vw;
  bottom: -1px;
  height: clamp(84px, 17vh, 190px);
  opacity: .82;
  background:
    linear-gradient(180deg, transparent 0 46%, rgba(5, 3, 8, .96) 47%),
    radial-gradient(ellipse at 9% 100%, #050308 0 23%, transparent 24%),
    radial-gradient(ellipse at 18% 100%, #07040a 0 15%, transparent 16%),
    radial-gradient(ellipse at 31% 100%, #050308 0 20%, transparent 21%),
    radial-gradient(ellipse at 72% 100%, #060409 0 23%, transparent 24%),
    radial-gradient(ellipse at 88% 100%, #050308 0 16%, transparent 17%);
}

.haunt-graveyard::before,
.haunt-graveyard::after {
  content: "";
  position: absolute;
  bottom: 34%;
  width: 42px;
  height: 58px;
  border-radius: 22px 22px 4px 4px;
  background: linear-gradient(180deg, #16101f, #060408);
  box-shadow:
    9vw 18px 0 -8px #08050c,
    19vw 8px 0 -4px #0a0610,
    65vw 14px 0 -7px #08050c,
    78vw 0 0 -2px #100a16,
    91vw 22px 0 -10px #08050c;
}

.haunt-graveyard::before { left: 4vw; }
.haunt-graveyard::after { right: 18vw; transform: scale(.74); opacity: .62; }

.haunt-fog {
  position: absolute;
  left: -30vw;
  right: -30vw;
  height: 34vh;
  opacity: .48;
  filter: blur(18px);
  background:
    radial-gradient(ellipse at 12% 55%, rgba(188, 164, 213, .24), transparent 34%),
    radial-gradient(ellipse at 36% 42%, rgba(122, 185, 148, .18), transparent 28%),
    radial-gradient(ellipse at 64% 58%, rgba(205, 181, 218, .20), transparent 33%),
    radial-gradient(ellipse at 86% 46%, rgba(109, 68, 143, .22), transparent 30%);
}

.haunt-fog--far {
  top: 15vh;
  animation: haunt-fog-left 36s ease-in-out infinite alternate;
}

.haunt-fog--near {
  bottom: 2vh;
  opacity: .36;
  filter: blur(24px);
  animation: haunt-fog-right 27s ease-in-out infinite alternate;
}

.haunt-zombie {
  position: absolute;
  z-index: 1;
  display: block;
  width: clamp(140px, 16vw, 250px);
  aspect-ratio: 320 / 600;
  height: auto;
  bottom: 0;
  opacity: .6;
  transform-origin: 50% 100%;
  animation: haunt-approach 48s linear infinite;
}

.haunt-zombie::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../assets/home-atmosphere/front-walker-sheet.svg') 0 0 / 600% 100% no-repeat;
  /* Six cells have FIVE intervals: jump-none includes both endpoints.
     Samples are exactly 0/20/40/60/80/100%, never fractional cells. */
  animation: haunt-zombie-frames 2.8s steps(6, jump-none) infinite;
  filter: drop-shadow(0 10px 14px #07030b);
}

.haunt-zombie--sentinel {
  left: calc(13% - clamp(70px, 8vw, 125px));
  --approach-x: -3vw;
  animation-delay: -8s;
}

.haunt-zombie--stalker {
  right: calc(13% - clamp(70px, 8vw, 125px));
  --approach-x: 3vw;
  animation-delay: -32s;
}

.haunt-zombie--crawler {
  left: calc(23% - clamp(70px, 8vw, 125px));
  --approach-x: -4vw;
  animation-delay: -20s;
}

.haunt-zombie--stalker::before { animation-delay: -1.4s; }
.haunt-zombie--crawler::before { animation-delay: -.7s; }

.haunt-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at center, transparent 0 34%, rgba(6, 3, 10, .30) 66%, rgba(3, 1, 5, .92) 100%),
    linear-gradient(180deg, rgba(2,1,4,.12), rgba(2,1,4,.58));
}

@keyframes haunt-stars {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-7rem, 3rem, 0); }
}

@keyframes haunt-rain {
  from { transform: translate3d(0, -8rem, 0); }
  to { transform: translate3d(-10rem, 12rem, 0); }
}

@keyframes haunt-moon-breathe {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .78; }
  50% { transform: translate3d(-8px, 6px, 0) scale(1.04); opacity: .92; }
}

@keyframes haunt-location-drift {
  0%, 100% { transform: rotate(var(--tilt)) translate3d(0, 0, 0) scale(1); }
  50% { transform: rotate(calc(var(--tilt) * .72)) translate3d(12px, -10px, 0) scale(1.025); }
}

@keyframes haunt-fog-left {
  from { transform: translate3d(-5vw, 0, 0); }
  to { transform: translate3d(8vw, 2vh, 0); }
}

@keyframes haunt-fog-right {
  from { transform: translate3d(7vw, 0, 0); }
  to { transform: translate3d(-10vw, -1vh, 0); }
}

@keyframes haunt-zombie-frames {
  from { background-position: 0% 0; }
  to { background-position: 100% 0; }
}

/* Stay in the edge lanes, feet on the same perspective plane. Never traverse
   sideways across the screen. The far/near halves overlap on mobile as well. */
@keyframes haunt-approach {
  0% { opacity: .4; transform: translate3d(0, -38vh, 0) scale(.14); }
  35% { opacity: .65; transform: translate3d(0, -26vh, 0) scale(.42); }
  70% { opacity: .85; transform: translate3d(var(--approach-x), -8vh, 0) scale(.95); }
  92% { opacity: .85; transform: translate3d(var(--approach-x), 5vh, 0) scale(1.45); }
  100% { opacity: .4; transform: translate3d(var(--approach-x), 15vh, 0) scale(1.7); }
}

@media (max-width: 820px), (pointer: coarse) {
  #homeAtmosphere {
    background:
      radial-gradient(circle at 50% 20%, rgba(244, 211, 122, 0.12), transparent 10rem),
      linear-gradient(135deg, #050207, #160824 58%, #06020b);
  }

  .haunt-location--lagos,
  .haunt-location--prison,
  .haunt-zombie--crawler {
    display: none;
  }

  .haunt-location {
    width: min(48vw, 240px);
    height: min(32vh, 220px);
    opacity: .24;
  }

  .haunt-zombie {
    width: 140px;
  }

  .haunt-zombie--sentinel { left: calc(13% - 70px); }
  .haunt-zombie--stalker { right: calc(13% - 70px); }

  .haunt-fog {
    opacity: .30;
  }
}

@media (max-height: 480px) and (orientation: landscape) {
  .haunt-location--lagos,
  .haunt-location--prison,
  .haunt-zombie--crawler { display: none; }
  .haunt-zombie { width: 140px; }
  .haunt-graveyard { height: 22vh; }
}

@media (prefers-reduced-motion: reduce) {
  #homeAtmosphere *,
  #homeAtmosphere *::before,
  #homeAtmosphere *::after {
    animation: none !important;
  }

  .haunt-sky { transform: none; }
  .haunt-zombie { opacity: .6; transform: translate3d(0, 0, 0) scale(.78); }
}