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

@layer base {
    html {
        @apply antialiased;
    }

    body {
        @apply bg-white text-slate-900;
    }

    ::selection {
        @apply bg-mdb-500 text-white;
    }
}

@layer utilities {
    .conecta-mesh {
        background:
            radial-gradient(1200px 420px at 8% -10%, rgba(0, 159, 227, 0.16), transparent 60%),
            radial-gradient(900px 360px at 92% 0%, rgba(0, 119, 200, 0.12), transparent 55%),
            linear-gradient(180deg, #f4fbff 0%, #ffffff 48%, #f7fbfe 100%);
    }

    .fade-up {
        animation: fade-up 0.55s ease-out both;
    }

    .fade-up-delay-1 { animation-delay: 0.06s; }
    .fade-up-delay-2 { animation-delay: 0.12s; }
    .fade-up-delay-3 { animation-delay: 0.18s; }
    .fade-up-delay-4 { animation-delay: 0.24s; }

    .bar-grow {
        transform-origin: bottom;
        animation: bar-grow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bar-grow {
    from {
        transform: scaleY(0.15);
        opacity: 0.35;
    }
    to {
        transform: scaleY(1);
        opacity: 1;
    }
}