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

@layer utilities {
    .material-symbols-outlined {
        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        vertical-align: middle;
    }
    .material-symbols-filled {
        font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        vertical-align: middle;
    }
    .glass-nav {
        background: rgba(250, 250, 245, 0.7);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
    .hero-gradient {
        background: linear-gradient(135deg, rgba(23, 49, 36, 0.4) 0%, rgba(45, 71, 57, 0.2) 100%);
    }
    .asymmetric-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 1.25rem;
    }
    .no-scrollbar::-webkit-scrollbar { 
        display: none; 
    }
    .no-scrollbar { 
        -ms-overflow-style: none; 
        scrollbar-width: none; 
    }
    .image-reveal {
        overflow: hidden;
    }
    .image-reveal:hover img { 
        transform: scale(1.05); 
    }
}