/* =========================================
   1. CORE SPACE BACKGROUND
   ========================================= */
body {
    background-color: #03030c !important;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(40, 30, 90, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(10, 50, 80, 0.3) 0%, transparent 50%) !important;
    background-attachment: fixed !important;
    color: #f0f3ff !important;
}

/* =========================================
   2. DEEP SKY PULSE (Unsplash Layer)
   ========================================= */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: transparent url('https://images.unsplash.com/photo-1506318137071-a8e063b4bec0?q=80&w=1000') repeat;
    opacity: 0.12;
    z-index: -2;
    pointer-events: none;
    animation: deepSkyPulse 12s ease-in-out infinite alternate;
}

/* =========================================
   3. PURE CSS BLINKING STARS (Replaces JS)
   ========================================= */
body::after {
    content: '';
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
    pointer-events: none;
    /* Draws a repeating tile of random-looking dots */
    background-image: 
        radial-gradient(1.5px 1.5px at 25px 30px, white, rgba(255,255,255,0)),
        radial-gradient(2px 2px at 150px 80px, white, rgba(255,255,255,0)),
        radial-gradient(1px 1px at 280px 120px, white, rgba(255,255,255,0)),
        radial-gradient(1.5px 1.5px at 60px 220px, white, rgba(255,255,255,0)),
        radial-gradient(2.5px 2.5px at 350px 280px, white, rgba(255,255,255,0)),
        radial-gradient(1px 1px at 180px 340px, white, rgba(255,255,255,0)),
        radial-gradient(2px 2px at 290px 40px, white, rgba(255,255,255,0));
    background-size: 400px 400px;
    animation: flash 4.5s linear infinite;
}

/* =========================================
   4. GLASSMORPHISM & EQUAL HEIGHT CARDS
   ========================================= */
/* Target Homepage's grid columns to allow flexing */
.grid > div {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Target the actual card links inside the grid */
.grid > div > a.group,
.grid > div > div.group {
    background: rgba(15, 15, 35, 0.45) !important;
    border: 1px solid rgba(100, 150, 255, 0.1) !important;
    backdrop-filter: blur(12px) !important;
    border-radius: 12px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    flex-grow: 1 !important; /* Forces all cards in a row to stretch equally */
    display: flex;
    flex-direction: column;
}

/* Restores your custom Neon Blue hover state */
.grid > div > a.group:hover,
.grid > div > div.group:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(0, 180, 216, 0.4) !important;
    box-shadow: 0 15px 30px rgba(0,0,0,0.4), 0 0 15px rgba(0, 180, 216, 0.1) !important;
    background: rgba(20, 20, 45, 0.65) !important;
}

/* Make text colors match your theme */
.group .text-gray-500, .group .text-slate-500 {
    color: #8a99ad !important; /* Your --text-muted color */
}

/* =========================================
   5. ANIMATION KEYFRAMES
   ========================================= */
@keyframes deepSkyPulse {
    0% { opacity: 0.08; transform: scale(1); }
    100% { opacity: 0.16; transform: scale(1.01); }
}

@keyframes flash {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.85; }
}