domma-js 0.3.1-alpha → 0.5.0-alpha

package/public/dist/domma.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Core CSS v0.3.0-alpha.0
+ * Domma Core CSS v0.5.0-alpha
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-01-02T14:32:25.385Z
- * Commit: bc8e519
+ * Built: 2026-01-06T00:30:49.167Z
+ * Commit: 72b7845
  */
 
 /**
@@ -265,6 +265,44 @@
     --dm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
     --dm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
 
+    /* Glow effects - STRONG AND VIBRANT */
+    --dm-glow-sm: 0 0 15px rgba(59, 130, 246, 0.8),
+    0 0 30px rgba(59, 130, 246, 0.6);
+    --dm-glow: 0 0 20px rgba(59, 130, 246, 0.9),
+    0 0 40px rgba(59, 130, 246, 0.7),
+    0 0 60px rgba(59, 130, 246, 0.5);
+    --dm-glow-md: 0 0 25px rgba(59, 130, 246, 1),
+    0 0 50px rgba(59, 130, 246, 0.8),
+    0 0 75px rgba(59, 130, 246, 0.6);
+    --dm-glow-lg: 0 0 30px rgba(59, 130, 246, 1),
+    0 0 60px rgba(59, 130, 246, 0.9),
+    0 0 90px rgba(59, 130, 246, 0.7),
+    0 0 120px rgba(59, 130, 246, 0.5);
+    --dm-glow-xl: 0 0 40px rgba(59, 130, 246, 1),
+    0 0 80px rgba(59, 130, 246, 0.9),
+    0 0 120px rgba(59, 130, 246, 0.7),
+    0 0 160px rgba(59, 130, 246, 0.5);
+
+    /* Colour-specific glows - INTENSE */
+    --dm-glow-primary: 0 0 20px rgba(59, 130, 246, 1),
+    0 0 40px rgba(59, 130, 246, 0.8),
+    0 0 60px rgba(59, 130, 246, 0.6);
+    --dm-glow-secondary: 0 0 20px rgba(139, 92, 246, 1),
+    0 0 40px rgba(139, 92, 246, 0.8),
+    0 0 60px rgba(139, 92, 246, 0.6);
+    --dm-glow-success: 0 0 20px rgba(34, 197, 94, 1),
+    0 0 40px rgba(34, 197, 94, 0.8),
+    0 0 60px rgba(34, 197, 94, 0.6);
+    --dm-glow-warning: 0 0 20px rgba(245, 158, 11, 1),
+    0 0 40px rgba(245, 158, 11, 0.8),
+    0 0 60px rgba(245, 158, 11, 0.6);
+    --dm-glow-danger: 0 0 20px rgba(239, 68, 68, 1),
+    0 0 40px rgba(239, 68, 68, 0.8),
+    0 0 60px rgba(239, 68, 68, 0.6);
+    --dm-glow-info: 0 0 20px rgba(14, 165, 233, 1),
+    0 0 40px rgba(14, 165, 233, 0.8),
+    0 0 60px rgba(14, 165, 233, 0.6);
+
     /* ================================================
        TRANSPARENCY & OPACITY
        ================================================ */
@@ -1476,6 +1514,505 @@ code, pre {
     transition: text-shadow 0.3s ease;
 }
 
+.glow-secondary-hover:hover {
+    text-shadow: var(--dm-glow-secondary);
+    transition: text-shadow 0.3s ease;
+}
+
+.glow-info-hover:hover {
+    text-shadow: var(--dm-glow-info);
+    transition: text-shadow 0.3s ease;
+}
+
+/* ============================================
+   FIREWORKS EFFECTS
+   Realistic particle-based fireworks animations
+   ============================================ */
+
+/* Firework CSS Variables */
+:root {
+    --dm-fw-launch-height: 200px;
+    --dm-fw-explosion-size: 150px;
+    --dm-fw-particle-size: 2px;
+    --dm-fw-duration: 3s;
+    --dm-fw-delay: 0s;
+
+    /* Default firework colours - bright, vibrant colours */
+    --dm-fw-color-1: #ffeb3b; /* Bright Yellow */
+    --dm-fw-color-2: #ff4444; /* Bright Red */
+    --dm-fw-color-3: #44ffdd; /* Cyan */
+    --dm-fw-color-4: #4488ff; /* Bright Blue */
+    --dm-fw-color-5: #ff8844; /* Orange */
+    --dm-fw-color-6: #ff44ff; /* Magenta */
+    --dm-fw-color-7: #44ff88; /* Lime */
+    --dm-fw-color-8: #ffff88; /* Light Yellow */
+}
+
+/* Base firework container */
+.firework {
+    position: relative;
+    display: inline-block;
+    pointer-events: none;
+    width: var(--dm-fw-explosion-size);
+    height: calc(var(--dm-fw-launch-height) + var(--dm-fw-explosion-size));
+    overflow: visible;
+}
+
+/* Rocket trail that launches upward */
+.firework-launch {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 3px;
+    height: 8px;
+    background: linear-gradient(to top, transparent, #ffa500, #fff);
+    transform: translateX(-50%);
+    animation: dm-fw-launch 1s ease-out forwards;
+}
+
+.firework-launch::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    width: 2px;
+    height: 20px;
+    background: linear-gradient(to top, transparent, rgba(255, 165, 0, 0.3));
+    transform: translateX(-50%);
+    filter: blur(2px);
+}
+
+/* Explosion particles */
+.firework-particles {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: var(--dm-fw-explosion-size);
+    height: var(--dm-fw-explosion-size);
+    transform: translateX(-50%);
+    opacity: 0;
+    animation-delay: 1s; /* Wait for launch */
+}
+
+/* Main burst - creates many particles using box-shadow */
+.firework-burst .firework-particles::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: var(--dm-fw-particle-size);
+    height: var(--dm-fw-particle-size);
+    background: var(--dm-fw-color-1);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    animation: dm-fw-explode 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+    box-shadow: /* Ring 1 - 8 particles at 30° intervals */ 0 0 3px var(--dm-fw-color-1),
+    0 -20px 0 0 var(--dm-fw-color-1),
+    14px -14px 0 0 var(--dm-fw-color-2),
+    20px 0 0 0 var(--dm-fw-color-3),
+    14px 14px 0 0 var(--dm-fw-color-4),
+    0 20px 0 0 var(--dm-fw-color-5),
+    -14px 14px 0 0 var(--dm-fw-color-6),
+    -20px 0 0 0 var(--dm-fw-color-7),
+    -14px -14px 0 0 var(--dm-fw-color-8),
+        /* Ring 2 - 12 particles */ 0 -35px 0 0 var(--dm-fw-color-2),
+    17px -30px 0 0 var(--dm-fw-color-3),
+    30px -17px 0 0 var(--dm-fw-color-4),
+    35px 0 0 0 var(--dm-fw-color-5),
+    30px 17px 0 0 var(--dm-fw-color-6),
+    17px 30px 0 0 var(--dm-fw-color-7),
+    0 35px 0 0 var(--dm-fw-color-8),
+    -17px 30px 0 0 var(--dm-fw-color-1),
+    -30px 17px 0 0 var(--dm-fw-color-2),
+    -35px 0 0 0 var(--dm-fw-color-3),
+    -30px -17px 0 0 var(--dm-fw-color-4),
+    -17px -30px 0 0 var(--dm-fw-color-5),
+        /* Ring 3 - 16 particles */ 0 -50px 0 0 var(--dm-fw-color-6),
+    19px -46px 0 0 var(--dm-fw-color-7),
+    35px -35px 0 0 var(--dm-fw-color-8),
+    46px -19px 0 0 var(--dm-fw-color-1),
+    50px 0 0 0 var(--dm-fw-color-2),
+    46px 19px 0 0 var(--dm-fw-color-3),
+    35px 35px 0 0 var(--dm-fw-color-4),
+    19px 46px 0 0 var(--dm-fw-color-5),
+    0 50px 0 0 var(--dm-fw-color-6),
+    -19px 46px 0 0 var(--dm-fw-color-7),
+    -35px 35px 0 0 var(--dm-fw-color-8),
+    -46px 19px 0 0 var(--dm-fw-color-1),
+    -50px 0 0 0 var(--dm-fw-color-2),
+    -46px -19px 0 0 var(--dm-fw-color-3),
+    -35px -35px 0 0 var(--dm-fw-color-4),
+    -19px -46px 0 0 var(--dm-fw-color-5);
+}
+
+/* Secondary layer for more particles and trailing effect */
+.firework-burst .firework-particles::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: calc(var(--dm-fw-particle-size) * 0.8);
+    height: calc(var(--dm-fw-particle-size) * 0.8);
+    background: var(--dm-fw-color-3);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    animation: dm-fw-explode-secondary 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+    box-shadow: /* Offset particles for depth */ 0 0 2px var(--dm-fw-color-3),
+    10px -25px 0 0 var(--dm-fw-color-4),
+    25px -10px 0 0 var(--dm-fw-color-5),
+    25px 10px 0 0 var(--dm-fw-color-6),
+    10px 25px 0 0 var(--dm-fw-color-7),
+    -10px 25px 0 0 var(--dm-fw-color-8),
+    -25px 10px 0 0 var(--dm-fw-color-1),
+    -25px -10px 0 0 var(--dm-fw-color-2),
+    -10px -25px 0 0 var(--dm-fw-color-3),
+        /* Extra sparkles */ 8px -42px 0 0 var(--dm-fw-color-4),
+    42px -8px 0 0 var(--dm-fw-color-5),
+    42px 8px 0 0 var(--dm-fw-color-6),
+    8px 42px 0 0 var(--dm-fw-color-7),
+    -8px 42px 0 0 var(--dm-fw-color-8),
+    -42px 8px 0 0 var(--dm-fw-color-1),
+    -42px -8px 0 0 var(--dm-fw-color-2),
+    -8px -42px 0 0 var(--dm-fw-color-3);
+}
+
+/* Sparkle animation - twinkling particles */
+.firework-sparkle::before {
+    width: 2px;
+    height: 2px;
+    background: white;
+    box-shadow: /* Create sparkle pattern */ 0 0 3px 1px rgba(255, 255, 255, 0.8),
+    10px -10px 0 0 var(--dm-fw-color-1),
+    10px -10px 3px 1px var(--dm-fw-color-1),
+    -10px -10px 0 0 var(--dm-fw-color-2),
+    -10px -10px 3px 1px var(--dm-fw-color-2),
+    -10px 10px 0 0 var(--dm-fw-color-3),
+    -10px 10px 3px 1px var(--dm-fw-color-3),
+    10px 10px 0 0 var(--dm-fw-color-4),
+    10px 10px 3px 1px var(--dm-fw-color-4),
+    20px 0 0 0 var(--dm-fw-color-5),
+    20px 0 3px 1px var(--dm-fw-color-5),
+    -20px 0 0 0 var(--dm-fw-color-6),
+    -20px 0 3px 1px var(--dm-fw-color-6),
+    0 20px 0 0 var(--dm-fw-color-7),
+    0 20px 3px 1px var(--dm-fw-color-7),
+    0 -20px 0 0 var(--dm-fw-color-8),
+    0 -20px 3px 1px var(--dm-fw-color-8);
+    animation: dm-firework-sparkle var(--dm-fw-duration) ease-out forwards;
+    animation-delay: var(--dm-fw-delay);
+    opacity: 0;
+}
+
+.firework-sparkle::after {
+    width: 2px;
+    height: 2px;
+    background: white;
+    box-shadow: /* Secondary sparkle layer */ 15px -15px 0 0 var(--dm-fw-color-1),
+    15px -15px 4px 2px rgba(255, 235, 59, 0.5),
+    -15px -15px 0 0 var(--dm-fw-color-3),
+    -15px -15px 4px 2px rgba(78, 205, 196, 0.5),
+    -15px 15px 0 0 var(--dm-fw-color-5),
+    -15px 15px 4px 2px rgba(243, 156, 18, 0.5),
+    15px 15px 0 0 var(--dm-fw-color-7),
+    15px 15px 4px 2px rgba(253, 121, 168, 0.5);
+    animation: dm-firework-sparkle-alt var(--dm-fw-duration) ease-out forwards;
+    animation-delay: calc(var(--dm-fw-delay) + 0.2s);
+    opacity: 0;
+}
+
+/* Trail animation - launch and falling particles */
+.firework-trail::before {
+    width: 3px;
+    height: 3px;
+    background: var(--dm-fw-color-1);
+    box-shadow: 0 0 10px 2px var(--dm-fw-color-1),
+    0 5px 2px 0 rgba(255, 235, 59, 0.8),
+    0 10px 2px 0 rgba(255, 235, 59, 0.6),
+    0 15px 2px 0 rgba(255, 235, 59, 0.4),
+    0 20px 2px 0 rgba(255, 235, 59, 0.2);
+    animation: dm-firework-launch var(--dm-fw-duration) ease-out forwards;
+    animation-delay: var(--dm-fw-delay);
+}
+
+/* Size variants */
+.firework-sm::before,
+.firework-sm::after {
+    width: var(--dm-fw-size-sm);
+    height: var(--dm-fw-size-sm);
+}
+
+.firework-md::before,
+.firework-md::after {
+    width: var(--dm-fw-size-md);
+    height: var(--dm-fw-size-md);
+}
+
+.firework-lg::before,
+.firework-lg::after {
+    width: var(--dm-fw-size-lg);
+    height: var(--dm-fw-size-lg);
+}
+
+.firework-xl::before,
+.firework-xl::after {
+    width: var(--dm-fw-size-xl);
+    height: var(--dm-fw-size-xl);
+}
+
+/* Colour variants */
+.firework-primary {
+    --dm-fw-color-1: var(--dm-primary);
+    --dm-fw-color-2: var(--dm-primary-light);
+    --dm-fw-color-3: var(--dm-primary-dark);
+    --dm-fw-color-4: var(--dm-primary);
+    --dm-fw-color-5: var(--dm-primary);
+    --dm-fw-color-6: var(--dm-primary-light);
+    --dm-fw-color-7: var(--dm-primary-dark);
+    --dm-fw-color-8: var(--dm-primary);
+}
+
+.firework-secondary {
+    --dm-fw-color-1: var(--dm-secondary);
+    --dm-fw-color-2: var(--dm-secondary-light);
+    --dm-fw-color-3: var(--dm-secondary-dark);
+    --dm-fw-color-4: var(--dm-secondary);
+    --dm-fw-color-5: var(--dm-secondary);
+    --dm-fw-color-6: var(--dm-secondary-light);
+    --dm-fw-color-7: var(--dm-secondary-dark);
+    --dm-fw-color-8: var(--dm-secondary);
+}
+
+.firework-success {
+    --dm-fw-color-1: var(--dm-success);
+    --dm-fw-color-2: var(--dm-success-light);
+    --dm-fw-color-3: var(--dm-success-dark);
+    --dm-fw-color-4: var(--dm-success);
+    --dm-fw-color-5: var(--dm-success);
+    --dm-fw-color-6: var(--dm-success-light);
+    --dm-fw-color-7: var(--dm-success-dark);
+    --dm-fw-color-8: var(--dm-success);
+}
+
+.firework-warning {
+    --dm-fw-color-1: var(--dm-warning);
+    --dm-fw-color-2: var(--dm-warning-light);
+    --dm-fw-color-3: var(--dm-warning-dark);
+    --dm-fw-color-4: var(--dm-warning);
+    --dm-fw-color-5: var(--dm-warning);
+    --dm-fw-color-6: var(--dm-warning-light);
+    --dm-fw-color-7: var(--dm-warning-dark);
+    --dm-fw-color-8: var(--dm-warning);
+}
+
+.firework-danger {
+    --dm-fw-color-1: var(--dm-danger);
+    --dm-fw-color-2: var(--dm-danger-light);
+    --dm-fw-color-3: var(--dm-danger-dark);
+    --dm-fw-color-4: var(--dm-danger);
+    --dm-fw-color-5: var(--dm-danger);
+    --dm-fw-color-6: var(--dm-danger-light);
+    --dm-fw-color-7: var(--dm-danger-dark);
+    --dm-fw-color-8: var(--dm-danger);
+}
+
+.firework-info {
+    --dm-fw-color-1: var(--dm-info);
+    --dm-fw-color-2: var(--dm-info-light);
+    --dm-fw-color-3: var(--dm-info-dark);
+    --dm-fw-color-4: var(--dm-info);
+    --dm-fw-color-5: var(--dm-info);
+    --dm-fw-color-6: var(--dm-info-light);
+    --dm-fw-color-7: var(--dm-info-dark);
+    --dm-fw-color-8: var(--dm-info);
+}
+
+.firework-rainbow {
+    --dm-fw-color-1: #ff0000;
+    --dm-fw-color-2: #ff7f00;
+    --dm-fw-color-3: #ffff00;
+    --dm-fw-color-4: #00ff00;
+    --dm-fw-color-5: #0000ff;
+    --dm-fw-color-6: #4b0082;
+    --dm-fw-color-7: #9400d3;
+    --dm-fw-color-8: #ff1493;
+}
+
+/* Continuous animation */
+.firework-continuous::before,
+.firework-continuous::after {
+    animation-iteration-count: infinite;
+}
+
+/* Trigger on hover */
+.firework-on-hover {
+    position: relative;
+}
+
+.firework-on-hover::before,
+.firework-on-hover::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: var(--dm-fw-size);
+    height: var(--dm-fw-size);
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    pointer-events: none;
+}
+
+.firework-on-hover:hover::before {
+    background: var(--dm-fw-color-1);
+    box-shadow: /* Inner ring - 8 particles */ 0 -30px 0 1px var(--dm-fw-color-1),
+    21px -21px 0 1px var(--dm-fw-color-2),
+    30px 0 0 1px var(--dm-fw-color-3),
+    21px 21px 0 1px var(--dm-fw-color-4),
+    0 30px 0 1px var(--dm-fw-color-5),
+    -21px 21px 0 1px var(--dm-fw-color-6),
+    -30px 0 0 1px var(--dm-fw-color-7),
+    -21px -21px 0 1px var(--dm-fw-color-8),
+        /* Outer ring */ 0 -50px 0 0 var(--dm-fw-color-2),
+    35px -35px 0 0 var(--dm-fw-color-3),
+    50px 0 0 0 var(--dm-fw-color-4),
+    35px 35px 0 0 var(--dm-fw-color-5),
+    0 50px 0 0 var(--dm-fw-color-6),
+    -35px 35px 0 0 var(--dm-fw-color-7),
+    -50px 0 0 0 var(--dm-fw-color-8),
+    -35px -35px 0 0 var(--dm-fw-color-1);
+    animation: dm-firework-burst 1.5s ease-out forwards;
+}
+
+.firework-on-hover:hover::after {
+    background: var(--dm-fw-color-3);
+    box-shadow: 15px -40px 0 0 var(--dm-fw-color-1),
+    40px -15px 0 0 var(--dm-fw-color-3),
+    40px 15px 0 0 var(--dm-fw-color-5),
+    15px 40px 0 0 var(--dm-fw-color-7),
+    -15px 40px 0 0 var(--dm-fw-color-2),
+    -40px 15px 0 0 var(--dm-fw-color-4),
+    -40px -15px 0 0 var(--dm-fw-color-6),
+    -15px -40px 0 0 var(--dm-fw-color-8);
+    animation: dm-firework-burst-secondary 1.5s ease-out forwards;
+}
+
+/* Keyframe Animations */
+
+/* Launch animation - rocket goes up */
+@keyframes dm-fw-launch {
+    0% {
+        transform: translateX(-50%) translateY(0);
+        opacity: 1;
+    }
+    100% {
+        transform: translateX(-50%) translateY(calc(-1 * var(--dm-fw-launch-height)));
+        opacity: 0;
+    }
+}
+
+/* Main explosion - particles burst outward then fall with gravity */
+@keyframes dm-fw-explode {
+    0% {
+        transform: translate(-50%, -50%) scale(0);
+        opacity: 0;
+    }
+    5% {
+        transform: translate(-50%, -50%) scale(0.1);
+        opacity: 1;
+    }
+    25% {
+        transform: translate(-50%, -50%) scale(2.5);
+        opacity: 1;
+    }
+    50% {
+        transform: translate(-50%, -50%) scale(3.5) translateY(10px);
+        opacity: 0.9;
+    }
+    75% {
+        transform: translate(-50%, -50%) scale(4) translateY(40px);
+        opacity: 0.6;
+    }
+    100% {
+        transform: translate(-50%, -50%) scale(4.5) translateY(100px);
+        opacity: 0;
+    }
+}
+
+/* Secondary explosion with slight delay and rotation */
+@keyframes dm-fw-explode-secondary {
+    0% {
+        transform: translate(-50%, -50%) scale(0) rotate(0deg);
+        opacity: 0;
+    }
+    10% {
+        transform: translate(-50%, -50%) scale(0.2) rotate(45deg);
+        opacity: 1;
+    }
+    30% {
+        transform: translate(-50%, -50%) scale(2.2) rotate(90deg);
+        opacity: 1;
+    }
+    55% {
+        transform: translate(-50%, -50%) scale(3.2) rotate(135deg) translateY(15px);
+        opacity: 0.8;
+    }
+    80% {
+        transform: translate(-50%, -50%) scale(3.8) rotate(180deg) translateY(50px);
+        opacity: 0.5;
+    }
+    100% {
+        transform: translate(-50%, -50%) scale(4.2) rotate(225deg) translateY(120px);
+        opacity: 0;
+    }
+}
+
+/* Sparkle animation for twinkling effect */
+@keyframes dm-fw-sparkle {
+    0%, 100% {
+        transform: translate(-50%, -50%) scale(1);
+        opacity: 0;
+    }
+    10% {
+        transform: translate(-50%, -50%) scale(0.5);
+        opacity: 1;
+    }
+    50% {
+        transform: translate(-50%, -50%) scale(1.5);
+        opacity: 1;
+    }
+    90% {
+        transform: translate(-50%, -50%) scale(2) translateY(30px);
+        opacity: 0;
+    }
+}
+
+/* Crackle effect - small rapid sparkles */
+@keyframes dm-fw-crackle {
+    0%, 100% {
+        opacity: 0;
+    }
+    25%, 75% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+
+/* Multiple fireworks container */
+.fireworks-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 9999;
+}
+
+.fireworks-container .firework {
+    position: absolute;
+}
+
 /* ============================================
    SIZE UTILITIES
    ============================================ */
@@ -1815,6 +2352,43 @@ code, pre {
     color: var(--dm-warning);
 }
 
+/* Validation State Container Classes */
+.has-success .form-input,
+.has-success .form-select,
+.has-success .form-textarea {
+    border-color: var(--dm-success);
+}
+
+.has-success .form-input:focus,
+.has-success .form-select:focus,
+.has-success .form-textarea:focus {
+    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
+}
+
+.has-error .form-input,
+.has-error .form-select,
+.has-error .form-textarea {
+    border-color: var(--dm-danger);
+}
+
+.has-error .form-input:focus,
+.has-error .form-select:focus,
+.has-error .form-textarea:focus {
+    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
+}
+
+.has-warning .form-input,
+.has-warning .form-select,
+.has-warning .form-textarea {
+    border-color: var(--dm-warning);
+}
+
+.has-warning .form-input:focus,
+.has-warning .form-select:focus,
+.has-warning .form-textarea:focus {
+    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
+}
+
 /* Input Sizes */
 .form-input-sm,
 .form-select-sm,
@@ -2193,6 +2767,63 @@ code, pre {
     cursor: pointer;
 }
 
+/* Form Sections */
+.domma-form-section {
+    border: 1px solid var(--dm-border, var(--dm-gray-200));
+    border-radius: var(--dm-radius-lg);
+    padding: var(--dm-space-6);
+    margin-bottom: var(--dm-space-6);
+    background-color: var(--dm-surface, var(--dm-white));
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    transition: box-shadow 0.15s ease;
+}
+
+.domma-form-section:hover {
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.domma-form-section-title {
+    font-size: var(--dm-font-size-lg);
+    font-weight: var(--dm-font-weight-semibold);
+    color: var(--dm-primary);
+    margin: 0 0 var(--dm-space-4) 0;
+    padding: 0 var(--dm-space-4);
+    border-bottom: 2px solid var(--dm-primary);
+    display: inline-block;
+    background-color: var(--dm-surface, var(--dm-white));
+    position: relative;
+    top: calc(-1 * var(--dm-space-6) - 1px);
+    left: 0;
+    border-radius: var(--dm-radius-md) var(--dm-radius-md) 0 0;
+}
+
+.domma-form-section-content {
+    margin-top: calc(-1 * var(--dm-space-2));
+}
+
+/* Dark theme adjustments */
+.dm-theme-dark .domma-form-section {
+    background-color: var(--dm-gray-800);
+    border-color: var(--dm-gray-700);
+}
+
+.dm-theme-dark .domma-form-section-title {
+    background-color: var(--dm-gray-800);
+    color: var(--dm-primary-light, var(--dm-blue-400));
+    border-color: var(--dm-primary-light, var(--dm-blue-400));
+}
+
+/* Compact form sections */
+.domma-form-section.compact {
+    padding: var(--dm-space-4);
+    margin-bottom: var(--dm-space-4);
+}
+
+.domma-form-section.compact .domma-form-section-title {
+    font-size: var(--dm-font-size-base);
+    top: calc(-1 * var(--dm-space-4) - 1px);
+}
+
 /* ============================================
    COMPONENT: Badge
    ============================================ */
@@ -2406,11 +3037,950 @@ code, pre {
     --dm-glow-md: 0 0 20px rgba(255, 255, 255, 0.6);
     --dm-glow-lg: 0 0 30px rgba(255, 255, 255, 0.7);
     --dm-glow-xl: 0 0 40px rgba(255, 255, 255, 0.8);
-    
+
     --dm-glow-primary: 0 0 20px rgba(59, 130, 246, 0.6);
     --dm-glow-secondary: 0 0 20px rgba(139, 92, 246, 0.6);
     --dm-glow-success: 0 0 20px rgba(34, 197, 94, 0.6);
     --dm-glow-warning: 0 0 20px rgba(245, 158, 11, 0.6);
     --dm-glow-danger: 0 0 20px rgba(239, 68, 68, 0.6);
     --dm-glow-info: 0 0 20px rgba(14, 165, 233, 0.6);
+
+    /* ================================================
+       ANIMATION VARIABLES
+       ================================================ */
+    --dm-animate-duration: 1s;
+    --dm-animate-delay: 0s;
+    --dm-animate-timing: ease;
+}
+
+/* ============================================
+   ANIMATION UTILITIES
+   ============================================ */
+
+/* Animation Keyframes */
+
+@keyframes dm-fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes dm-fade-out {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes dm-fade-in-up {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes dm-fade-in-down {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes dm-fade-in-left {
+    from {
+        opacity: 0;
+        transform: translateX(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes dm-fade-in-right {
+    from {
+        opacity: 0;
+        transform: translateX(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes dm-slide-in-up {
+    from {
+        transform: translateY(100%);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes dm-slide-in-down {
+    from {
+        transform: translateY(-100%);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes dm-slide-in-left {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes dm-slide-in-right {
+    from {
+        transform: translateX(100%);
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes dm-zoom-in {
+    from {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes dm-zoom-out {
+    from {
+        opacity: 1;
+        transform: scale(1);
+    }
+    to {
+        opacity: 0;
+        transform: scale(0.8);
+    }
+}
+
+@keyframes dm-bounce {
+    0%, 20%, 50%, 80%, 100% {
+        transform: translateY(0);
+    }
+    40% {
+        transform: translateY(-20px);
+    }
+    60% {
+        transform: translateY(-10px);
+    }
+}
+
+@keyframes dm-pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+
+@keyframes dm-shake {
+    0%, 100% {
+        transform: translateX(0);
+    }
+    10%, 30%, 50%, 70%, 90% {
+        transform: translateX(-5px);
+    }
+    20%, 40%, 60%, 80% {
+        transform: translateX(5px);
+    }
+}
+
+@keyframes dm-spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes dm-rotate-in {
+    from {
+        opacity: 0;
+        transform: rotate(-180deg) scale(0.8);
+    }
+    to {
+        opacity: 1;
+        transform: rotate(0) scale(1);
+    }
+}
+
+@keyframes dm-flip {
+    from {
+        transform: perspective(400px) rotateY(90deg);
+        opacity: 0;
+    }
+    to {
+        transform: perspective(400px) rotateY(0);
+        opacity: 1;
+    }
+}
+
+/* Animation Classes */
+
+.animate-fade-in {
+    animation-name: dm-fade-in;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-fade-out {
+    animation-name: dm-fade-out;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-fade-in-up {
+    animation-name: dm-fade-in-up;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-fade-in-down {
+    animation-name: dm-fade-in-down;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-fade-in-left {
+    animation-name: dm-fade-in-left;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-fade-in-right {
+    animation-name: dm-fade-in-right;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-slide-in-up {
+    animation-name: dm-slide-in-up;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-slide-in-down {
+    animation-name: dm-slide-in-down;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-slide-in-left {
+    animation-name: dm-slide-in-left;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-slide-in-right {
+    animation-name: dm-slide-in-right;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-zoom-in {
+    animation-name: dm-zoom-in;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-zoom-out {
+    animation-name: dm-zoom-out;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-bounce {
+    animation-name: dm-bounce;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-pulse {
+    animation-name: dm-pulse;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-shake {
+    animation-name: dm-shake;
+    animation-duration: 0.5s;
+    animation-timing-function: ease;
+    animation-fill-mode: both;
+}
+
+.animate-spin {
+    animation-name: dm-spin;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: linear;
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-rotate-in {
+    animation-name: dm-rotate-in;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+.animate-flip {
+    animation-name: dm-flip;
+    animation-duration: var(--dm-animate-duration, 1s);
+    animation-timing-function: var(--dm-animate-timing, ease);
+    animation-delay: var(--dm-animate-delay, 0s);
+    animation-fill-mode: both;
+}
+
+/* Animation Control Classes */
+
+.animate-infinite {
+    animation-iteration-count: infinite;
+}
+
+.animate-once {
+    animation-iteration-count: 1;
+}
+
+.animate-repeat-2 {
+    animation-iteration-count: 2;
+}
+
+.animate-repeat-3 {
+    animation-iteration-count: 3;
+}
+
+/* Animation Durations */
+
+.animate-duration-fast {
+    --dm-animate-duration: 0.3s;
+}
+
+.animate-duration-normal {
+    --dm-animate-duration: 0.6s;
+}
+
+.animate-duration-slow {
+    --dm-animate-duration: 1s;
+}
+
+.animate-duration-slower {
+    --dm-animate-duration: 2s;
+}
+
+/* Animation Delays */
+
+.animate-delay-100 {
+    --dm-animate-delay: 0.1s;
+}
+
+.animate-delay-200 {
+    --dm-animate-delay: 0.2s;
+}
+
+.animate-delay-300 {
+    --dm-animate-delay: 0.3s;
+}
+
+.animate-delay-500 {
+    --dm-animate-delay: 0.5s;
+}
+
+.animate-delay-1000 {
+    --dm-animate-delay: 1s;
+}
+
+/* Hover Animations */
+
+.animate-fade-in-hover:hover {
+    animation-name: dm-fade-in;
+    animation-duration: 0.3s;
+    animation-timing-function: ease;
+    animation-fill-mode: both;
+}
+
+.animate-bounce-hover:hover {
+    animation-name: dm-bounce;
+    animation-duration: 0.6s;
+    animation-timing-function: ease;
+    animation-fill-mode: both;
+}
+
+.animate-pulse-hover:hover {
+    animation-name: dm-pulse;
+    animation-duration: 1s;
+    animation-timing-function: ease;
+    animation-fill-mode: both;
+}
+
+.animate-shake-hover:hover {
+    animation-name: dm-shake;
+    animation-duration: 0.5s;
+    animation-timing-function: ease;
+    animation-fill-mode: both;
+}
+
+.animate-spin-hover:hover {
+    animation-name: dm-spin;
+    animation-duration: 1s;
+    animation-timing-function: linear;
+    animation-fill-mode: both;
+}
+
+/* ============================================
+   GRADIENT UTILITIES
+   ============================================ */
+
+/* Background Gradients */
+
+.bg-gradient-primary {
+    background: linear-gradient(135deg, var(--dm-primary) 0%, var(--dm-primary-dark) 100%);
+}
+
+.bg-gradient-secondary {
+    background: linear-gradient(135deg, var(--dm-secondary) 0%, var(--dm-secondary-dark) 100%);
+}
+
+.bg-gradient-success {
+    background: linear-gradient(135deg, var(--dm-success) 0%, var(--dm-success-dark) 100%);
+}
+
+.bg-gradient-danger {
+    background: linear-gradient(135deg, var(--dm-danger) 0%, var(--dm-danger-dark) 100%);
+}
+
+.bg-gradient-warning {
+    background: linear-gradient(135deg, var(--dm-warning) 0%, var(--dm-warning-dark) 100%);
+}
+
+.bg-gradient-info {
+    background: linear-gradient(135deg, var(--dm-info) 0%, var(--dm-info-dark) 100%);
+}
+
+/* Directional Gradients */
+
+.bg-gradient-to-t {
+    background: linear-gradient(to top, var(--dm-gradient-from, transparent), var(--dm-gradient-to, transparent));
+}
+
+.bg-gradient-to-tr {
+    background: linear-gradient(to top right, var(--dm-gradient-from, transparent), var(--dm-gradient-to, transparent));
+}
+
+.bg-gradient-to-r {
+    background: linear-gradient(to right, var(--dm-gradient-from, transparent), var(--dm-gradient-to, transparent));
+}
+
+.bg-gradient-to-br {
+    background: linear-gradient(to bottom right, var(--dm-gradient-from, transparent), var(--dm-gradient-to, transparent));
+}
+
+.bg-gradient-to-b {
+    background: linear-gradient(to bottom, var(--dm-gradient-from, transparent), var(--dm-gradient-to, transparent));
+}
+
+.bg-gradient-to-bl {
+    background: linear-gradient(to bottom left, var(--dm-gradient-from, transparent), var(--dm-gradient-to, transparent));
+}
+
+.bg-gradient-to-l {
+    background: linear-gradient(to left, var(--dm-gradient-from, transparent), var(--dm-gradient-to, transparent));
+}
+
+.bg-gradient-to-tl {
+    background: linear-gradient(to top left, var(--dm-gradient-from, transparent), var(--dm-gradient-to, transparent));
+}
+
+/* Radial Gradients */
+
+.bg-gradient-radial {
+    background: radial-gradient(circle, var(--dm-gradient-from, transparent), var(--dm-gradient-to, transparent));
+}
+
+/* Named Gradient Presets */
+
+.bg-gradient-purple {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.bg-gradient-blue {
+    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+}
+
+.bg-gradient-green {
+    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+}
+
+.bg-gradient-sunset {
+    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
+}
+
+.bg-gradient-ocean {
+    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
+}
+
+.bg-gradient-rose {
+    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
+}
+
+.bg-gradient-forest {
+    background: linear-gradient(135deg, #10b981 0%, #065f46 100%);
+}
+
+.bg-gradient-night {
+    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+}
+
+.bg-gradient-warm {
+    background: linear-gradient(135deg, #f59e0b 0%, #f97316 0%, #dc2626 100%);
+}
+
+.bg-gradient-cool {
+    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 0%, #8b5cf6 100%);
+}
+
+/* Animated Gradients */
+
+@keyframes dm-gradient-shift {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+.bg-gradient-animated {
+    background-size: 200% 200%;
+    animation: dm-gradient-shift 3s ease infinite;
+}
+
+/* Text Gradients */
+
+.text-gradient {
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-image: linear-gradient(135deg, var(--dm-primary) 0%, var(--dm-secondary) 100%);
+}
+
+.text-gradient-primary {
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-image: linear-gradient(135deg, var(--dm-primary) 0%, var(--dm-primary-dark) 100%);
+}
+
+.text-gradient-sunset {
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-image: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
+}
+
+.text-gradient-ocean {
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-image: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
+}
+
+.text-gradient-purple {
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+/* ============================================
+   FILTER UTILITIES
+   ============================================ */
+
+/* Blur */
+
+.blur-none {
+    filter: blur(0);
+}
+
+.blur-sm {
+    filter: blur(4px);
+}
+
+.blur {
+    filter: blur(8px);
+}
+
+.blur-md {
+    filter: blur(12px);
+}
+
+.blur-lg {
+    filter: blur(16px);
+}
+
+.blur-xl {
+    filter: blur(24px);
+}
+
+.blur-2xl {
+    filter: blur(40px);
+}
+
+.blur-3xl {
+    filter: blur(64px);
+}
+
+/* Brightness */
+
+.brightness-0 {
+    filter: brightness(0);
+}
+
+.brightness-50 {
+    filter: brightness(0.5);
+}
+
+.brightness-75 {
+    filter: brightness(0.75);
+}
+
+.brightness-90 {
+    filter: brightness(0.9);
+}
+
+.brightness-100 {
+    filter: brightness(1);
+}
+
+.brightness-110 {
+    filter: brightness(1.1);
+}
+
+.brightness-125 {
+    filter: brightness(1.25);
+}
+
+.brightness-150 {
+    filter: brightness(1.5);
+}
+
+.brightness-200 {
+    filter: brightness(2);
+}
+
+/* Contrast */
+
+.contrast-0 {
+    filter: contrast(0);
+}
+
+.contrast-50 {
+    filter: contrast(0.5);
+}
+
+.contrast-75 {
+    filter: contrast(0.75);
+}
+
+.contrast-100 {
+    filter: contrast(1);
+}
+
+.contrast-125 {
+    filter: contrast(1.25);
+}
+
+.contrast-150 {
+    filter: contrast(1.5);
+}
+
+.contrast-200 {
+    filter: contrast(2);
+}
+
+/* Grayscale */
+
+.grayscale-0 {
+    filter: grayscale(0);
+}
+
+.grayscale {
+    filter: grayscale(1);
+}
+
+.grayscale-50 {
+    filter: grayscale(0.5);
+}
+
+/* Hue Rotate */
+
+.hue-rotate-15 {
+    filter: hue-rotate(15deg);
+}
+
+.hue-rotate-30 {
+    filter: hue-rotate(30deg);
+}
+
+.hue-rotate-60 {
+    filter: hue-rotate(60deg);
+}
+
+.hue-rotate-90 {
+    filter: hue-rotate(90deg);
+}
+
+.hue-rotate-180 {
+    filter: hue-rotate(180deg);
+}
+
+/* Invert */
+
+.invert-0 {
+    filter: invert(0);
+}
+
+.invert {
+    filter: invert(1);
+}
+
+.invert-50 {
+    filter: invert(0.5);
+}
+
+/* Saturate */
+
+.saturate-0 {
+    filter: saturate(0);
+}
+
+.saturate-50 {
+    filter: saturate(0.5);
+}
+
+.saturate-100 {
+    filter: saturate(1);
+}
+
+.saturate-150 {
+    filter: saturate(1.5);
+}
+
+.saturate-200 {
+    filter: saturate(2);
+}
+
+/* Sepia */
+
+.sepia-0 {
+    filter: sepia(0);
+}
+
+.sepia {
+    filter: sepia(1);
+}
+
+.sepia-50 {
+    filter: sepia(0.5);
+}
+
+/* Drop Shadow */
+
+.drop-shadow-sm {
+    filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
+}
+
+.drop-shadow {
+    filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
+}
+
+.drop-shadow-md {
+    filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
+}
+
+.drop-shadow-lg {
+    filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
+}
+
+.drop-shadow-xl {
+    filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
+}
+
+.drop-shadow-2xl {
+    filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
+}
+
+.drop-shadow-none {
+    filter: drop-shadow(0 0 #0000);
+}
+
+/* Backdrop Blur */
+
+.backdrop-blur-none {
+    backdrop-filter: blur(0);
+}
+
+.backdrop-blur-sm {
+    backdrop-filter: blur(4px);
+}
+
+.backdrop-blur {
+    backdrop-filter: blur(8px);
+}
+
+.backdrop-blur-md {
+    backdrop-filter: blur(12px);
+}
+
+.backdrop-blur-lg {
+    backdrop-filter: blur(16px);
+}
+
+.backdrop-blur-xl {
+    backdrop-filter: blur(24px);
+}
+
+.backdrop-blur-2xl {
+    backdrop-filter: blur(40px);
+}
+
+.backdrop-blur-3xl {
+    backdrop-filter: blur(64px);
+}
+
+/* Backdrop Brightness */
+
+.backdrop-brightness-50 {
+    backdrop-filter: brightness(0.5);
+}
+
+.backdrop-brightness-75 {
+    backdrop-filter: brightness(0.75);
+}
+
+.backdrop-brightness-90 {
+    backdrop-filter: brightness(0.9);
+}
+
+.backdrop-brightness-100 {
+    backdrop-filter: brightness(1);
+}
+
+.backdrop-brightness-110 {
+    backdrop-filter: brightness(1.1);
+}
+
+.backdrop-brightness-125 {
+    backdrop-filter: brightness(1.25);
+}
+
+.backdrop-brightness-150 {
+    backdrop-filter: brightness(1.5);
+}
+
+/* Backdrop Saturate */
+
+.backdrop-saturate-0 {
+    backdrop-filter: saturate(0);
+}
+
+.backdrop-saturate-50 {
+    backdrop-filter: saturate(0.5);
+}
+
+.backdrop-saturate-100 {
+    backdrop-filter: saturate(1);
+}
+
+.backdrop-saturate-150 {
+    backdrop-filter: saturate(1.5);
+}
+
+.backdrop-saturate-200 {
+    backdrop-filter: saturate(2);
+}
+
+/* Combined Filter Presets */
+
+.filter-none {
+    filter: none;
+}
+
+.filter-vintage {
+    filter: sepia(0.5) contrast(1.2) brightness(0.9);
+}
+
+.filter-dramatic {
+    filter: contrast(1.5) saturate(1.3);
+}
+
+.filter-soft {
+    filter: blur(2px) brightness(1.1);
+}
+
+.filter-cold {
+    filter: saturate(0.8) hue-rotate(15deg);
+}
+
+.filter-warm {
+    filter: saturate(1.2) hue-rotate(-15deg);
 }