/* Tailwind CSS Utilities */
@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .text-gradient {
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .bg-blur {
        backdrop-filter: blur(8px);
    }
    .animate-float {
        animation: float 6s ease-in-out infinite;
    }
    .animate-pulse-slow {
        animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    .animate-fade-in {
        animation: fadeIn 0.8s ease-in-out;
    }
    .animate-slide-up {
        animation: slideUp 0.8s ease-out;
    }
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

/* Animations */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Component Styles */
.space-item {
    text-align: center;
    font-size: 12px;
}

.space-item img {
    width: 80px;
    height: 80px;
    border: 1px solid #efefef;
    margin-bottom: 5px;
}

.friend-link {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.friend-link li {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding-right: 10px;
    font-size: 14px;
}

.friend-link li a {
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    .friend-link {
        flex-direction: column;
    }
    .friend-link li {
        flex: 1;
    }
}