@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Oswald:wght@400;500;600;700&display=swap');

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-arch-dark { background-color: #111111; }
    .bg-arch-gray { background-color: #F5F5F5; }
    .text-arch-dark { color: #111111; }
    .text-arch-gray { color: #888888; }
    .border-arch-dark { border-color: #111111; }
    
    .btn-arch {
        @apply relative inline-flex items-center justify-center overflow-hidden bg-[#111111] text-white font-sans uppercase tracking-[0.2em] text-xs py-4 px-8 transition-all duration-500 group;
    }
    .btn-arch::after {
        content: '';
        @apply absolute inset-0 bg-white w-0 transition-all duration-500 ease-out group-hover:w-full -z-10;
    }
    .btn-arch:hover {
        @apply text-[#111111];
    }
    
    .btn-arch-outline {
        @apply relative inline-flex items-center justify-center overflow-hidden border border-[#111111] text-[#111111] font-sans uppercase tracking-[0.2em] text-xs py-4 px-8 transition-all duration-500 group;
    }
    .btn-arch-outline::after {
        content: '';
        @apply absolute inset-0 bg-[#111111] w-0 transition-all duration-500 ease-out group-hover:w-full -z-10;
    }
    .btn-arch-outline:hover {
        @apply text-white;
    }
    
    .arch-link {
        @apply relative inline-block font-sans uppercase tracking-[0.15em] text-xs font-semibold;
    }
    .arch-link::after {
        content: '';
        @apply absolute w-full h-[2px] bg-current bottom-[-4px] left-0 scale-x-0 origin-right transition-transform duration-500;
    }
    .arch-link:hover::after {
        @apply scale-x-100 origin-left;
    }
    
    .project-card {
        @apply relative overflow-hidden group cursor-pointer;
    }
    .project-card img {
        @apply w-full h-full object-cover transition-transform duration-[1.5s] ease-out group-hover:scale-105;
    }
    .project-overlay {
        @apply absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex flex-col justify-end p-8;
    }
}