/**
 * Section Visual Effects
 * 
 * Provides gradient backgrounds, shadows, and backdrop blur effects
 * for page sections based on customizer settings.
 * 
 * Presets:
 * - None: No effects (default theme appearance)
 * - Subtle: Light shadows only
 * - Medium: Shadows + gradient overlays + subtle borders
 * - Bold: Full effects including backdrop blur
 * - Ultra: Maximum intensity effects with enhanced shadows, borders, and blur
 * 
 * Gradient Logic:
 * - Light backgrounds: Apply dark gradient (rgba(0,0,0,0.08-0.18))
 * - Dark backgrounds: Apply light gradient (rgba(255,255,255,0.08-0.18))
 * 
 * All gradients use 135deg diagonal direction.
 * No animations or hover effects included.
 */

/* ==========================================================================
   Base Effect Classes
   ========================================================================== */

/**
 * Enable effects container
 * All effect presets require this base class
 */
.section-effects-enabled {
    position: relative;
}

/* ==========================================================================
   Gradient Overlays
   ========================================================================== */

/**
 * Light background gradient
 * Applied when section background is light (brightness > 50%)
 * Creates subtle dark overlay from top-left to bottom-right
 */
.gradient-light::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/**
 * Dark background gradient
 * Applied when section background is dark (brightness <= 50%)
 * Creates subtle light overlay from top-left to bottom-right
 */
.gradient-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/**
 * Bold preset gradient overlay
 * Stronger gradient with additional radial glow effect
 */
.section-effects-bold::before {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.12) 0%, transparent 60%);
}

.section-effects-bold::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 2;
}

/* ==========================================================================
   Subtle Preset
   ========================================================================== */

/**
 * Subtle preset - Light shadows only
 * Minimal visual impact, good for performance
 */
.section-effects-subtle {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   Medium Preset
   ========================================================================== */

/**
 * Medium preset - Shadows + gradients + subtle borders
 * Balanced visual enhancement
 */
.section-effects-medium {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   Bold Preset
   ========================================================================== */

/**
 * Bold preset - Full effects
 * Includes backdrop blur, strong shadows, and accent borders
 */
.section-effects-bold {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
}

/* ==========================================================================
   Ultra Preset
   ========================================================================== */

/**
 * Ultra preset - Maximum intensity effects
 * Strongest shadows, gradients, borders, and enhanced backdrop blur
 * For bold visual statements
 */
.section-effects-ultra {
    box-shadow: 
        0 0 20px rgba(0, 0, 0, 0.2),
        0 12px 48px rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(12px);
}

.section-effects-ultra::before {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.18) 0%, transparent 50%);
}

.section-effects-ultra::after {
    background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.1) 0%, transparent 60%);
}

/* ==========================================================================
   Header Effects
   ========================================================================== */

/**
 * Header with effects enabled
 * Applies effects to header element when toggle is on
 */
.header-effects-enabled {
    position: relative;
}

/* Subtle header effects */
.header-effects-enabled.section-effects-subtle {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Medium header effects */
.header-effects-enabled.section-effects-medium {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Bold header effects */
.header-effects-enabled.section-effects-bold {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
}

/* Ultra header effects */
.header-effects-enabled.section-effects-ultra {
    box-shadow: 
        0 0 24px rgba(0, 0, 0, 0.22),
        0 8px 32px rgba(0, 0, 0, 0.18);
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(12px);
}

/* ==========================================================================
   Footer Effects
   ========================================================================== */

/**
 * Footer with effects enabled
 * Applies effects to footer element when toggle is on
 */
.footer-effects-enabled {
    position: relative;
}

/* Subtle footer effects */
.footer-effects-enabled.section-effects-subtle {
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

/* Medium footer effects */
.footer-effects-enabled.section-effects-medium {
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Bold footer effects */
.footer-effects-enabled.section-effects-bold {
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
}

/* Ultra footer effects */
.footer-effects-enabled.section-effects-ultra {
    box-shadow: 
        0 0 24px rgba(0, 0, 0, 0.22),
        0 -12px 48px rgba(0, 0, 0, 0.18);
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(12px);
}

/* ==========================================================================
   Mobile Optimizations
   ========================================================================== */

/**
 * Reduce backdrop filter on mobile for better performance
 * Backdrop filter can be expensive on mobile devices
 */
@media (max-width: 768px) {
    .section-effects-bold {
        backdrop-filter: blur(4px);
    }

    .section-effects-ultra {
        backdrop-filter: blur(8px);
        box-shadow: 
            0 0 12px rgba(0, 0, 0, 0.15),
            0 8px 24px rgba(0, 0, 0, 0.12);
        border-width: 1px;
    }

    .header-effects-enabled.section-effects-bold {
        backdrop-filter: blur(4px);
    }

    .header-effects-enabled.section-effects-ultra {
        backdrop-filter: blur(8px);
        box-shadow: 
            0 0 16px rgba(0, 0, 0, 0.18),
            0 6px 20px rgba(0, 0, 0, 0.14);
        border-bottom-width: 1px;
    }

    .footer-effects-enabled.section-effects-bold {
        backdrop-filter: blur(4px);
    }

    .footer-effects-enabled.section-effects-ultra {
        backdrop-filter: blur(8px);
        box-shadow: 
            0 0 16px rgba(0, 0, 0, 0.18),
            0 -8px 24px rgba(0, 0, 0, 0.12);
        border-top-width: 1px;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

/**
 * Disable all effects when printing
 * Saves ink and improves readability
 */
@media print {
    .section-effects-enabled::before,
    .section-effects-enabled::after,
    .section-effects-subtle,
    .section-effects-medium,
    .section-effects-bold,
    .header-effects-enabled,
    .footer-effects-enabled {
        box-shadow: none !important;
        border: none !important;
        backdrop-filter: none !important;
    }

    .section-effects-enabled::before,
    .section-effects-enabled::after {
        display: none !important;
    }
}