/* Font Loading States */

/* Initial state - fonts loading */
.fonts-loading {
    /* Use system fonts while custom fonts load */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Fonts loaded successfully */
.fonts-loaded {
    /* Apply custom fonts */
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Fonts failed to load */
.fonts-failed {
    /* Fallback to system fonts */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Prevent layout shift during font loading */
.fonts-loading .navbar-toggler,
.fonts-loading .nav-link,
.fonts-loading .section-header,
.fonts-loading .section-text,
.fonts-loading .leistung-item h3,
.fonts-loading .leistung-item p {
    /* Maintain consistent spacing */
    line-height: 1.4;
    letter-spacing: 0.01em;
}

/* Smooth transition when fonts load */
.fonts-loaded .navbar-toggler,
.fonts-loaded .nav-link,
.fonts-loaded .section-header,
.fonts-loaded .section-text,
.fonts-loaded .leistung-item h3,
.fonts-loaded .leistung-item p {
    transition: font-family 0.1s ease-in-out;
}

/* Mobile-specific loading states */
@media (max-width: 768px) {
    .fonts-loading {
        /* Optimize for mobile while loading */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    .fonts-loaded {
        /* Apply mobile optimizations when loaded */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .fonts-loading,
    .fonts-loaded,
    .fonts-failed {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
}