/* space-background.css - Animated futuristic background */

.space-background {
    position: fixed; /* Position relative to the viewport */
    top: 0;          /* Align to the top edge */
    left: 0;         /* Align to the left edge */
    right: 0;        /* Stretch to the right edge */
    bottom: 0;       /* Stretch to the bottom edge */
    width: 100%;     /* Explicitly set width to viewport width */
    height: 100%;    /* Explicitly set height to viewport height */
    z-index: -1;     /* Place it behind all other content */
    overflow: hidden;/* CRUCIAL: Clip internal content exceeding bounds */
    background-color: #221a1a; /* Dark base color */
    /* Optional: Prevent background from capturing mouse events */
    /* pointer-events: none; */
}

/* Grid lines - No changes needed here */
.grid {
    position: absolute;
    width: 200%; /* This large size is contained by parent's overflow:hidden */
    height: 200%;
    top: -50%;
    left: -50%;
    background-image:
        linear-gradient(rgba(0, 255, 0, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 0, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: perspective(500px) rotateX(60deg);
    animation: grid-move 20s linear infinite;
    /* pointer-events: none; */ /* Optional */
}

/* Nebula effect - No changes needed here */
.nebula {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; /* Ensure nebula itself fills container */
    left: 0;
    background: radial-gradient(
        circle at 70% 20%,
        rgba(128, 0, 128, 0.2) 0%,
        rgba(0, 128, 128, 0.1) 40%,
        transparent 70%
    );
    filter: blur(20px);
    opacity: 0.5;
    animation: nebula-pulse 15s ease-in-out infinite alternate;
    /* pointer-events: none; */ /* Optional */
}

/* Glowing orb (if used) - No changes needed */
.orb {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        rgba(0, 255, 255, 0.6) 0%,
        rgba(0, 255, 150, 0.3) 40%,
        transparent 70%
    );
    filter: blur(5px);
    top: 20%;
    left: 70%;
    animation: orb-float 20s ease-in-out infinite alternate;
     /* pointer-events: none; */ /* Optional */
}

/* Animations - No changes needed */
@keyframes grid-move {
    0% {
        transform: perspective(500px) rotateX(60deg) translateY(0);
    }
    100% {
        transform: perspective(500px) rotateX(60deg) translateY(50px);
    }
}

@keyframes nebula-pulse {
    0% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.1);
    }
    100% {
        opacity: 0.3;
        transform: scale(1);
    }
}

@keyframes orb-float {
    0% {
        transform: translateY(0) translateX(0);
        filter: blur(5px) brightness(1);
    }
    50% {
        transform: translateY(-30px) translateX(20px);
        filter: blur(8px) brightness(1.2);
    }
    100% {
        transform: translateY(0) translateX(0);
        filter: blur(5px) brightness(1);
    }
}

/* Make sure the background doesn't interfere with the navbar */
.navbar {
    position: relative; /* Or sticky, etc. */
    z-index: 10; /* Ensure navbar stays above background */
}

/* Ensure page content stays above background */
#page-content-wrapper {
    position: relative;
    z-index: 5; /* Ensure content stays above background */
}

/* Hide orb on specific pages */
.no-orb .orb {
    display: none;
}