/* Moongarden Specific Styles */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

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

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .7; }
}

.group:hover .group-hover\:bg-green-500\/10 {
    background-color: rgba(34, 197, 94, 0.1);
}

/* Custom Gradients */
.bg-gradient-moon {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.text-shadow-glow {
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* Plant Cards */
.plant-card {
    transition: all 0.3s ease;
}
.plant-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px -10px rgba(34, 197, 94, 0.3);
}

/* Moon Phase Visuals */
.moon-visual-container {
    box-shadow: 0 0 50px rgba(255,255,255,0.1);
}

/* Enhanced Moon Visibility - Logic:
   The container is the "Shadow" (dark).
   The inner div is the "Light" (illuminated part).
*/
.moon-container {
    background: #111827; /* Dark background */
    box-shadow: inset -10px -10px 30px rgba(0,0,0,0.8), 0 0 20px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
}

.moon-phase-shadow {
    position: absolute;
    top: 0;
    bottom: 0;
    background: #000;
    opacity: 0.8;
    transition: all 1s ease;
}

/* This is the illuminated part style if we swap logic, 
   but currently we use shadow overlay logic in PHP. 
   Let's fix the contrast. */

/* Realistic Crescent Moon CSS */
.moon-base {
    /* The illuminated part (The Moon) */
    background: radial-gradient(circle at 35% 35%, #e2e8f0 0%, #94a3b8 100%);
    box-shadow: 0 0 20px rgba(226, 232, 240, 0.3); /* Soft Glow */
    position: relative;
    overflow: hidden; /* Important to clip the shadow */
}

.moon-phase-shadow {
    /* The Shadow is a circle that moves across */
    background-color: #111827; /* Matches the card background perfectly! */
    border-radius: 50%;
    position: absolute;
    top: -5%; /* Slightly larger to cover edges */
    bottom: -5%;
    width: 110%; /* Slightly wider to ensure full coverage */
    height: 110%;
    transition: all 1s ease;
    box-shadow: inset 10px 0 20px rgba(0,0,0,0.8); /* Inner shadow for depth */
}


/* Fix for dark backgrounds */
.bg-gray-900 {
    background-color: #111827 !important;
}
.bg-black {
    background-color: #000000 !important;
}
.border-gray-700 {
    border-color: #374151 !important;
}
.border-gray-800 {
    border-color: #1f2937 !important;
}