@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        @apply bg-gemini-bg text-slate-900 selection:bg-gemini-blue/10 font-medium;
        -webkit-font-smoothing: antialiased;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        @apply font-black tracking-tighter uppercase italic;
    }
}

@layer components {
    .gemini-card {
        @apply bg-white/60 border border-slate-200 backdrop-blur-xl rounded-[2.5rem] transition-all duration-500;
        @apply hover:bg-white/80 hover:border-gemini-blue/20 hover:shadow-[0_20px_50px_rgba(0, 0, 0, 0.04)];
    }

    .gemini-card-dark {
        @apply bg-white/5 border border-white/10 backdrop-blur-3xl rounded-[2.5rem] transition-all duration-500;
        @apply hover:bg-white/10 hover:border-white/20 hover:shadow-[0_20px_60px_rgba(0, 0, 0, 0.3)];
    }

    .text-gradient {
        @apply bg-clip-text text-transparent bg-gemini-gradient;
    }

    .btn-premium {
        @apply px-8 py-4 bg-gemini-gradient text-white rounded-full font-bold shadow-lg shadow-gemini-purple/20 transition-all;
        @apply hover:-translate-y-1 hover:shadow-xl hover:shadow-gemini-purple/30 active:scale-95;
    }

    .reveal {
        @apply opacity-0 translate-y-10 transition-all duration-1000 ease-out;
    }

    .reveal.revealed {
        @apply opacity-100 translate-y-0;
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    @apply bg-slate-100;
}

::-webkit-scrollbar-thumb {
    @apply bg-slate-300 rounded-full border-4 border-transparent bg-clip-padding hover:bg-slate-400 transition-colors;
}