/* Custom CSS for cosmic theme and animations */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
    overflow: hidden; /* Prevent scrollbars entirely */
}

/* Cosmic background animations */
@keyframes pulse {
    0% {
        transform: scale(0.8) translate(-50%, -50%) rotate(0deg);
        opacity: 0.3;
        filter: blur(5px);
    }
    50% {
        transform: scale(1.2) translate(-50%, -50%) rotate(180deg);
        opacity: 0.6;
        filter: blur(10px);
    }
    100% {
        transform: scale(0.8) translate(-50%, -50%) rotate(360deg);
        opacity: 0.3;
        filter: blur(5px);
    }
}

.animate-pulse {
    animation: pulse 6s infinite ease-in-out;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

/* More advanced blob animations */
.cosmic-blob {
    position: absolute;
    border-radius: 50%;
    mix-blend-screen;
    opacity: 0.2; /* Slightly less opaque for more elements */
    filter: blur(15px); /* Stronger blur for a diffuse look */
}

@keyframes blob-drift-1 {
    0% { transform: translate(0, 0) scale(0.7); }
    33% { transform: translate(50px, -30px) scale(1.1); }
    66% { transform: translate(-20px, 60px) scale(0.9); }
    100% { transform: translate(0, 0) scale(0.7); }
}

@keyframes blob-drift-2 {
    0% { transform: translate(0, 0) scale(1.2); }
    40% { transform: translate(-40px, 70px) scale(0.8); }
    80% { transform: translate(60px, -50px) scale(1.3); }
    100% { transform: translate(0, 0) scale(1.2); }
}
/* Add more @keyframes blob-drift-X for other blobs */

.animate-blob-1 {
    width: 150px;
    height: 150px;
    animation: blob-drift-1 12s infinite ease-in-out alternate;
}

.animate-blob-2 {
    width: 100px;
    height: 100px;
    animation: blob-drift-2 15s infinite ease-in-out alternate-reverse;
}
/* Define specific styles and animations for .animate-blob-3, .animate-blob-4 etc. */


/* Text fade-in animation */
@keyframes fadeInFromBottom {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInFromBottom 0.8s ease-out forwards;
}

.animation-delay-500 {
    animation-delay: 0.5s;
}

/* Basic styling for the loading indicator */
.fa-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Example of a subtle background pattern */
.bg-pattern-cosmic {
    background-image: url('data:image/svg+xml,...'); /* Replace with a subtle SVG or base64 encoded image for stars/nebula */
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}