/* 
   Litoral Sul - Main Stylesheet
   Powered by Tailwind CSS 
*/

@layer base {
    body {
        @apply font-sans bg-slate-50 text-[#3A3A3A] antialiased selection:bg-primary/10 selection:text-primary-dark text-[11px] md:text-sm overflow-x-hidden;
    }
    h1 { @apply font-display tracking-tighter font-black text-2xl md:text-5xl uppercase; }
    h2 { @apply font-display tracking-tighter font-black text-xl md:text-4xl uppercase; }
    h3 { @apply font-display tracking-tighter font-black text-lg md:text-2xl uppercase; }
    h4 { @apply font-display tracking-tight font-black text-base md:text-xl uppercase; }
}

@layer components {
    .app-card {
        @apply bg-white rounded-2xl border border-slate-200 shadow-[0_4px_24px_rgba(0,0,0,0.06)] transition-all duration-300 hover:shadow-[0_8px_48px_rgba(0,0,0,0.12)] hover:border-primary/20;
    }
    .btn-primary {
        @apply bg-primary text-white px-6 py-3 rounded-xl font-bold transition-all hover:bg-primary-dark active:scale-95 flex items-center justify-center gap-2 shadow-lg shadow-primary/20 uppercase text-xs tracking-widest;
    }
    .section-tag {
        @apply inline-flex items-center gap-2 px-3 py-1 rounded-full text-primary bg-primary/5 text-[10px] font-black uppercase tracking-tighter;
    }
    .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.8s cubic-bezier(0.21, 0.47, 0.32, 0.98);
    }
    .reveal.active {
        opacity: 1;
        transform: translateY(0);
    }
    .vertical-text {
        writing-mode: vertical-rl;
        text-orientation: mixed;
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    @apply bg-slate-100;
}
::-webkit-scrollbar-thumb {
    @apply bg-slate-300 rounded-full border-2 border-slate-100;
}
::-webkit-scrollbar-thumb:hover {
    @apply bg-primary;
}