/* Import fonts (moved from HTML for cleaner setup, or keeping them in HTML is fine too, 
but putting them here is also a good practice to keep head clean) */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* Base structure */
body {
    min-height: max(884px, 100dvh);
}

/* Material Icons configuration */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* Custom utilities */
.tonal-shift {
    transition: background-color 0.3s ease;
}

.glass-header {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
}

/* Animations for scroll (Intersection Observer) */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}