body {
    background-color: black;
    margin: 0;
    overflow: hidden;
    position: relative;
    min-height: 100vh;
}

.star {
    position: fixed;
    color: white;
    pointer-events: none;
    user-select: none;
    animation: twinkle 0.32s ease-in-out infinite;
    text-shadow: 0 0 3px rgba(255,255,255,0.8);
}

.ufo{
    position: fixed;
    bottom: 70%;
    left: 50%;
    scale: 0.5;
    transform: translateX(-50%);
    width: 300px;
    height: auto;
    animation: floaty 4s ease-in-out infinite;
    z-index: 1001;
    filter: brightness(1.2) contrast(2);
    opacity: 0.6;
    
}

/* Container to apply shadow fall-back to entire scene */
.scene-container {
    position: fixed;
    inset: 0;
    animation: sceneFall 4s ease-in-out infinite;
    transform-origin: center center;
}

.kitty {
    position: fixed;
    bottom: 35%;
    left: 42%;
    transform: translateX(-160px); /* offset from center */
    scale: 1.2;
    z-index: 1001;
    animation: kittyscale 4s ease-in-out infinite;
    filter: brightness(1.2) contrast(2);
}

.alien {
    position: fixed;
    bottom: 47%;
    left: 48%;
    transform: translateX(80px); /* offset to right of center */
    scale: 0.3;
    z-index: 1001;
    animation: alienscale 4s ease-in-out infinite;
    filter: brightness(1.2) contrast(2);

}

.moon {
    position: fixed;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
    width: 360px;
    height: auto;
    animation: moonSpin 2s linear infinite;
    scale:0.95;
    z-index: 1;
    perspective: 500px;
    transform-style: preserve-3d;
    filter: brightness(0.8) contrast(2);
    
}

@keyframes alienscale {
    0%, 100%{scale:0.3 ;}
    50%{scale:0.5 ;}
}

@keyframes kittyscale {
    0%, 100%{scale:1 ;}
    50%{scale:1.2 ;}
}

@keyframes moonscale{
    0%, 100%{scale: 1 ;}
    50% {scale:1.05 ;}
}

@keyframes moonSpin {
    from { transform: translateX(-50%) rotateX(15deg) rotateZ(0deg); }
    to { transform: translateX(-50%) rotateX(15deg) rotateZ(360deg); }
}


@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.overlay{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.2);            /* instead of scale: */
  mix-blend-mode: hard-light;  
  opacity: 1;                     /* slight transparency can reveal effect */
  z-index: 2000;                    /* above moon/alien/kitty */
  pointer-events: none;
  filter: url(#wave);
}