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

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

    body {
        @apply bg-background text-dark font-sans;
    }
}

@layer utilities {
    .btn-magnetic {
        @apply transition-transform duration-300 hover:scale-[1.03];
        transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .link-lift {
        @apply transition-transform duration-300 ease-out hover:-translate-y-[1px];
    }

    .btn-slide-hover {
        @apply relative overflow-hidden;
    }

    .btn-slide-hover::before {
        content: '';
        @apply absolute inset-0 bg-dark transform -translate-x-full transition-transform duration-500 ease-[cubic-bezier(0.76, 0, 0.24, 1)] z-0;
    }

    .btn-slide-hover:hover::before {
        @apply translate-x-0;
    }

    .btn-slide-hover-accent::before {
        @apply absolute inset-0 bg-accent transform -translate-x-full transition-transform duration-500 ease-[cubic-bezier(0.76, 0, 0.24, 1)] z-0;
    }

    .btn-slide-hover-accent:hover::before {
        @apply translate-x-0;
    }

    .brutalist-card {
        @apply bg-primary border-2 border-dark shadow-[6px_6px_0px_0px_rgba(17, 17, 17, 1)] rounded-[2rem];
    }

    .writing-vertical-rl {
        writing-mode: vertical-rl;
    }
}

/* Hide scrollbar for cleaner brutalist look */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #F5F3EE;
}

::-webkit-scrollbar-thumb {
    background: #111111;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #E63B2E;
}