// ============================================================================
// move.gl | Effect Classes
// ============================================================================
// Copyright 2025 Scape Agency BV
// Licensed under MIT License
// ============================================================================

////
/// Effect Classes
/// ===========================================================================
///
/// This module provides ready-to-use CSS classes for visual effects
/// including filters, shadows, opacity, gradients, and backdrop effects.
/// All classes use corresponding mixins from the mixins/effects module.
///
/// @group Classes
/// @author Scape Agency
/// @link https://move.gl
/// @since 0.1.0 initial release
/// @access public
////


// ============================================================================
// Use
// ============================================================================

@use "../mixins/effects" as *;


// ============================================================================
// Filter Effect Classes
// ============================================================================

/// Blur filter
.filter--blur-sm { @include filter_blur(2px); }
.filter--blur { @include filter_blur(4px); }
.filter--blur-md { @include filter_blur(8px); }
.filter--blur-lg { @include filter_blur(16px); }
.filter--blur-xl { @include filter_blur(24px); }

/// Grayscale filter
.filter--grayscale { @include filter_grayscale(100%); }
.filter--grayscale-50 { @include filter_grayscale(50%); }
.filter--grayscale-0 { @include filter_grayscale(0%); }

/// Sepia filter
.filter--sepia { @include filter_sepia(100%); }
.filter--sepia-50 { @include filter_sepia(50%); }

/// Brightness filter
.filter--brightness-50 { @include filter_brightness(0.5); }
.filter--brightness-75 { @include filter_brightness(0.75); }
.filter--brightness-90 { @include filter_brightness(0.9); }
.filter--brightness-100 { @include filter_brightness(1); }
.filter--brightness-110 { @include filter_brightness(1.1); }
.filter--brightness-125 { @include filter_brightness(1.25); }
.filter--brightness-150 { @include filter_brightness(1.5); }

/// Contrast filter
.filter--contrast-50 { @include filter_contrast(0.5); }
.filter--contrast-75 { @include filter_contrast(0.75); }
.filter--contrast-100 { @include filter_contrast(1); }
.filter--contrast-125 { @include filter_contrast(1.25); }
.filter--contrast-150 { @include filter_contrast(1.5); }
.filter--contrast-200 { @include filter_contrast(2); }

/// Saturate filter
.filter--saturate-0 { @include filter_saturate(0); }
.filter--saturate-50 { @include filter_saturate(0.5); }
.filter--saturate-100 { @include filter_saturate(1); }
.filter--saturate-150 { @include filter_saturate(1.5); }
.filter--saturate-200 { @include filter_saturate(2); }

/// Hue rotate filter
.filter--hue-rotate-0 { @include filter_hue_rotate(0deg); }
.filter--hue-rotate-30 { @include filter_hue_rotate(30deg); }
.filter--hue-rotate-60 { @include filter_hue_rotate(60deg); }
.filter--hue-rotate-90 { @include filter_hue_rotate(90deg); }
.filter--hue-rotate-180 { @include filter_hue_rotate(180deg); }
.filter--hue-rotate-270 { @include filter_hue_rotate(270deg); }

/// Invert filter
.filter--invert { @include filter_invert(100%); }
.filter--invert-50 { @include filter_invert(50%); }
.filter--invert-0 { @include filter_invert(0%); }

/// Drop shadow filter
.filter--drop-shadow-sm { @include filter_drop_shadow(0, 1px, 1px, rgba(0, 0, 0, 0.05)); }
.filter--drop-shadow { @include filter_drop_shadow(0, 1px, 2px, rgba(0, 0, 0, 0.1)); }
.filter--drop-shadow-md { @include filter_drop_shadow(0, 4px, 3px, rgba(0, 0, 0, 0.07)); }
.filter--drop-shadow-lg { @include filter_drop_shadow(0, 10px, 8px, rgba(0, 0, 0, 0.04)); }
.filter--drop-shadow-xl { @include filter_drop_shadow(0, 20px, 13px, rgba(0, 0, 0, 0.03)); }
.filter--drop-shadow-none { @include filter_drop_shadow(0, 0, 0, transparent); }

/// Combined filter effects
.filter--noir { @include filter_preset_noir; }
.filter--vintage { @include filter_preset_vintage; }
.filter--cold { @include filter_preset_cold; }
.filter--warm { @include filter_preset_warm; }
.filter--dramatic { @include filter_preset_dramatic; }


// ============================================================================
// Backdrop Filter Classes
// ============================================================================

/// Backdrop blur
.backdrop--blur-sm { @include backdrop_blur(4px); }
.backdrop--blur { @include backdrop_blur(8px); }
.backdrop--blur-md { @include backdrop_blur(12px); }
.backdrop--blur-lg { @include backdrop_blur(16px); }
.backdrop--blur-xl { @include backdrop_blur(24px); }
.backdrop--blur-2xl { @include backdrop_blur(40px); }
.backdrop--blur-3xl { @include backdrop_blur(64px); }

/// Backdrop brightness
.backdrop--brightness-50 { @include backdrop_multi($brightness: 0.5); }
.backdrop--brightness-75 { @include backdrop_multi($brightness: 0.75); }
.backdrop--brightness-90 { @include backdrop_multi($brightness: 0.9); }
.backdrop--brightness-100 { @include backdrop_multi($brightness: 1); }
.backdrop--brightness-105 { @include backdrop_multi($brightness: 1.05); }
.backdrop--brightness-110 { @include backdrop_multi($brightness: 1.1); }
.backdrop--brightness-125 { @include backdrop_multi($brightness: 1.25); }
.backdrop--brightness-150 { @include backdrop_multi($brightness: 1.5); }

/// Backdrop contrast
.backdrop--contrast-50 { @include backdrop_multi($contrast: 0.5); }
.backdrop--contrast-75 { @include backdrop_multi($contrast: 0.75); }
.backdrop--contrast-100 { @include backdrop_multi($contrast: 1); }
.backdrop--contrast-125 { @include backdrop_multi($contrast: 1.25); }
.backdrop--contrast-150 { @include backdrop_multi($contrast: 1.5); }
.backdrop--contrast-200 { @include backdrop_multi($contrast: 2); }

/// Backdrop grayscale
.backdrop--grayscale-0 { @include backdrop_grayscale(0); }
.backdrop--grayscale { @include backdrop_grayscale(100%); }

/// Backdrop saturate
.backdrop--saturate-0 { @include backdrop_multi($saturate: 0); }
.backdrop--saturate-50 { @include backdrop_multi($saturate: 0.5); }
.backdrop--saturate-100 { @include backdrop_multi($saturate: 1); }
.backdrop--saturate-150 { @include backdrop_multi($saturate: 1.5); }
.backdrop--saturate-200 { @include backdrop_multi($saturate: 2); }

/// Backdrop sepia
.backdrop--sepia-0 { @include backdrop_multi($sepia: 0); }
.backdrop--sepia { @include backdrop_multi($sepia: 100%); }

/// Backdrop invert
.backdrop--invert-0 { @include backdrop_multi($invert: 0); }
.backdrop--invert { @include backdrop_multi($invert: 100%); }

/// Combined backdrop effects - frosted glass
.backdrop--glass { @include backdrop_glass(10px, 150%, 100%); }
.backdrop--glass-dark { @include backdrop_glass(10px, 100%, 80%); }


// ============================================================================
// Shadow Classes
// ============================================================================

/// Box shadows
.shadow--none { @include shadow_none; }
.shadow--sm { @include shadow_sm; }
.shadow { @include shadow_md; }
.shadow--md { @include shadow_md; }
.shadow--lg { @include shadow_lg; }
.shadow--xl { @include shadow_xl; }
.shadow--2xl { @include shadow_2xl; }
.shadow--inner { @include shadow_inner; }

/// Colored shadows
.shadow--primary { @include shadow_colored(#3b82f6, 0.4); }
.shadow--success { @include shadow_colored(#22c55e, 0.4); }
.shadow--danger { @include shadow_colored(#ef4444, 0.4); }
.shadow--warning { @include shadow_colored(#f59e0b, 0.4); }

/// Glow shadows
.shadow--glow { @include shadow_glow(#3b82f6, 0.5, 20px); }
.shadow--glow-sm { @include shadow_glow(#3b82f6, 0.3, 10px); }
.shadow--glow-lg { @include shadow_glow(#3b82f6, 0.6, 40px); }


// ============================================================================
// Opacity Classes
// ============================================================================

.opacity--0 { @include set_opacity(0, false); }
.opacity--5 { @include set_opacity(0.05, false); }
.opacity--10 { @include set_opacity(0.1, false); }
.opacity--20 { @include set_opacity(0.2, false); }
.opacity--25 { @include set_opacity(0.25, false); }
.opacity--30 { @include set_opacity(0.3, false); }
.opacity--40 { @include set_opacity(0.4, false); }
.opacity--50 { @include set_opacity(0.5, false); }
.opacity--60 { @include set_opacity(0.6, false); }
.opacity--70 { @include set_opacity(0.7, false); }
.opacity--75 { @include set_opacity(0.75, false); }
.opacity--80 { @include set_opacity(0.8, false); }
.opacity--90 { @include set_opacity(0.9, false); }
.opacity--95 { @include set_opacity(0.95, false); }
.opacity--100 { @include set_opacity(1, false); }


// ============================================================================
// Mix Blend Mode Classes
// ============================================================================

.blend--normal { @include blend_normal; }
.blend--multiply { @include blend_multiply; }
.blend--screen { @include blend_screen; }
.blend--overlay { @include blend_overlay; }
.blend--darken { @include blend_darken; }
.blend--lighten { @include blend_lighten; }
.blend--color-dodge { @include blend_color_dodge; }
.blend--color-burn { @include blend_color_burn; }
.blend--hard-light { @include blend_hard_light; }
.blend--soft-light { @include blend_soft_light; }
.blend--difference { @include blend_difference; }
.blend--exclusion { @include blend_exclusion; }
.blend--hue { @include blend_hue; }
.blend--saturation { @include blend_saturation; }
.blend--color { @include blend_color; }
.blend--luminosity { @include blend_luminosity; }


// ============================================================================
// Background Blend Mode Classes
// ============================================================================

.bg-blend--normal { @include bg_blend_normal; }
.bg-blend--multiply { @include bg_blend_multiply; }
.bg-blend--screen { @include bg_blend_screen; }
.bg-blend--overlay { @include bg_blend_overlay; }
.bg-blend--darken { @include bg_blend_darken; }
.bg-blend--lighten { @include bg_blend_lighten; }
.bg-blend--color-dodge { @include bg_blend_color_dodge; }
.bg-blend--color-burn { @include bg_blend_color_burn; }
.bg-blend--hard-light { @include bg_blend_hard_light; }
.bg-blend--soft-light { @include bg_blend_soft_light; }
.bg-blend--difference { @include bg_blend_difference; }
.bg-blend--exclusion { @include bg_blend_exclusion; }


// ============================================================================
// Gradient Classes
// ============================================================================

/// Linear gradients
.gradient--to-r { @include gradient_to_r; }
.gradient--to-l { @include gradient_to_l; }
.gradient--to-t { @include gradient_to_t; }
.gradient--to-b { @include gradient_to_b; }
.gradient--to-tr { @include gradient_to_tr; }
.gradient--to-tl { @include gradient_to_tl; }
.gradient--to-br { @include gradient_to_br; }
.gradient--to-bl { @include gradient_to_bl; }

/// Radial gradients
.gradient--radial { @include gradient_radial; }
.gradient--radial-at-t { @include gradient_radial_at_t; }
.gradient--radial-at-b { @include gradient_radial_at_b; }
.gradient--radial-at-l { @include gradient_radial_at_l; }
.gradient--radial-at-r { @include gradient_radial_at_r; }

/// Conic gradients
.gradient--conic { @include gradient_conic; }


// ============================================================================
// Mask Classes
// ============================================================================

/// Gradient masks for fade effects
.mask--fade-b { @include mask_fade_b; }
.mask--fade-t { @include mask_fade_t; }
.mask--fade-l { @include mask_fade_l; }
.mask--fade-r { @include mask_fade_r; }

/// Radial mask
.mask--radial { @include mask_radial; }