/* Using TailwindCSS via CDN, this file is for custom styles and overrides */

body {
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #f0f4f8; /* Fallback */
    scroll-behavior: smooth;
}

/* Text shadow for better readability on complex backgrounds */
.header-text-shadow {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.footer-text-shadow {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* Frosted glass effect for content cards */
.card-style {
    background-color: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.125);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.card-style:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.15);
}

/* Staggered fade-in animation for content items */
.fade-in-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fade-in-item.animate-in {
    opacity: 1;
    transform: translateY(0);
}


/* --- Mobile Menu Styles & Animations --- */
#mobile-menu-panel {
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}
#mobile-menu-overlay {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
#mobile-menu:not(.is-closed) #mobile-menu-panel {
    transform: translateX(0);
}
#mobile-menu:not(.is-closed) #mobile-menu-overlay {
    opacity: 1;
}
/* This class is crucial for hiding the menu without using display:none */
#mobile-menu.is-closed {
    pointer-events: none;
}
#mobile-menu.is-closed #mobile-menu-overlay {
    opacity: 0;
}
#mobile-menu.is-closed #mobile-menu-panel {
    transform: translateX(100%);
}


/* Initially hide all sections for JS control */
.content-section {
    display: none;
}
/* This class makes a section visible */
.content-section.active {
    display: block;
}