/* ========================================
   Smoke Effect Canvas Styles
   ======================================== */

.smoke-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.6;
    transition: opacity var(--transition-normal);
}

/* Prevent smoke from interfering with content */
body {
    position: relative;
    z-index: 1;
}

/* Smoke intensity adjustment for different sections */
.hero-section {
    position: relative;
}

/* Performance optimization for mobile */
@media (max-width: 768px) {
    .smoke-background {
        opacity: 0.3;
    }
}

/* Reduced motion - disable smoke effect */
@media (prefers-reduced-motion: reduce) {
    .smoke-background {
        display: none;
    }
}

/* Loading state */
.smoke-background.loading {
    opacity: 0;
}

.smoke-background.loaded {
    opacity: 0.6;
}

/* Theme-specific adjustments */
[data-theme="dark"] .smoke-background {
    opacity: 0.6;
    mix-blend-mode: screen;
}

[data-theme="light"] .smoke-background {
    opacity: 0.3;
    mix-blend-mode: multiply;
    filter: invert(1);
}

/* High contrast mode - hide smoke */
@media (prefers-contrast: high) {
    .smoke-background {
        display: none;
    }
}