@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .glass-card {
        @apply bg-white/60 backdrop-blur-xl border border-white/60 rounded-3xl shadow-xl shadow-baby-500/5;
    }
    .form-input {
        @apply w-full px-4 py-2.5 rounded-xl bg-white/80 border border-baby-200
               focus:outline-none focus:ring-2 focus:ring-baby-300 focus:border-baby-300
               placeholder-slate-400 transition;
    }
}

@layer utilities {
    .animate-fade-in { animation: fade-in 0.5s ease-out; }
    .animate-pulse-bg { animation: pulse-bg 2s ease-in-out infinite; }
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-bg {
    0%, 100% { box-shadow: 0 0 0 0 rgba(125, 211, 252, 0.4); }
    50% { box-shadow: 0 0 30px 5px rgba(125, 211, 252, 0.2); }
}

html { scroll-behavior: smooth; }
.grid::-webkit-scrollbar { display: none; }
.grid { -ms-overflow-style: none; scrollbar-width: none; }
.line-clamp-2 {
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}