/* Advanced Fog Engine CSS - WordPress Theme Integration */

/* Atmospheric fog canvas - full screen background */
#fog-canvas-atmospheric {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    z-index: 0 !important; /* Behind all content */
    opacity: 0.9 !important; /* ENHANCED: Higher opacity for visibility */
    mix-blend-mode: normal !important; /* ENHANCED: Normal blend for better visibility */
}

/* Header fog canvas - positioned over entire header */
#fog-canvas-logo,
.headerFogCanvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 1 !important; /* Behind content but above background */
    opacity: 0.8 !important; /* Slightly transparent for subtle effect */
    mix-blend-mode: normal !important; /* Normal blend for better visibility */
}

/* Legacy logo fog canvas styling - now applies to header-wide fog */
.logo-wrapper .logoFogCanvas,
.logo-wrapper #fog-canvas-logo {
    /* This styling is no longer used since fog moved to header level */
    display: none;
}

/* Ensure fog canvases resize correctly */
canvas[id^="fog-canvas"] {
    display: block;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

/* Performance optimizations for fog canvases */
@media (prefers-reduced-motion: reduce) {
    canvas[id^="fog-canvas"] {
        opacity: 0.3 !important;
    }
}

/* MOBILE DEVICE OVERRIDES - Fog komplett deaktiviert für bessere Performance */
@media screen and (max-width: 768px), 
       screen and (max-height: 768px),
       (hover: none) and (pointer: coarse) {
    
    /* Alle Fog-Canvas auf mobilen Geräten ausblenden */
    #fog-canvas-atmospheric,
    #fog-canvas-logo,
    .headerFogCanvas,
    .logoFogCanvas,
    canvas[id^="fog-canvas"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Console-Log für Debug-Zwecke */
    body::before {
        content: "Mobile Mode: Fog Effects Disabled";
        position: fixed;
        top: -9999px;
        left: -9999px;
        z-index: -9999;
        opacity: 0;
        font-size: 0;
    }
}

/* Zusätzliche Sicherheit für sehr kleine Bildschirme */
@media screen and (max-width: 480px) {
    canvas[id^="fog-canvas"] {
        display: none !important;
    }
}

/* Touch-Geräte spezifisch */
@media (hover: none) {
    canvas[id^="fog-canvas"] {
        display: none !important;
    }
}

/* Mobile optimizations */
@media (max-width: 768px) {
    #fog-canvas-atmospheric {
        opacity: 0.4 !important; /* Reduce intensity on mobile */
    }
    
    #fog-canvas-logo {
        opacity: 0.6 !important; /* Reduce intensity on mobile */
    }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    canvas[id^="fog-canvas"] {
        image-rendering: auto;
    }
}

/* Dark mode compatibility */
@media (prefers-color-scheme: dark) {
    #fog-canvas-atmospheric {
        opacity: 0.7 !important;
        mix-blend-mode: lighten;
    }
    
    #fog-canvas-logo {
        opacity: 0.9 !important;
        mix-blend-mode: soft-light;
    }
}

/* Fog engine debug mode styles */
.fog-engine-debug #fog-canvas-atmospheric {
    border: 2px dashed rgba(255, 0, 0, 0.3) !important;
}

.fog-engine-debug #fog-canvas-logo {
    border: 2px dashed rgba(0, 255, 0, 0.3) !important;
}

/* Fog engine loading state */
canvas[id^="fog-canvas"]:not([data-fog-loaded="true"]) {
    background: linear-gradient(45deg, 
        rgba(100, 110, 130, 0.1) 0%, 
        rgba(120, 130, 140, 0.1) 50%, 
        rgba(100, 110, 130, 0.1) 100%);
    background-size: 20px 20px;
    animation: fogLoadingShimmer 2s linear infinite;
}

@keyframes fogLoadingShimmer {
    0% { background-position: 0 0; }
    100% { background-position: 40px 40px; }
}

/* Fog engine active state indicator */
canvas[id^="fog-canvas"][data-fog-active="true"] {
    box-shadow: inset 0 0 5px rgba(100, 110, 130, 0.2);
}