/* Background World Styles - Persistent animated scene */

.background-world {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-background);
    overflow: hidden;
    pointer-events: none;
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(80, 40, 120, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 40%, rgba(120, 30, 80, 0.25) 0%, transparent 50%),
        linear-gradient(
            to bottom,
            #0a0515 0%,
            #1a0f2e 15%,
            #2d1b4e 30%,
            #3d1f5c 45%,
            #4a1f4f 60%,
            #3d1a3f 75%,
            #2d1530 90%,
            #1a0a20 100%
        );
}

.theme-night .background-world {
    background: 
        radial-gradient(ellipse at 25% 25%, rgba(100, 50, 150, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 35%, rgba(150, 30, 100, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(80, 20, 60, 0.3) 0%, transparent 60%),
        linear-gradient(
            to bottom,
            #050210 0%,
            #0d0520 10%,
            #1a0f3d 25%,
            #2d1850 40%,
            #3d1f4f 50%,
            #4a1545 65%,
            #3d1040 80%,
            #2d0a2a 90%,
            #0d0515 100%
        );
}

.theme-day .background-world {
    background: 
        radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.4) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 30%, rgba(220, 200, 255, 0.3) 0%, transparent 50%),
        linear-gradient(
            to bottom,
            #f0e5ff 0%,
            #e8d5f2 20%,
            #d4c0e8 40%,
            #c5b0dd 60%,
            #b8a0d0 80%,
            #a890c0 100%
        );
}

/* Background layers */
.bg-layer {
    position: absolute;
    width: 100%;
    height: 100%;
}

.bg-layer-far {
    z-index: 1;
}

.bg-layer-mid {
    z-index: 2;
}

.bg-layer-near {
    z-index: 3;
}

/* Moon */
.moon {
    position: absolute;
    top: 8%;
    right: 15%;
    width: 200px;
    height: 200px;
    animation: moon-glow 4s ease-in-out infinite;
}

@keyframes moon-glow {
    0%, 100% { 
        filter: brightness(1) drop-shadow(0 0 30px rgba(255, 248, 231, 0.6));
    }
    50% { 
        filter: brightness(1.2) drop-shadow(0 0 50px rgba(255, 248, 231, 0.8));
    }
}

/* Haunted Castle */
.haunted-castle {
    position: absolute;
    bottom: 0;
    right: 5%;
    width: 500px;
    height: 550px;
    opacity: 0.95;
    filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.9));
}

.tower-orb {
    animation: orb-pulse 3s ease-in-out infinite;
}

@keyframes orb-pulse {
    0%, 100% { 
        opacity: 0.6;
        filter: drop-shadow(0 0 5px #9d4edd);
    }
    50% { 
        opacity: 1;
        filter: drop-shadow(0 0 15px #9d4edd);
    }
}

.castle-window {
    animation: window-flicker 4s ease-in-out infinite;
}

@keyframes window-flicker {
    0%, 100% { opacity: 0.7; }
    25% { opacity: 0.5; }
    50% { opacity: 0.8; }
    75% { opacity: 0.6; }
}

.bg-layer-overlay {
    z-index: 4;
}

/* Ground area - Dark green opaque land */
.ground-area {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: 
        /* Grass texture noise */
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(0, 0, 0, 0.05) 1px,
            transparent 2px,
            transparent 15px
        ),
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            rgba(0, 0, 0, 0.03) 1px,
            transparent 2px,
            transparent 20px
        ),
        /* Dark green opaque gradient */
        radial-gradient(
            ellipse at 50% 0%,
            rgba(15, 35, 15, 0.7) 0%,
            rgba(12, 30, 12, 0.85) 15%,
            rgba(10, 25, 10, 0.95) 35%,
            rgba(8, 20, 8, 1) 60%,
            rgba(5, 15, 5, 1) 100%
        );
    /* No hard border - natural fade */
    border: none;
    /* Subtle shadow for depth */
    box-shadow: inset 0 20px 40px rgba(0, 0, 0, 0.5);
    /* Mask for organic edge */
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.3) 5%,
        rgba(0, 0, 0, 0.7) 15%,
        black 25%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.3) 5%,
        rgba(0, 0, 0, 0.7) 15%,
        black 25%
    );
}

.theme-night .ground-area {
    background: 
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(0, 0, 0, 0.06) 1px,
            transparent 2px,
            transparent 15px
        ),
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            rgba(0, 0, 0, 0.04) 1px,
            transparent 2px,
            transparent 20px
        ),
        radial-gradient(
            ellipse at 50% 0%,
            rgba(10, 25, 10, 0.8) 0%,
            rgba(8, 20, 8, 0.9) 15%,
            rgba(6, 18, 6, 0.95) 35%,
            rgba(4, 15, 4, 1) 60%,
            rgba(2, 10, 2, 1) 100%
        );
    box-shadow: inset 0 20px 40px rgba(0, 0, 0, 0.6);
}

.theme-day .ground-area {
    background: 
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(0, 0, 0, 0.03) 1px,
            transparent 2px,
            transparent 15px
        ),
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            rgba(0, 0, 0, 0.02) 1px,
            transparent 2px,
            transparent 20px
        ),
        radial-gradient(
            ellipse at 50% 0%,
            rgba(40, 80, 40, 0.6) 0%,
            rgba(35, 70, 35, 0.75) 15%,
            rgba(30, 60, 30, 0.85) 35%,
            rgba(25, 50, 25, 0.95) 60%,
            rgba(20, 40, 20, 1) 100%
        );
    box-shadow: inset 0 20px 30px rgba(0, 0, 0, 0.3);
}

.theme-day .ground-area {
    background: 
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(0, 0, 0, 0.03) 1px,
            transparent 2px,
            transparent 15px
        ),
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            rgba(0, 0, 0, 0.02) 1px,
            transparent 2px,
            transparent 20px
        ),
        radial-gradient(
            ellipse at 50% 0%,
            rgba(40, 80, 40, 0.6) 0%,
            rgba(35, 70, 35, 0.75) 15%,
            rgba(30, 60, 30, 0.85) 35%,
            rgba(25, 50, 25, 0.95) 60%,
            rgba(20, 40, 20, 1) 100%
        );
    box-shadow: inset 0 20px 30px rgba(0, 0, 0, 0.3);
}

/* Scene elements */
.howling-wolf {
    position: absolute;
    bottom: 5%;
    left: 5%;
    width: 200px;
    height: 220px;
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.6));
}

.wolf-eye {
    animation: wolf-eye-glow 2s ease-in-out infinite;
}

@keyframes wolf-eye-glow {
    0%, 100% { 
        opacity: 0.8;
        filter: drop-shadow(0 0 5px #ffff00);
    }
    50% { 
        opacity: 1;
        filter: drop-shadow(0 0 10px #ffaa00);
    }
}

.glowing-pumpkin {
    position: absolute;
    width: 80px;
    height: 80px;
    z-index: 6;
    animation: pumpkinGlow 3s ease-in-out infinite;
}

/* Left side - back pumpkins (smaller) */
.glowing-pumpkin.pumpkin-1 {
    width: 70px;
    height: 70px;
    animation: pumpkinGlow 3s ease-in-out infinite;
    opacity: 0.9;
}

.glowing-pumpkin.pumpkin-2 {
    width: 65px;
    height: 65px;
    animation: pumpkinGlow 3.5s ease-in-out infinite 0.5s;
    opacity: 0.85;
}

/* Left side - front pumpkin (larger) */
.glowing-pumpkin.pumpkin-3 {
    width: 100px;
    height: 100px;
    animation: pumpkinGlow 2.8s ease-in-out infinite 1s;
}

/* Right side - back pumpkins (medium) */
.glowing-pumpkin.pumpkin-4 {
    width: 75px;
    height: 75px;
    animation: pumpkinGlow 3.2s ease-in-out infinite 0.8s;
    opacity: 0.9;
}

.glowing-pumpkin.pumpkin-5 {
    width: 70px;
    height: 70px;
    animation: pumpkinGlow 3.3s ease-in-out infinite 1.2s;
    opacity: 0.88;
}

@keyframes pumpkinGlow {
    0%, 100% {
        filter: brightness(1) drop-shadow(0 0 10px rgba(255, 140, 66, 0.6)) 
                drop-shadow(0 0 20px rgba(255, 119, 34, 0.4));
    }
    50% {
        filter: brightness(1.3) drop-shadow(0 0 20px rgba(255, 140, 66, 1)) 
                drop-shadow(0 0 35px rgba(255, 119, 34, 0.8))
                drop-shadow(0 0 50px rgba(255, 102, 0, 0.6));
    }
}

/* Flickering inner glow for carved faces */
.pumpkin-flicker {
    animation: pumpkinFlicker 2.5s ease-in-out infinite;
}

@keyframes pumpkinFlicker {
    0%, 100% {
        opacity: 0.6;
    }
    25% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 0.7;
    }
}

.spooky-tree {
    position: absolute;
    bottom: 0;
    width: 300px;
    height: 500px;
    animation: tree-sway 8s ease-in-out infinite;
    transform-origin: bottom center;
}

.spooky-tree.tree-1 {
    animation-delay: 0s;
}

.spooky-tree.tree-2 {
    animation-delay: 2.5s;
}

.spooky-tree.tree-3 {
    animation-delay: 5s;
}

.spooky-tree.tree-4 {
    animation-delay: 1s;
}

.spooky-tree.tree-5 {
    animation-delay: 3.5s;
}

.spooky-tree.tree-6 {
    animation-delay: 6s;
}

.spooky-tree.tree-7 {
    animation-delay: 7s;
}

@keyframes tree-sway {
    0%, 100% { transform: rotate(-0.5deg); }
    50% { transform: rotate(0.5deg); }
}

/* Tree pumpkins glow */
.tree-pumpkin {
    animation: pumpkin-tree-glow 3s ease-in-out infinite;
}

@keyframes pumpkin-tree-glow {
    0%, 100% {
        filter: drop-shadow(0 0 3px rgba(255, 140, 66, 0.6));
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(255, 140, 66, 1));
    }
}

/* Falling leaves animation */
.falling-leaf {
    animation: leaf-fall 8s ease-in-out infinite;
}

@keyframes leaf-fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.6;
    }
    50% {
        transform: translateY(30px) rotate(180deg);
        opacity: 0.4;
    }
    100% {
        transform: translateY(60px) rotate(360deg);
        opacity: 0;
    }
}

.cloud {
    position: absolute;
    width: 180px;
    height: 70px;
    opacity: 0.8;
    will-change: transform;
}

.cloud-1 {
    animation: cloud-drift-1 60s linear infinite;
}

.cloud-2 {
    animation: cloud-drift-2 75s linear infinite;
}

.cloud-3 {
    animation: cloud-drift-3 70s linear infinite;
}

.cloud-4 {
    animation: cloud-drift-4 85s linear infinite;
}

.cloud-5 {
    animation: cloud-drift-5 65s linear infinite;
}

.cloud-6 {
    animation: cloud-drift-6 72s linear infinite;
}

.cloud-7 {
    animation: cloud-drift-7 68s linear infinite;
}

.cloud-8 {
    animation: cloud-drift-8 55s linear infinite;
}

.cloud-9 {
    animation: cloud-drift-9 62s linear infinite;
}

.cloud-10 {
    animation: cloud-drift-10 58s linear infinite;
}

/* Cloud size variations */
.cloud-small {
    width: 140px;
    height: 60px;
    opacity: 0.6;
}

.cloud-medium {
    width: 200px;
    height: 80px;
    opacity: 0.75;
}

.cloud-large {
    width: 260px;
    height: 100px;
    opacity: 0.85;
}

@keyframes cloud-drift-1 {
    0% { transform: translateX(-200px); }
    100% { transform: translateX(calc(100vw + 200px)); }
}

@keyframes cloud-drift-2 {
    0% { transform: translateX(-200px); }
    100% { transform: translateX(calc(100vw + 200px)); }
}

@keyframes cloud-drift-3 {
    0% { transform: translateX(-200px); }
    100% { transform: translateX(calc(100vw + 200px)); }
}

@keyframes cloud-drift-4 {
    0% { transform: translateX(-200px); }
    100% { transform: translateX(calc(100vw + 200px)); }
}

@keyframes cloud-drift-5 {
    0% { transform: translateX(-200px); }
    100% { transform: translateX(calc(100vw + 200px)); }
}

@keyframes cloud-drift-6 {
    0% { transform: translateX(-200px); }
    100% { transform: translateX(calc(100vw + 200px)); }
}

@keyframes cloud-drift-7 {
    0% { transform: translateX(-200px); }
    100% { transform: translateX(calc(100vw + 200px)); }
}

@keyframes cloud-drift-8 {
    0% { transform: translateX(-200px); }
    100% { transform: translateX(calc(100vw + 200px)); }
}

@keyframes cloud-drift-9 {
    0% { transform: translateX(-200px); }
    100% { transform: translateX(calc(100vw + 200px)); }
}

@keyframes cloud-drift-10 {
    0% { transform: translateX(-200px); }
    100% { transform: translateX(calc(100vw + 200px)); }
}

.flying-bat {
    position: absolute;
    width: 60px;
    height: 40px;
    will-change: transform;
}

.flying-bat.bat-1 {
    animation: bat-fly-1 12s ease-in-out infinite;
}

.flying-bat.bat-2 {
    animation: bat-fly-2 15s ease-in-out infinite;
}

.flying-bat.bat-3 {
    animation: bat-fly-3 13s ease-in-out infinite;
}

.flying-bat.bat-4 {
    animation: bat-fly-4 11s ease-in-out infinite;
}

.flying-bat.bat-5 {
    animation: bat-fly-5 14s ease-in-out infinite;
}

.flying-bat.bat-6 {
    animation: bat-fly-6 16s ease-in-out infinite;
}

@keyframes bat-fly-1 {
    0%, 100% { 
        transform: translate(0, 0) scale(1);
    }
    25% { 
        transform: translate(-20vw, 8vh) scale(0.9);
    }
    50% { 
        transform: translate(-35vw, -3vh) scale(1.1);
    }
    75% { 
        transform: translate(-20vw, 10vh) scale(0.85);
    }
}

@keyframes bat-fly-2 {
    0%, 100% { 
        transform: translate(0, 0) scale(1);
    }
    25% { 
        transform: translate(25vw, -5vh) scale(1.1);
    }
    50% { 
        transform: translate(40vw, 8vh) scale(0.9);
    }
    75% { 
        transform: translate(20vw, -3vh) scale(1.05);
    }
}

@keyframes bat-fly-3 {
    0%, 100% { 
        transform: translate(0, 0) scale(1);
    }
    25% { 
        transform: translate(-15vw, 12vh) scale(0.85);
    }
    50% { 
        transform: translate(-30vw, 5vh) scale(1.15);
    }
    75% { 
        transform: translate(-10vw, 15vh) scale(0.95);
    }
}

@keyframes bat-fly-4 {
    0%, 100% { 
        transform: translate(0, 0) scale(1);
    }
    25% { 
        transform: translate(30vw, 10vh) scale(0.95);
    }
    50% { 
        transform: translate(50vw, -8vh) scale(1.2);
    }
    75% { 
        transform: translate(25vw, 5vh) scale(0.9);
    }
}

@keyframes bat-fly-5 {
    0%, 100% { 
        transform: translate(0, 0) scale(1);
    }
    25% { 
        transform: translate(-25vw, -8vh) scale(1.1);
    }
    50% { 
        transform: translate(-45vw, 5vh) scale(0.85);
    }
    75% { 
        transform: translate(-20vw, 12vh) scale(1);
    }
}

@keyframes bat-fly-6 {
    0%, 100% { 
        transform: translate(0, 0) scale(1);
    }
    25% { 
        transform: translate(35vw, 15vh) scale(0.9);
    }
    50% { 
        transform: translate(60vw, 3vh) scale(1.15);
    }
    75% { 
        transform: translate(30vw, -5vh) scale(0.95);
    }
}

.bat-wing-left, .bat-wing-right {
    animation: wing-flap 0.3s ease-in-out infinite;
    transform-origin: center;
}

.bat-wing-right {
    animation-delay: 0.15s;
}

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

.skeleton-hanging {
    position: absolute;
    top: 15%;
    right: 5%;
    width: 140px;
    height: 200px;
    animation: skeleton-swing 4s ease-in-out infinite;
    transform-origin: top center;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.4));
}

@keyframes skeleton-swing {
    0%, 100% { 
        transform: rotate(-4deg);
    }
    50% { 
        transform: rotate(4deg);
    }
}

.spider-web {
    position: absolute;
    width: 120px;
    height: 120px;
    opacity: 0.7;
    animation: web-shimmer 4s ease-in-out infinite;
}

@keyframes web-shimmer {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.9; }
}

.spider {
    position: absolute;
    width: 50px;
    height: 50px;
    animation: spider-dangle 5s ease-in-out infinite;
    transform-origin: top center;
}

.spider.spider-1 {
    animation-delay: 0s;
}

.spider.spider-2 {
    animation-delay: 2.5s;
}

@keyframes spider-dangle {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(15px) rotate(2deg); }
}

/* Layered fog system with horizontal drift */
.fog-layer {
    position: absolute;
    left: -100%;
    width: 300%;
    height: 40%;
    pointer-events: none;
    filter: blur(60px);
    will-change: transform, opacity;
    z-index: 10;
}

.fog-layer.fog-1 {
    background: radial-gradient(
        ellipse at 20% 50%,
        rgba(140, 100, 180, 0.4) 0%,
        rgba(120, 80, 160, 0.3) 25%,
        transparent 50%
    ),
    radial-gradient(
        ellipse at 60% 50%,
        rgba(160, 120, 200, 0.35) 0%,
        rgba(140, 100, 180, 0.25) 25%,
        transparent 50%
    ),
    radial-gradient(
        ellipse at 90% 50%,
        rgba(130, 90, 170, 0.4) 0%,
        rgba(110, 70, 150, 0.3) 25%,
        transparent 50%
    );
    animation: fog-drift-1 120s linear infinite, fog-pulse-1 8s ease-in-out infinite;
}

.fog-layer.fog-2 {
    background: radial-gradient(
        ellipse at 30% 50%,
        rgba(150, 80, 140, 0.35) 0%,
        rgba(130, 60, 120, 0.25) 25%,
        transparent 50%
    ),
    radial-gradient(
        ellipse at 70% 50%,
        rgba(170, 100, 160, 0.3) 0%,
        rgba(150, 80, 140, 0.2) 25%,
        transparent 50%
    );
    animation: fog-drift-2 150s linear infinite, fog-pulse-2 10s ease-in-out infinite;
}

.fog-layer.fog-3 {
    background: radial-gradient(
        ellipse at 40% 50%,
        rgba(120, 70, 130, 0.3) 0%,
        rgba(100, 50, 110, 0.2) 25%,
        transparent 50%
    ),
    radial-gradient(
        ellipse at 80% 50%,
        rgba(140, 90, 150, 0.35) 0%,
        rgba(120, 70, 130, 0.25) 25%,
        transparent 50%
    );
    animation: fog-drift-3 180s linear infinite, fog-pulse-3 12s ease-in-out infinite;
}

/* Night theme - darker, more mysterious fog */
.theme-night .fog-layer.fog-1 {
    background: radial-gradient(
        ellipse at 20% 50%,
        rgba(100, 50, 140, 0.5) 0%,
        rgba(80, 30, 120, 0.4) 25%,
        transparent 50%
    ),
    radial-gradient(
        ellipse at 60% 50%,
        rgba(120, 60, 160, 0.45) 0%,
        rgba(100, 40, 140, 0.35) 25%,
        transparent 50%
    ),
    radial-gradient(
        ellipse at 90% 50%,
        rgba(90, 40, 130, 0.5) 0%,
        rgba(70, 20, 110, 0.4) 25%,
        transparent 50%
    );
}

.theme-night .fog-layer.fog-2 {
    background: radial-gradient(
        ellipse at 30% 50%,
        rgba(110, 40, 120, 0.45) 0%,
        rgba(90, 20, 100, 0.35) 25%,
        transparent 50%
    ),
    radial-gradient(
        ellipse at 70% 50%,
        rgba(130, 60, 140, 0.4) 0%,
        rgba(110, 40, 120, 0.3) 25%,
        transparent 50%
    );
}

.theme-night .fog-layer.fog-3 {
    background: radial-gradient(
        ellipse at 40% 50%,
        rgba(80, 30, 110, 0.4) 0%,
        rgba(60, 10, 90, 0.3) 25%,
        transparent 50%
    ),
    radial-gradient(
        ellipse at 80% 50%,
        rgba(100, 50, 130, 0.45) 0%,
        rgba(80, 30, 110, 0.35) 25%,
        transparent 50%
    );
}

/* Day theme - lighter, softer fog */
.theme-day .fog-layer.fog-1 {
    background: radial-gradient(
        ellipse at 20% 50%,
        rgba(200, 180, 220, 0.25) 0%,
        rgba(180, 160, 200, 0.15) 25%,
        transparent 50%
    ),
    radial-gradient(
        ellipse at 60% 50%,
        rgba(220, 200, 240, 0.2) 0%,
        rgba(200, 180, 220, 0.1) 25%,
        transparent 50%
    );
}

.theme-day .fog-layer.fog-2 {
    background: radial-gradient(
        ellipse at 30% 50%,
        rgba(210, 190, 230, 0.2) 0%,
        rgba(190, 170, 210, 0.1) 25%,
        transparent 50%
    ),
    radial-gradient(
        ellipse at 70% 50%,
        rgba(230, 210, 250, 0.15) 0%,
        rgba(210, 190, 230, 0.08) 25%,
        transparent 50%
    );
}

.theme-day .fog-layer.fog-3 {
    background: radial-gradient(
        ellipse at 40% 50%,
        rgba(190, 170, 210, 0.18) 0%,
        rgba(170, 150, 190, 0.1) 25%,
        transparent 50%
    ),
    radial-gradient(
        ellipse at 80% 50%,
        rgba(210, 190, 230, 0.2) 0%,
        rgba(190, 170, 210, 0.12) 25%,
        transparent 50%
    );
}

/* Fog drift animations - horizontal movement */
@keyframes fog-drift-1 {
    0% { transform: translateX(0); }
    100% { transform: translateX(33.33%); }
}

@keyframes fog-drift-2 {
    0% { transform: translateX(0); }
    100% { transform: translateX(33.33%); }
}

@keyframes fog-drift-3 {
    0% { transform: translateX(0); }
    100% { transform: translateX(33.33%); }
}

/* Fog pulse animations - opacity changes */
@keyframes fog-pulse-1 {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

@keyframes fog-pulse-2 {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 0.95; }
}

@keyframes fog-pulse-3 {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.9; }
}


/* Disable animations when user preference is set */
.animations-disabled .cloud,
.animations-disabled .flying-bat,
.animations-disabled .spooky-tree,
.animations-disabled .howling-wolf,
.animations-disabled .skeleton-hanging,
.animations-disabled .glowing-pumpkin,
.animations-disabled .pumpkin-flicker,
.animations-disabled .spider,
.animations-disabled .spider-web,
.animations-disabled .fog-layer,
.animations-disabled .bat-wing-left,
.animations-disabled .bat-wing-right,
.animations-disabled .wolf-eye,
.animations-disabled .tower-orb,
.animations-disabled .castle-window,
.animations-disabled .grass-layer {
    animation: none !important;
}

/* Respect system preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cloud,
    .flying-bat,
    .spooky-tree,
    .howling-wolf,
    .skeleton-hanging,
    .glowing-pumpkin,
    .pumpkin-flicker,
    .spider,
    .spider-web,
    .fog-layer,
    .bat-wing-left,
    .bat-wing-right,
    .wolf-eye,
    .tower-orb,
    .castle-window,
    .grass-layer {
        animation: none !important;
    }
}

/* Pine Trees */
.pine-tree {
    position: absolute;
    width: 80px;
    height: 150px;
    opacity: 0.5;
    z-index: 2;
    animation: tree-sway 8s ease-in-out infinite;
    transform-origin: bottom center;
}

.pine-tree.pine-1 {
    animation-delay: 0s;
}

.pine-tree.pine-2 {
    animation-delay: 1.5s;
}

.pine-tree.pine-3 {
    animation-delay: 3s;
}

.pine-tree.pine-4 {
    animation-delay: 4.5s;
}

.pine-tree.pine-5 {
    animation-delay: 6s;
}

.pine-tree.pine-6 {
    animation-delay: 7.5s;
}


/* Grass Layer - Natural individual blades */
.grass-layer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 120px;
    z-index: 5;
    pointer-events: none;
    animation: grassWave 6s ease-in-out infinite;
    transform-origin: bottom center;
}

.grass-layer path {
    animation: grassBlade 3s ease-in-out infinite;
    animation-delay: calc(var(--blade-index, 0) * 0.05s);
}

@keyframes grassWave {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(3px);
    }
}

@keyframes grassBlade {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(2deg);
    }
    75% {
        transform: rotate(-2deg);
    }
}

/* Spooky Bushes */
.spooky-bush {
    position: absolute;
    width: 150px;
    height: 100px;
    opacity: 0.95;
    z-index: 4;
    animation: bush-rustle 4s ease-in-out infinite;
    transform-origin: bottom center;
}

.spooky-bush.bush-1 {
    animation-delay: 0s;
}

.spooky-bush.bush-2 {
    animation-delay: 1s;
}

.spooky-bush.bush-3 {
    animation-delay: 2s;
}

.spooky-bush.bush-4 {
    animation-delay: 3s;
}

@keyframes bush-rustle {
    0%, 100% { 
        transform: translateX(0) scale(1);
    }
    25% { 
        transform: translateX(-2px) scale(1.01);
    }
    50% { 
        transform: translateX(0) scale(1);
    }
    75% { 
        transform: translateX(2px) scale(0.99);
    }
}

.bush-eye {
    animation: bush-eye-blink 5s ease-in-out infinite;
}

@keyframes bush-eye-blink {
    0%, 90%, 100% { 
        opacity: 1;
        transform: scaleY(1);
    }
    92%, 96% { 
        opacity: 0.3;
        transform: scaleY(0.1);
    }
    94% {
        opacity: 1;
        transform: scaleY(1);
    }
}

/* Disable bush animations when user preference is set */
.animations-disabled .spooky-bush,
.animations-disabled .bush-eye {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .spooky-bush,
    .bush-eye {
        animation: none !important;
    }
}

/* Disable fog animations when user preference is set */
.animations-disabled .fog-layer {
    animation: none !important;
    opacity: 0.5 !important;
}

@media (prefers-reduced-motion: reduce) {
    .fog-layer {
        animation: none !important;
        opacity: 0.5 !important;
    }
}