* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
overflow: hidden;
background: #0a0a1a;
font-family: "Georgia", serif;
}

.scene-container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
cursor: crosshair;
}

/* Sky Background */
.sky {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(
to bottom,
#1a1a3e 0%,
#2d1b4e 30%,
#3d2a5a 60%,
#1a1a2e 100%
);
transition: transform 0.3s ease-out;
}

/* Stars */
.stars {
position: absolute;
width: 100%;
height: 100%;
background-image: radial-gradient(2px 2px at 20% 30%, white, transparent),
radial-gradient(2px 2px at 60% 70%, white, transparent),
radial-gradient(1px 1px at 50% 50%, white, transparent),
radial-gradient(1px 1px at 80% 10%, white, transparent),
radial-gradient(2px 2px at 90% 60%, white, transparent),
radial-gradient(1px 1px at 33% 75%, white, transparent),
radial-gradient(2px 2px at 15% 85%, white, transparent);
background-size: 200% 200%;
animation: twinkle 4s ease-in-out infinite;
opacity: 0.7;
}

@keyframes twinkle {
0%,
100% {
opacity: 0.7;
}
50% {
opacity: 0.9;
}
}

/* Moon */
.moon {
position: absolute;
top: 8%;
right: 15%;
width: 150px;
height: 150px;
border-radius: 50%;
background: radial-gradient(
circle at 40% 40%,
#fff9e6 0%,
#ffe4a3 40%,
#ffd666 100%
);
box-shadow: 0 0 60px 20px rgba(255, 230, 150, 0.6),
0 0 100px 40px rgba(255, 215, 100, 0.3),
inset -10px -10px 20px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease-out;
}

.moon::before {
content: "";
position: absolute;
width: 30px;
height: 30px;
background: rgba(0, 0, 0, 0.15);
border-radius: 50%;
top: 30%;
left: 20%;
box-shadow: 40px 10px 0 -5px rgba(0, 0, 0, 0.1),
20px 50px 0 -8px rgba(0, 0, 0, 0.12);
}

/* Clouds */
.clouds {
position: absolute;
width: 100%;
height: 100%;
transition: transform 0.3s ease-out;
}

.cloud {
position: absolute;
background: rgba(100, 80, 120, 0.3);
border-radius: 100px;
filter: blur(8px);
animation: drift 60s linear infinite;
}

.cloud1 {
width: 200px;
height: 60px;
top: 15%;
left: -200px;
animation-duration: 45s;
}

.cloud2 {
width: 300px;
height: 80px;
top: 25%;
left: -300px;
animation-duration: 60s;
animation-delay: 10s;
}

.cloud3 {
width: 250px;
height: 70px;
top: 35%;
left: -250px;
animation-duration: 50s;
animation-delay: 20s;
}

@keyframes drift {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(100vw + 300px));
}
}

/* Mountains/Hills Background */
.mountains {
position: absolute;
bottom: 0;
width: 100%;
height: 40%;
background: linear-gradient(to bottom, transparent 0%, #1a1a2e 100%);
transition: transform 0.3s ease-out;
}

.mountains::before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 80%;
background: linear-gradient(135deg, transparent 45%, #0d0d1f 45.5%),
linear-gradient(225deg, transparent 45%, #0d0d1f 45.5%);
background-size: 200px 200px;
background-position: 0 100%, 100px 100%;
opacity: 0.5;
}

/* Ground */
.ground {
position: absolute;
bottom: 0;
width: 100%;
height: 30%;
background: linear-gradient(to bottom, #1a1a2e 0%, #0f0f1a 50%, #050508 100%);
transition: transform 0.3s ease-out;
}

/* Graveyard */
.graveyard {
position: absolute;
bottom: 12%;
left: 0;
width: 100%;
height: 15%;
background: repeating-linear-gradient(
90deg,
transparent 0px,
transparent 80px,
rgba(0, 0, 0, 0.4) 80px,
rgba(0, 0, 0, 0.4) 85px,
transparent 85px,
transparent 90px,
rgba(0, 0, 0, 0.5) 90px,
rgba(0, 0, 0, 0.5) 110px
);
transition: transform 0.3s ease-out;
}

.tombstone {
position: absolute;
bottom: 0;
width: 40px;
height: 60px;
background: #2a2a3a;
border-radius: 20px 20px 0 0;
box-shadow: inset -5px 0 10px rgba(0, 0, 0, 0.5);
}

.tombstone::after {
content: "✝";
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
color: rgba(150, 150, 160, 0.5);
font-size: 18px;
}

.tombstone1 {
left: 15%;
height: 55px;
}
.tombstone2 {
left: 25%;
height: 65px;
transform: rotate(-3deg);
}
.tombstone3 {
left: 70%;
height: 50px;
transform: rotate(2deg);
}
.tombstone4 {
left: 80%;
height: 60px;
}

/* Haunted House */
.house-container {
position: absolute;
bottom: 15%;
left: 50%;
transform: translateX(-50%);
width: 400px;
height: 450px;
transition: transform 0.3s ease-out;
}

.house {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 300px;
height: 350px;
background: linear-gradient(135deg, #1a1a2e 0%, #0d0d1a 100%);
clip-path: polygon(50% 0%, 100% 25%, 100% 100%, 0% 100%, 0% 25%);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

/* Tower */
.tower {
position: absolute;
top: -50px;
right: 40px;
width: 80px;
height: 200px;
background: linear-gradient(135deg, #1a1a2e 0%, #0d0d1a 100%);
clip-path: polygon(50% 0%, 100% 15%, 100% 100%, 0 100%, 0 15%);
}

.tower-roof {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 40px solid #2a1a3e;
}

/* Windows */
.window {
position: absolute;
width: 50px;
height: 70px;
background: radial-gradient(circle, #ff8800 0%, #ff6600 50%, #cc4400 100%);
clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
animation: flicker 3s ease-in-out infinite;
box-shadow: 0 0 20px rgba(255, 136, 0, 0.8), 0 0 40px rgba(255, 102, 0, 0.4);
overflow: hidden;
}

.window::before {
content: "";
position: absolute;
width: 2px;
height: 100%;
background: rgba(0, 0, 0, 0.6);
left: 50%;
transform: translateX(-50%);
z-index: 2;
}

.window::after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background: rgba(0, 0, 0, 0.6);
top: 50%;
transform: translateY(-50%);
z-index: 2;
}

/* Ghost in windows */
.ghost {
position: absolute;
width: 30px;
height: 40px;
background: radial-gradient(
ellipse at center,
rgba(255, 255, 255, 0.9) 0%,
rgba(255, 255, 255, 0.6) 50%,
transparent 100%
);
border-radius: 50% 50% 0 0;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
opacity: 0;
animation: ghost-appear 20s ease-in-out infinite;
z-index: 1;
}

.ghost::before {
content: "";
position: absolute;
width: 4px;
height: 4px;
background: #000;
border-radius: 50%;
top: 12px;
left: 8px;
box-shadow: 10px 0 0 #000;
}

.ghost::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 8px;
background: radial-gradient(
ellipse at center,
rgba(255, 255, 255, 0.8) 0%,
rgba(255, 255, 255, 0.4) 50%,
transparent 100%
);
border-radius: 0 0 50% 50%;
}

@keyframes ghost-appear {
0%,
85% {
opacity: 0;
transform: translateX(-50%) translateY(10px);
}
87% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
93% {
opacity: 1;
transform: translateX(-50%) translateY(-3px);
}
95%,
100% {
opacity: 0;
transform: translateX(-50%) translateY(10px);
}
}

.window1 {
top: 120px;
left: 50px;
animation-delay: 0s;
}
.window1 .ghost {
animation-delay: 5s;
}

.window2 {
top: 120px;
right: 50px;
animation-delay: 1.5s;
}
.window2 .ghost {
animation-delay: 12s;
}

.window3 {
top: 220px;
left: 120px;
animation-delay: 0.8s;
}
.window3 .ghost {
animation-delay: 18s;
}

.tower-window {
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
width: 35px;
height: 50px;
animation-delay: 2s;
}
.tower-window .ghost {
animation-delay: 8s;
width: 20px;
height: 30px;
}

@keyframes flicker {
0%,
100% {
opacity: 1;
filter: brightness(1);
}
10%,
30%,
50%,
70%,
90% {
opacity: 0.8;
filter: brightness(0.8);
}
20%,
40%,
60%,
80% {
opacity: 1;
filter: brightness(1.2);
}
}

/* Door */
.door {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 100px;
background: linear-gradient(to bottom, #0a0a0f 0%, #000 100%);
border-radius: 30px 30px 0 0;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9);
}

.door::before {
content: "";
position: absolute;
width: 8px;
height: 8px;
background: #ff6600;
border-radius: 50%;
right: 12px;
top: 50%;
box-shadow: 0 0 10px rgba(255, 102, 0, 0.8);
}

/* Fog */
.fog {
position: absolute;
bottom: 0;
width: 100%;
height: 30%;
transition: transform 0.3s ease-out;
}

.fog-layer {
position: absolute;
width: 200%;
height: 100%;
background: radial-gradient(
ellipse at center,
rgba(150, 150, 180, 0.3) 0%,
transparent 50%
);
animation: fog-drift 20s ease-in-out infinite;
}

.fog1 {
animation-duration: 25s;
opacity: 0.6;
}

.fog2 {
animation-duration: 30s;
animation-delay: 5s;
opacity: 0.4;
}

.fog3 {
animation-duration: 20s;
animation-delay: 10s;
opacity: 0.5;
}

@keyframes fog-drift {
0%,
100% {
transform: translateX(-50%);
}
50% {
transform: translateX(-25%);
}
}

/* Bats */
.bat {
position: absolute;
width: 30px;
height: 15px;
animation: fly 15s linear infinite;
opacity: 0.8;
}

.bat::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #000;
clip-path: polygon(0% 40%, 25% 0%, 50% 40%, 75% 0%, 100% 40%, 50% 100%);
animation: wing-flap 0.3s ease-in-out infinite;
}

@keyframes wing-flap {
0%,
100% {
transform: scaleX(1);
}
50% {
transform: scaleX(0.9);
}
}

.bat1 {
top: 20%;
left: -30px;
animation-duration: 18s;
}

.bat2 {
top: 30%;
left: -30px;
animation-duration: 22s;
animation-delay: 8s;
}

.bat3 {
top: 25%;
left: -30px;
animation-duration: 20s;
animation-delay: 15s;
}

@keyframes fly {
0% {
transform: translateX(0) translateY(0);
}
25% {
transform: translateX(25vw) translateY(-20px);
}
50% {
transform: translateX(50vw) translateY(-30px);
}
75% {
transform: translateX(75vw) translateY(-15px);
}
100% {
transform: translateX(100vw) translateY(0);
}
}

/* Title */
.title {
position: absolute;
top: 5%;
left: 5%;
color: #ff8800;
font-size: clamp(1.5em, 4vw, 2.5em);
text-shadow: 0 0 10px rgba(255, 136, 0, 0.8), 0 0 20px rgba(255, 102, 0, 0.5),
2px 2px 4px rgba(0, 0, 0, 0.8);
z-index: 10;
font-weight: bold;
letter-spacing: 2px;
}

/* Responsive Design */
@media (max-width: 768px) {
.moon {
width: 100px;
height: 100px;
top: 10%;
right: 10%;
}

.house-container {
width: 300px;
height: 350px;
}

.house {
width: 220px;
height: 280px;
}

.tower {
width: 60px;
height: 150px;
right: 30px;
}

.window {
width: 35px;
height: 50px;
}

.window1 {
top: 90px;
left: 35px;
}
.window2 {
top: 90px;
right: 35px;
}
.window3 {
top: 170px;
left: 90px;
}

.tower-window {
width: 25px;
height: 35px;
}

.door {
width: 45px;
height: 75px;
}

.tombstone {
width: 30px;
height: 45px;
}

.title {
font-size: 1.5em;
top: 3%;
left: 3%;
}
}

@media (max-width: 480px) {
.house-container {
width: 250px;
height: 300px;
}

.house {
width: 180px;
height: 230px;
}

.tower {
width: 50px;
height: 120px;
right: 25px;
}

.cloud {
display: none;
}
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}

.scene-container {
cursor: default;
}

.parallax-layer {
transform: none !important;
}
}

/* Focus styles for accessibility */
.scene-container:focus {
outline: 3px solid #ff8800;
outline-offset: -3px;
}

.scene-container:focus-visible {
outline: 3px solid #ff8800;
outline-offset: -3px;
}

!