/* ===== SCENE WRAPPER ===== */
.moon-scene {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: linear-gradient(to bottom, #0a0014 0%, #1a0828 50%, #0a0014 100%);
    z-index: -1;
    pointer-events: none;
}

/* ===== UNSETTLING DISTORTION BENEATH THE MOON ===== */
.moon-scene::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 300px;
    top: 32%;
    right: 10%;
    background: radial-gradient(
        ellipse at center,
        rgba(177, 77, 255, 0.15) 0%,
        rgba(177, 77, 255, 0.08) 40%,
        transparent 70%
    );
    filter: blur(30px);
    animation: distortionShake 3s ease-in-out infinite;
    transform-origin: center;
}

/* Erratic, unsettling shake animation */
@keyframes distortionShake {
    0% { 
        transform: translate(0, 0) scale(1, 1);
        opacity: 0.6;
    }
    15% { 
        transform: translate(-8px, 3px) scale(1.05, 0.95);
        opacity: 0.8;
    }
    30% { 
        transform: translate(5px, -4px) scale(0.98, 1.03);
        opacity: 0.5;
    }
    45% { 
        transform: translate(-3px, 6px) scale(1.02, 0.97);
        opacity: 0.9;
    }
    60% { 
        transform: translate(7px, -2px) scale(0.96, 1.04);
        opacity: 0.4;
    }
    75% { 
        transform: translate(-6px, -5px) scale(1.04, 0.98);
        opacity: 0.7;
    }
    90% { 
        transform: translate(4px, 4px) scale(1.01, 1.02);
        opacity: 0.6;
    }
    100% { 
        transform: translate(0, 0) scale(1, 1);
        opacity: 0.6;
    }
}

/* ===== GLITCH MOON LAYER (blurred duplicate underneath) ===== */
.moon-scene::after {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    top: 8%;
    right: 12%;
    border-radius: 50%;
    background: radial-gradient(
        circle at 35% 35%,
        rgba(240, 213, 255, 0.4) 0%,
        rgba(217, 179, 255, 0.3) 25%,
        rgba(194, 142, 255, 0.25) 50%,
        rgba(163, 102, 255, 0.2) 75%,
        rgba(125, 61, 204, 0.15) 100%
    );
    filter: blur(20px);
    animation: glitchMoonShake 2.5s ease-in-out infinite;
    z-index: -1;
}

/* Different shake pattern for the ghost moon */
@keyframes glitchMoonShake {
    0% { 
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.5;
    }
    12% { 
        transform: translate(6px, -4px) rotate(1deg);
        opacity: 0.7;
    }
    25% { 
        transform: translate(-7px, 5px) rotate(-0.5deg);
        opacity: 0.4;
    }
    38% { 
        transform: translate(4px, 3px) rotate(0.8deg);
        opacity: 0.8;
    }
    50% { 
        transform: translate(-5px, -6px) rotate(-1deg);
        opacity: 0.3;
    }
    62% { 
        transform: translate(8px, 2px) rotate(0.6deg);
        opacity: 0.6;
    }
    75% { 
        transform: translate(-4px, 7px) rotate(-0.8deg);
        opacity: 0.5;
    }
    88% { 
        transform: translate(3px, -3px) rotate(0.4deg);
        opacity: 0.7;
    }
    100% { 
        transform: translate(0, 0) rotate(0deg);
        opacity: 0.5;
    }
}

/* ===== MOON ===== */
.moon-layer {
    position: absolute;
    width: 480px;
    height: 480px;
    top: 8%;
    right: 12%;
    border-radius: 50%;
    overflow: hidden;
    
    /* Base moon glow */
    background: radial-gradient(
        circle at 50% 50%,
        #f0d5ff 0%,
        #d9b3ff 30%,
        #c28eff 60%,
        #a366ff 85%,
        #7d3dcc 100%
    );
    
    /* Outer glow layers */
    box-shadow:
        0 0 60px 20px rgba(177, 77, 255, 0.5),
        0 0 120px 40px rgba(177, 77, 255, 0.3);
    
    animation: moonBreath 12s ease-in-out infinite;
    filter: brightness(1.15);
}

/* Clean halftone dot pattern */
.moon-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-image: 
        radial-gradient(circle, rgba(140, 80, 180, 0.6) 1.2px, transparent 1.2px);
    background-size: 8px 8px;
    background-position: 0 0;
    mix-blend-mode: multiply;
    opacity: 0.7;
}

/* Secondary offset halftone layer for depth */
.moon-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-image: 
        radial-gradient(circle, rgba(100, 50, 140, 0.5) 1px, transparent 1px);
    background-size: 12px 12px;
    background-position: 6px 6px;
    mix-blend-mode: multiply;
    opacity: 0.5;
}

/* Gentle breathing animation */
@keyframes moonBreath {
    0%, 100% { 
        transform: scale(1) rotate(0deg);
        filter: brightness(1.1) contrast(1.05);
    }
    50% { 
        transform: scale(1.03) rotate(0.5deg);
        filter: brightness(1.15) contrast(1.08);
    }
}


/* ===== PARTICLE LAYERS ===== */
.particle-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: starFloat linear infinite;
    will-change: transform, opacity;
}

/* Depth layers with glowing effects */
.particle.far {
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, #d9a3ff 0%, #b366ff 50%, transparent 70%);
    box-shadow: 0 0 4px rgba(217, 163, 255, 0.6);
}

.particle.mid {
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #f0d5ff 0%, #d9a3ff 50%, transparent 70%);
    box-shadow: 0 0 6px rgba(240, 213, 255, 0.8);
}

.particle.near {
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, #ffffff 0%, #f0d5ff 50%, transparent 70%);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}

/* Smooth floating animation with fade in/out */
@keyframes starFloat {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
        transform: translate(-40px, 80px) scale(1);
    }
    50% {
        opacity: 1;
    }
    90% {
        opacity: 0.7;
    }
    100% {
        transform: translate(-400px, 800px) scale(0.8);
        opacity: 0;
    }
}