/* === STARS === */
.stars { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.star {
  position: absolute;
  background: #ffddaa;
  border-radius: 50%;
  animation: twinkle 3s ease-in-out infinite alternate;
}
@keyframes twinkle { 0% { opacity: 0.2; } 100% { opacity: 0.8; } }

/* === MOON === */
.moon { position: absolute; top: 80px; right: 120px; width: 40px; height: 40px; background: radial-gradient(circle at 35% 35%, #3d1a16 0%, #2a100d 70%, #1a0a08 100%); border-radius: 50%; z-index: 2; box-shadow: 0 0 20px rgba(60,25,20,0.4); transition: transform 0.3s ease-out; }

/* === CLOUDS === */
.cloud-layer { position: absolute; width: 200%; height: 100%; top: 0; pointer-events: none; }
.cloud { position: absolute; border-radius: 50%; filter: blur(2px); }
.cl1 { z-index: 2; animation: cloudDrift1 45s linear infinite; }
.cl1 .cloud { background: rgba(90, 40, 35, 0.15); }
.cl2 { z-index: 3; animation: cloudDrift2 30s linear infinite; }
.cl2 .cloud { background: rgba(70, 30, 25, 0.18); }
.cl3 { z-index: 4; animation: cloudDrift3 20s linear infinite; }
.cl3 .cloud { background: rgba(50, 20, 15, 0.2); }
@keyframes cloudDrift1 { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes cloudDrift2 { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes cloudDrift3 { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* === PARALLAX MOUNTAINS === */
.mountains-far { position: absolute; bottom: 0; width: 100%; height: 55vh; z-index: 4; pointer-events: none; }
.mountains-mid { position: absolute; bottom: 0; width: 100%; height: 48vh; z-index: 5; pointer-events: none; }
.mountains-near { position: absolute; bottom: 0; width: 100%; height: 40vh; z-index: 6; pointer-events: none; }
.distant-structure { position: absolute; z-index: 5; pointer-events: none; }

/* === FOG LAYERS === */
.fog-layer { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.fog1 { background: radial-gradient(ellipse 80% 30% at 50% 65%, rgba(180,90,60,0.08) 0%, transparent 70%); animation: fogDrift 16s ease-in-out infinite; }
.fog2 { background: radial-gradient(ellipse 60% 20% at 30% 60%, rgba(200,120,80,0.06) 0%, transparent 60%); animation: fogDrift 22s ease-in-out infinite reverse; }
.fog3 { background: radial-gradient(ellipse 70% 25% at 70% 55%, rgba(160,80,50,0.07) 0%, transparent 65%); animation: fogDrift 18s ease-in-out infinite; animation-delay: -5s; }
@keyframes fogDrift { 0% { transform: translateX(-15px) scaleX(1); } 50% { transform: translateX(15px) scaleX(1.05); } 100% { transform: translateX(-15px) scaleX(1); } }

/* === CAVE CEILING (hidden) === */
.ceiling { display: none; }
.vine { display: none; }
.chain { display: none; }

/* === EFFECTS OVERLAYS === */
.ambient-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse 120% 80% at 35% 65%, rgba(200,100,50,0.04) 0%, transparent 60%); z-index: 15; pointer-events: none; }
.vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 40%, rgba(5,2,2,0.5) 100%); z-index: 16; pointer-events: none; }
.ember { position: absolute; width: 3px; height: 3px; background: #ff9944; border-radius: 50%; opacity: 0; z-index: 14; pointer-events: none; animation: emberFloat 6s ease-in infinite; }
@keyframes emberFloat { 0% { opacity: 0; transform: translateY(0) translateX(0); } 10% { opacity: 0.8; } 90% { opacity: 0.2; } 100% { opacity: 0; transform: translateY(-200px) translateX(30px); } }