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

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-photo-dark { background-color: #111111; }
    .bg-photo-gray { background-color: #1a1a1a; }
    .text-photo-dark { color: #111111; }
    .text-photo-light { color: #F5F5F5; }
    .border-photo-light { border-color: rgba(255, 255, 255, 0.1); }
    
    .btn-photo {
        @apply inline-flex items-center justify-center border border-white text-white font-sans uppercase tracking-[0.2em] text-xs py-4 px-10 hover:bg-white hover:text-black transition-colors duration-500;
    }
    
    .nav-link {
        @apply text-white/70 hover:text-white font-sans uppercase tracking-[0.2em] text-[10px] transition-colors duration-300 relative;
    }
    .nav-link.active {
        @apply text-white font-medium;
    }
    .nav-link::after {
        content: '';
        @apply absolute w-full h-[1px] bg-white bottom-[-4px] left-0 scale-x-0 origin-right transition-transform duration-500;
    }
    .nav-link:hover::after, .nav-link.active::after {
        @apply scale-x-100 origin-left;
    }

    .gallery-item {
        @apply relative overflow-hidden group cursor-pointer block;
    }
    .gallery-item img {
        @apply w-full h-full object-cover transition-transform duration-[2s] ease-out group-hover:scale-110 filter grayscale group-hover:grayscale-0;
    }
    .gallery-overlay {
        @apply absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex flex-col items-center justify-center p-6 text-center;
    }
}