.haunted-banner-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #000;
}

/* Debug lines (hidden by default) */
.haunted-banner-container::after,
.haunted-banner-container::before {
  display: none;
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 999;
}

.haunted-banner-container.show-crosshairs::after {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: magenta;
  display: block;
}

.haunted-banner-container.show-crosshairs::before {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background: lime;
  display: block;
}

/* Base layer styling */
.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  background-blend-mode: normal;
}

/* Individual layers */
.back-layer {
  z-index: 1;
  background-image: url('../images/forest-back.png');
  filter: blur(2px);
}

.mid-layer {
  z-index: 2;
  background-image: url('../images/forest-mid.png');
  animation: parallaxMid 10s ease-in-out infinite;
  filter: blur(1px);
}

.front-layer {
  z-index: 3;
  background-image: url('../images/forest-front.png');
  animation: parallaxFront 5s ease-in-out infinite;
}

/* Mansion Layer — Fully Restored */



.mansion-layer {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -66%);
  width: 30vw;
  aspect-ratio: 986 / 1003;
  background-image: url('../images/mansion.png');
  background-size: cover;
  background-position: center;
  z-index: 4;
  animation: mansionBlur 1s ease-in-out infinite, mansionPulse 12s ease-in-out infinite;
  filter: blur(1px) brightness(0.95); /* Slight darkening */
  opacity: 0.6;                       /* Reduced from 0.45 */
  pointer-events: none;
}


/* Mansion internal glow and ground shadow */
.mansion-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 140, 0, 0.25), transparent 60%);
  filter: blur(5px);
  pointer-events: none;
  z-index: -1;
}

.mansion-layer::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 20px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5), transparent);
  z-index: -1;
}

.bridge-layer {
  position: absolute;
  top: 60%;
  left: 0;
  width: 100%;
  height: 20vh;
  background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
  z-index: 3.5; /* Between front-layer and mansion-layer */
  pointer-events: none;
}

/* Fog Layer */
.fog-layer {
  z-index: 5;
  background-image: url('../images/fog.png');
  opacity: 0.3;
  animation: fogDrift 15s ease-in-out infinite;
  mix-blend-mode: screen;
}

/* Sigil */
.sigil-layer {
  position: absolute;
  bottom: 10%;
  left: 0%;
  width: 80px;
  height: auto;
  z-index: 6;
  animation: sigilFloat 6s ease-in-out infinite;
  filter: drop-shadow(0 0 10px #fff);
  pointer-events: none;
}

/* Lore blurb */
.lore-blurb {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  color: #fff;
  text-shadow: 0 0 10px #000;
  z-index: 10;
  font-family: 'Arial', sans-serif;
  font-weight: 600;
  padding: 0.5em 1em;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid magenta;
}

/* Debug controls */
.debug-controls {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 1001;
  display: flex;
  gap: 1rem;
}

.debug-controls button {
  background: #222;
  color: #ffcc00;
  border: 2px solid magenta;
  padding: 0.5em 1em;
  font-weight: bold;
  cursor: pointer;
  font-size: 0.9rem;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.debug-controls button:hover {
  background: magenta;
  color: black;
}

/* Color overlays (toggleable) */
.haunted-banner-container.show-overlays .back-layer {
  background-color: rgba(255, 0, 0, 0.3);
}

.haunted-banner-container.show-overlays .mid-layer {
  background-color: rgba(0, 255, 0, 0.3);
}

.haunted-banner-container.show-overlays .front-layer {
  background-color: rgba(0, 0, 255, 0.3);
}

.haunted-banner-container.show-overlays .mansion-layer {
  background-color: rgba(255, 255, 0, 0.4);
}

.haunted-banner-container.show-overlays .fog-layer {
  background-color: rgba(0, 255, 255, 0.2);
}

/* Animations */
@keyframes parallaxMid {
  0% { transform: translateX(-30px); }
  50% { transform: translateX(30px); }
  100% { transform: translateX(-30px); }
}

@keyframes parallaxFront {
  0% { transform: translateX(-60px); }
  50% { transform: translateX(60px); }
  100% { transform: translateX(-60px); }
}

@keyframes mansionPulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.9; }
}

@keyframes mansionBlur {
  0%, 100% { filter: blur(2px); opacity: 0.5; }
  50% { filter: blur(0.5px); opacity: 0.4; }
}

@keyframes mansionFloat {
  0%   { transform: translate(-50%, -50%) translateX(-10px); }
  50%  { transform: translate(-50%, -50%) translateX(10px); }
  100% { transform: translate(-50%, -50%) translateX(-10px); }
}

@keyframes fogDrift {
  0% { transform: translateX(-30px); }
  50% { transform: translateX(30px); }
  100% { transform: translateX(-30px); }
}

@keyframes sigilFloat {
  0% { transform: translateX(0); opacity: 0.8; }
  50% { transform: translateX(50vw); opacity: 1; }
  100% { transform: translateX(100vw); opacity: 0.8; }
}