@shohojdhara/atomix 0.6.4 → 0.6.6

package/dist/heavy.js

@@ -25,7 +25,56 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
         ACTIVE: "c-btn--active",
         SELECTED: "c-btn--selected"
     }
-}, VIDEO_PLAYER_CLASSES_BASE = "c-video-player", VIDEO_PLAYER_CLASSES_VIDEO = "c-video-player__video", VIDEO_PLAYER_CLASSES_YOUTUBE = "c-video-player--youtube", VIDEO_PLAYER_CLASSES_LOADING = "c-video-player__loading", VIDEO_PLAYER_CLASSES_SPINNER = "c-video-player__spinner", VIDEO_PLAYER_CLASSES_CONTROLS = "c-video-player__controls", VIDEO_PLAYER_CLASSES_CONTROLS_VISIBLE = "c-video-player__controls--visible", VIDEO_PLAYER_CLASSES_PROGRESS_CONTAINER = "c-video-player__progress-container", VIDEO_PLAYER_CLASSES_PROGRESS_BAR = "c-video-player__progress-bar", VIDEO_PLAYER_CLASSES_PROGRESS_BUFFERED = "c-video-player__progress-buffered", VIDEO_PLAYER_CLASSES_PROGRESS_PLAYED = "c-video-player__progress-played", VIDEO_PLAYER_CLASSES_PROGRESS_THUMB = "c-video-player__progress-thumb", VIDEO_PLAYER_CLASSES_CONTROLS_ROW = "c-video-player__controls-row", VIDEO_PLAYER_CLASSES_CONTROLS_LEFT = "c-video-player__controls-left", VIDEO_PLAYER_CLASSES_CONTROLS_RIGHT = "c-video-player__controls-right", VIDEO_PLAYER_CLASSES_CONTROL_BUTTON = "c-video-player__control-button", VIDEO_PLAYER_CLASSES_VOLUME_CONTAINER = "c-video-player__volume-container", VIDEO_PLAYER_CLASSES_VOLUME_SLIDER = "c-video-player__volume-slider", VIDEO_PLAYER_CLASSES_VOLUME_BAR = "c-video-player__volume-bar", VIDEO_PLAYER_CLASSES_VOLUME_FILL = "c-video-player__volume-fill", VIDEO_PLAYER_CLASSES_TIME_DISPLAY = "c-video-player__time-display", VIDEO_PLAYER_CLASSES_SETTINGS_CONTAINER = "c-video-player__settings-container", VIDEO_PLAYER_CLASSES_SETTINGS_MENU = "c-video-player__settings-menu", VIDEO_PLAYER_CLASSES_SETTINGS_TABS = "c-video-player__settings-tabs", VIDEO_PLAYER_CLASSES_SETTINGS_TAB = "c-video-player__settings-tab", VIDEO_PLAYER_CLASSES_SETTINGS_TAB_ACTIVE = "c-video-player__settings-tab--active", VIDEO_PLAYER_CLASSES_SETTINGS_CONTENT = "c-video-player__settings-content", VIDEO_PLAYER_CLASSES_SETTINGS_OPTIONS = "c-video-player__settings-options", VIDEO_PLAYER_CLASSES_SETTINGS_OPTION = "c-video-player__settings-option", VIDEO_PLAYER_CLASSES_SETTINGS_OPTION_ACTIVE = "c-video-player__settings-option--active", VIDEO_PLAYER_CLASSES_AMBIENT = "c-video-player--ambient", VIDEO_PLAYER_CLASSES_AMBIENT_CANVAS = "c-video-player__ambient-canvas", VIDEO_PLAYER_CLASSES_GLASS = "c-video-player--glass", VIDEO_PLAYER_CLASSES_GLASS_OVERLAY = "c-video-player__glass-overlay", VIDEO_PLAYER_CLASSES_GLASS_CONTENT = "c-video-player__glass-content", ATOMIX_GLASS = {
+}, VIDEO_PLAYER_CLASSES_BASE = "c-video-player", VIDEO_PLAYER_CLASSES_VIDEO = "c-video-player__video", VIDEO_PLAYER_CLASSES_YOUTUBE = "c-video-player--youtube", VIDEO_PLAYER_CLASSES_LOADING = "c-video-player__loading", VIDEO_PLAYER_CLASSES_SPINNER = "c-video-player__spinner", VIDEO_PLAYER_CLASSES_CONTROLS = "c-video-player__controls", VIDEO_PLAYER_CLASSES_CONTROLS_VISIBLE = "c-video-player__controls--visible", VIDEO_PLAYER_CLASSES_PROGRESS_CONTAINER = "c-video-player__progress-container", VIDEO_PLAYER_CLASSES_PROGRESS_BAR = "c-video-player__progress-bar", VIDEO_PLAYER_CLASSES_PROGRESS_BUFFERED = "c-video-player__progress-buffered", VIDEO_PLAYER_CLASSES_PROGRESS_PLAYED = "c-video-player__progress-played", VIDEO_PLAYER_CLASSES_PROGRESS_THUMB = "c-video-player__progress-thumb", VIDEO_PLAYER_CLASSES_CONTROLS_ROW = "c-video-player__controls-row", VIDEO_PLAYER_CLASSES_CONTROLS_LEFT = "c-video-player__controls-left", VIDEO_PLAYER_CLASSES_CONTROLS_RIGHT = "c-video-player__controls-right", VIDEO_PLAYER_CLASSES_CONTROL_BUTTON = "c-video-player__control-button", VIDEO_PLAYER_CLASSES_VOLUME_CONTAINER = "c-video-player__volume-container", VIDEO_PLAYER_CLASSES_VOLUME_SLIDER = "c-video-player__volume-slider", VIDEO_PLAYER_CLASSES_VOLUME_BAR = "c-video-player__volume-bar", VIDEO_PLAYER_CLASSES_VOLUME_FILL = "c-video-player__volume-fill", VIDEO_PLAYER_CLASSES_TIME_DISPLAY = "c-video-player__time-display", VIDEO_PLAYER_CLASSES_SETTINGS_CONTAINER = "c-video-player__settings-container", VIDEO_PLAYER_CLASSES_SETTINGS_MENU = "c-video-player__settings-menu", VIDEO_PLAYER_CLASSES_SETTINGS_TABS = "c-video-player__settings-tabs", VIDEO_PLAYER_CLASSES_SETTINGS_TAB = "c-video-player__settings-tab", VIDEO_PLAYER_CLASSES_SETTINGS_TAB_ACTIVE = "c-video-player__settings-tab--active", VIDEO_PLAYER_CLASSES_SETTINGS_CONTENT = "c-video-player__settings-content", VIDEO_PLAYER_CLASSES_SETTINGS_OPTIONS = "c-video-player__settings-options", VIDEO_PLAYER_CLASSES_SETTINGS_OPTION = "c-video-player__settings-option", VIDEO_PLAYER_CLASSES_SETTINGS_OPTION_ACTIVE = "c-video-player__settings-option--active", VIDEO_PLAYER_CLASSES_AMBIENT = "c-video-player--ambient", VIDEO_PLAYER_CLASSES_AMBIENT_CANVAS = "c-video-player__ambient-canvas", VIDEO_PLAYER_CLASSES_GLASS = "c-video-player--glass", VIDEO_PLAYER_CLASSES_GLASS_OVERLAY = "c-video-player__glass-overlay", VIDEO_PLAYER_CLASSES_GLASS_CONTENT = "c-video-player__glass-content", GLASS_DEFAULTS_BUTTON = {
+    displacementScale: 16,
+    saturation: 180,
+    elasticity: 0
+}, GLASS_DEFAULTS_BADGE = {
+    displacementScale: 14,
+    borderRadius: 16,
+    elasticity: 0
+}, GLASS_DEFAULTS_SPINNER = {
+    displacementScale: 12,
+    elasticity: 0
+}, GLASS_BORDER_GRADIENT = {
+    BASE_ANGLE: 135,
+    ANGLE_MULTIPLIER: .5,
+    VELOCITY_ANGLE_MULTIPLIER: .5,
+    CHROMATIC_OFFSET: 1.5,
+    STOP_1: {
+        MIN: 10,
+        BASE: 33,
+        get MULTIPLIER() {
+            return .009 * this.BASE;
+        }
+    },
+    STOP_2: {
+        MAX: 90,
+        BASE: 66,
+        get MULTIPLIER() {
+            return .006 * this.BASE;
+        }
+    },
+    OPACITY: {
+        /** Matches $glass-border-1-opacity (0.08) */
+        BASE_1: .08,
+        get BASE_2() {
+            return 3.33 * this.BASE_1;
+        },
+        get BASE_3() {
+            return 2.66 * this.BASE_1;
+        },
+        get BASE_4() {
+            return 5 * this.BASE_1;
+        },
+        get MULTIPLIER_LOW() {
+            return .066 * this.BASE_1;
+        },
+        get MULTIPLIER_HIGH() {
+            return .1 * this.BASE_1;
+        }
+    }
+}, ATOMIX_GLASS = {
     BASE_CLASS: "c-atomix-glass",
     CONTAINER_CLASS: "c-atomix-glass__container",
     INNER_CLASS: "c-atomix-glass__inner",
@@ -36,6 +85,22 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
     BORDER_BACKDROP_CLASS: "c-atomix-glass__border-backdrop",
     BORDER_1_CLASS: "c-atomix-glass__border-1",
     BORDER_2_CLASS: "c-atomix-glass__border-2",
+    /** Centralized liquid glass rim configuration */
+    BORDER: {
+        WIDTH_CSS_VAR: "--atomix-glass-border-width",
+        DEFAULT_WIDTH: "0.5px",
+        GRADIENT_CSS_VARS: {
+            GRADIENT_1: "--atomix-glass-border-gradient-1",
+            GRADIENT_2: "--atomix-glass-border-gradient-2"
+        },
+        GRADIENT: GLASS_BORDER_GRADIENT,
+        OVER_LIGHT: {
+            opacity: .7
+        },
+        DARK: {
+            opacity: .35
+        }
+    },
     HOVER_1_CLASS: "c-atomix-glass__hover-1",
     HOVER_2_CLASS: "c-atomix-glass__hover-2",
     HOVER_3_CLASS: "c-atomix-glass__hover-3",
@@ -64,25 +129,22 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
         SHADER: "c-atomix-glass--shader"
     },
     DEFAULTS: {
-        DISPLACEMENT_SCALE: 70,
+        /** Subtle refraction — Apple UI chrome avoids heavy liquid distortion */
+        DISPLACEMENT_SCALE: 28,
         get BLUR_AMOUNT() {
-            return .15 * this.DISPLACEMENT_SCALE;
- // Dynamically computed based on displacement
-                },
-        get SATURATION() {
-            return 100 + .5 * this.DISPLACEMENT_SCALE;
- // Saturate relative to intensity
-                },
+            // Apple Music sidebar / player bar: ~20–40px frost (see $glass-backdrop-filter)
+            return Math.max(20, .72 * this.DISPLACEMENT_SCALE);
+        },
+        /** Fixed 180% matches Apple's saturate(180%) backdrop recipe */
+        SATURATION: 180,
         get ABERRATION_INTENSITY() {
-            return .03 * this.DISPLACEMENT_SCALE;
- // Scale aberration with displacement
-                },
-        ELASTICITY: .15,
+            return .02 * this.DISPLACEMENT_SCALE;
+        },
+        ELASTICITY: .05,
         get CORNER_RADIUS() {
             return 16;
  // Use 16 to match SCSS design system (was 20)
                 },
-        PADDING: "0",
         MODE: "standard",
         OVER_LIGHT: !1,
         ENABLE_OVER_LIGHT_LAYERS: !0,
@@ -98,19 +160,29 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
     },
     CONSTANTS: {
         ACTIVATION_ZONE: 200,
-        LERP_FACTOR: .08,
+        LERP_FACTOR: .05,
+        // Lower = more viscous, liquid-smooth tracking (Apple feel)
         SMOOTHSTEP_POWER: 2.5,
         MIN_BLUR: .1,
         MOUSE_INFLUENCE_DIVISOR: 100,
         EDGE_FADE_PIXELS: 2,
-        // Elasticity physics constants
-        ELASTICITY_TRANSLATION_FACTOR: .1,
+        // Interaction intensity multipliers shared by the hook and the imperative style updater
+        INTERACTION: {
+            HOVER_INTENSITY: 1.4,
+            ACTIVE_INTENSITY: 1.6
+        },
+        // Elasticity physics constants — Apple-tuned: soft springs, fast settling, minimal stretch
+        ELASTICITY_TRANSLATION_FACTOR: .06,
+        // Subtler elastic shift (was 0.1)
         ELASTICITY_DISTANCE_THRESHOLD: 200,
         ELASTICITY_COMPRESSION_FACTOR: .3,
-        ELASTICITY_STIFFNESS: .1,
-        ELASTICITY_DAMPING: .76,
+        ELASTICITY_STIFFNESS: .06,
+        // Softer springs = gentler motion (was 0.1)
+        ELASTICITY_DAMPING: .88,
+        // Fast settling, no wobble (was 0.76)
         ELASTICITY_VELOCITY_FACTOR: .65,
-        ELASTICITY_STRETCH_RATIO: .45,
+        ELASTICITY_STRETCH_RATIO: .25,
+        // Less visible surface tension stretch (was 0.45)
         ELASTICITY_MAGNIFICATION_BASE: 1.02,
         // Note: This default must match the SCSS variable --atomix-radius-md
         // @see src/styles/01-settings/_settings.global.scss
@@ -124,55 +196,16 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
         },
         // Gradient calculation constants
         GRADIENT: {
-            BASE_ANGLE: 135,
-            // Base angle for border gradients (degrees)
-            ANGLE_MULTIPLIER: 1.2,
-            // Multiplier for mouse influence on angle
-            VELOCITY_ANGLE_MULTIPLIER: 2.5,
-            // How much velocity affects gradient rotation
-            CHROMATIC_OFFSET: 1.5,
-            // Degree offset for chromatic rim layers
-            BORDER_STOP_1: {
-                MIN: 10,
-                // Minimum percentage for border stop 1
-                BASE: 33,
-                // Base percentage for border stop 1
-                get MULTIPLIER() {
-                    return .009 * this.BASE;
-                }
-            },
-            BORDER_STOP_2: {
-                MAX: 90,
-                // Maximum percentage for border stop 2
-                BASE: 66,
-                // Base percentage for border stop 2
-                get MULTIPLIER() {
-                    return .006 * this.BASE;
-                }
-            },
-            BORDER_OPACITY: {
-                BASE_1: .12,
-                // Base opacity for border gradient 1
-                get BASE_2() {
-                    return 3.33 * this.BASE_1;
-                },
-                // Base opacity for border gradient 2
-                get BASE_3() {
-                    return 2.66 * this.BASE_1;
-                },
-                // Base opacity for border gradient 3
-                get BASE_4() {
-                    return 5 * this.BASE_1;
-                },
-                // Base opacity for border gradient 4
-                get MULTIPLIER_LOW() {
-                    return .066 * this.BASE_1;
-                },
-                // Low multiplier for mouse influence on opacity
-                get MULTIPLIER_HIGH() {
-                    return .1 * this.BASE_1;
-                }
-            },
+            BASE_ANGLE: GLASS_BORDER_GRADIENT.BASE_ANGLE,
+            ANGLE_MULTIPLIER: GLASS_BORDER_GRADIENT.ANGLE_MULTIPLIER,
+            VELOCITY_ANGLE_MULTIPLIER: GLASS_BORDER_GRADIENT.VELOCITY_ANGLE_MULTIPLIER,
+            CHROMATIC_OFFSET: GLASS_BORDER_GRADIENT.CHROMATIC_OFFSET,
+            /** @deprecated Use ATOMIX_GLASS.BORDER.GRADIENT.STOP_1 */
+            BORDER_STOP_1: GLASS_BORDER_GRADIENT.STOP_1,
+            /** @deprecated Use ATOMIX_GLASS.BORDER.GRADIENT.STOP_2 */
+            BORDER_STOP_2: GLASS_BORDER_GRADIENT.STOP_2,
+            /** @deprecated Use ATOMIX_GLASS.BORDER.GRADIENT.OPACITY */
+            BORDER_OPACITY: GLASS_BORDER_GRADIENT.OPACITY,
             CENTER_POSITION: 50,
             // Center position percentage (50%)
             HOVER_POSITION: {
@@ -205,8 +238,8 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
                     return 2 * this.BLACK_STOP;
                 },
                 // End percentage for black hover 1
-                WHITE_START: .5,
-                // Start opacity for white hover 1
+                WHITE_START: .35,
+                // Gentler hover flash — Apple hover is barely visible
                 get WHITE_STOP() {
                     return this.BLACK_END - 10;
                 }
@@ -224,8 +257,8 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
                     return 2 * this.BLACK_STOP;
                 },
                 // End percentage for black hover 2
-                WHITE_START: 1,
-                // Start opacity for white hover 2
+                WHITE_START: .7,
+                // Gentler hover flash
                 get WHITE_STOP() {
                     return this.BLACK_END;
                 }
@@ -243,8 +276,8 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
                     return 2 * this.BLACK_STOP;
                 },
                 // End percentage for black hover 3
-                WHITE_START: 1,
-                // Start opacity for white hover 3
+                WHITE_START: .7,
+                // Gentler hover flash
                 get WHITE_STOP() {
                     return this.BLACK_END;
                 }
@@ -254,13 +287,13 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
         BASE_GRADIENT: {
             ANGLE: 135,
             // Gradient angle in degrees
-            BLACK_START_BASE: .15,
+            BLACK_START_BASE: .1,
             // Base start opacity for black
             get BLACK_START_MULTIPLIER() {
                 return .02 * this.BLACK_START_BASE;
             },
             // Multiplier for mouse X influence on start
-            BLACK_MID_BASE: .1,
+            BLACK_MID_BASE: .07,
             // Base mid opacity for black
             get BLACK_MID_MULTIPLIER() {
                 return .02 * this.BLACK_MID_BASE;
@@ -281,7 +314,7 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
             }
         },
         OVERLAY_GRADIENT: {
-            BLACK_START_BASE: .12,
+            BLACK_START_BASE: .08,
             // Base start opacity for black overlay
             get BLACK_START_MULTIPLIER() {
                 return .025 * this.BLACK_START_BASE;
@@ -305,14 +338,14 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
                 return .416 * this.BLACK_START_BASE;
             }
         },
-        // Overlay highlight constants
+        // Overlay highlight constants — Apple places specular at the top-center
         OVERLAY_HIGHLIGHT: {
-            POSITION_X: 20,
-            // X position percentage
-            POSITION_Y: 20,
-            // Y position percentage
-            WHITE_OPACITY: .4,
-            // White opacity in gradient
+            POSITION_X: 50,
+            // Centered horizontal — Apple's top-center specular
+            POSITION_Y: 5,
+            // Very top — catches light like a curved glass surface
+            WHITE_OPACITY: .28,
+            // Softer specular — visible but not glaring
             get STOP() {
                 return 150 * this.WHITE_OPACITY;
             },
@@ -333,6 +366,10 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
         SATURATION: {
             HIGH_CONTRAST: 200
         },
+        // Container shadows — hairline inner catch + soft floating lift (Apple player bar)
+        CONTAINER_SHADOW: {
+            LIGHT: "inset 0 0.5px 0 rgba(255, 255, 255, 0.32), inset 0 1px 2px rgba(255, 255, 255, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08)"
+        },
         // Phase 1: Animation System Constants
         ANIMATION: {
             // Breathing effect timing (in milliseconds)
@@ -372,7 +409,331 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
             }
         }
     }
-}, {CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, calculateElementCenter = rect => rect ? {
+};
+
+var commonjsGlobal = "undefined" != typeof globalThis ? globalThis : "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : {};
+
+function getDefaultExportFromCjs(x) {
+    return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
+}
+
+var fails$8 = function(exec) {
+    try {
+        return !!exec();
+    } catch (error) {
+        return !0;
+    }
+}, functionBindNative = !fails$8((function() {
+    // eslint-disable-next-line es/no-function-prototype-bind -- safe
+    var test = function() {/* empty */}.bind();
+    // eslint-disable-next-line no-prototype-builtins -- safe
+        return "function" != typeof test || test.hasOwnProperty("prototype");
+})), NATIVE_BIND$3 = functionBindNative, FunctionPrototype$1 = Function.prototype, call$5 = FunctionPrototype$1.call, uncurryThisWithBind = NATIVE_BIND$3 && FunctionPrototype$1.bind.bind(call$5, call$5), functionUncurryThis = NATIVE_BIND$3 ? uncurryThisWithBind : function(fn) {
+    return function() {
+        return call$5.apply(fn, arguments);
+    };
+}, objectIsPrototypeOf = functionUncurryThis({}.isPrototypeOf), check = function(it) {
+    return it && it.Math === Math && it;
+}, globalThis_1 = 
+// eslint-disable-next-line es/no-global-this -- safe
+check("object" == typeof globalThis && globalThis) || check("object" == typeof window && window) || 
+// eslint-disable-next-line no-restricted-globals -- safe
+check("object" == typeof self && self) || check("object" == typeof commonjsGlobal && commonjsGlobal) || check("object" == typeof commonjsGlobal && commonjsGlobal) || 
+// eslint-disable-next-line no-new-func -- fallback
+function() {
+    return this;
+}() || Function("return this")(), NATIVE_BIND$2 = functionBindNative, FunctionPrototype = Function.prototype, apply$1 = FunctionPrototype.apply, call$4 = FunctionPrototype.call, functionApply = "object" == typeof Reflect && Reflect.apply || (NATIVE_BIND$2 ? call$4.bind(apply$1) : function() {
+    return call$4.apply(apply$1, arguments);
+}), uncurryThis$7 = functionUncurryThis, toString$3 = uncurryThis$7({}.toString), stringSlice = uncurryThis$7("".slice), classofRaw$2 = function(it) {
+    return stringSlice(toString$3(it), 8, -1);
+}, classofRaw$1 = classofRaw$2, uncurryThis$6 = functionUncurryThis, functionUncurryThisClause = function(fn) {
+    // Nashorn bug:
+    //   https://github.com/zloirock/core-js/issues/1128
+    //   https://github.com/zloirock/core-js/issues/1130
+    if ("Function" === classofRaw$1(fn)) return uncurryThis$6(fn);
+}, documentAll = "object" == typeof document && document.all, isCallable$8 = void 0 === documentAll && void 0 !== documentAll ? function(argument) {
+    return "function" == typeof argument || argument === documentAll;
+} : function(argument) {
+    return "function" == typeof argument;
+}, objectGetOwnPropertyDescriptor = {}, descriptors = !fails$8((function() {
+    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+    return 7 !== Object.defineProperty({}, 1, {
+        get: function() {
+            return 7;
+        }
+    })[1];
+})), NATIVE_BIND$1 = functionBindNative, call$3 = Function.prototype.call, functionCall = NATIVE_BIND$1 ? call$3.bind(call$3) : function() {
+    return call$3.apply(call$3, arguments);
+}, objectPropertyIsEnumerable = {}, $propertyIsEnumerable = {}.propertyIsEnumerable, getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor, NASHORN_BUG = getOwnPropertyDescriptor$1 && !$propertyIsEnumerable.call({
+    1: 2
+}, 1);
+
+// `Object.prototype.propertyIsEnumerable` method implementation
+// https://tc39.es/ecma262/#sec-object.prototype.propertyisenumerable
+objectPropertyIsEnumerable.f = NASHORN_BUG ? function(V) {
+    var descriptor = getOwnPropertyDescriptor$1(this, V);
+    return !!descriptor && descriptor.enumerable;
+} : $propertyIsEnumerable;
+
+var match, version, createPropertyDescriptor$2 = function(bitmap, value) {
+    return {
+        enumerable: !(1 & bitmap),
+        configurable: !(2 & bitmap),
+        writable: !(4 & bitmap),
+        value: value
+    };
+}, fails$5 = fails$8, classof$3 = classofRaw$2, $Object$3 = Object, split = functionUncurryThis("".split), indexedObject = fails$5((function() {
+    // throws an error in rhino, see https://github.com/mozilla/rhino/issues/346
+    // eslint-disable-next-line no-prototype-builtins -- safe
+    return !$Object$3("z").propertyIsEnumerable(0);
+})) ? function(it) {
+    return "String" === classof$3(it) ? split(it, "") : $Object$3(it);
+} : $Object$3, isNullOrUndefined$2 = function(it) {
+    return null == it;
+}, isNullOrUndefined$1 = isNullOrUndefined$2, $TypeError$6 = TypeError, requireObjectCoercible$3 = function(it) {
+    if (isNullOrUndefined$1(it)) throw new $TypeError$6("Can't call method on " + it);
+    return it;
+}, IndexedObject = indexedObject, requireObjectCoercible$2 = requireObjectCoercible$3, toIndexedObject$2 = function(it) {
+    return IndexedObject(requireObjectCoercible$2(it));
+}, isCallable$7 = isCallable$8, isObject$5 = function(it) {
+    return "object" == typeof it ? null !== it : isCallable$7(it);
+}, path$3 = {}, path$2 = path$3, globalThis$a = globalThis_1, isCallable$6 = isCallable$8, aFunction = function(variable) {
+    return isCallable$6(variable) ? variable : void 0;
+}, navigator$1 = globalThis_1.navigator, userAgent$1 = navigator$1 && navigator$1.userAgent, globalThis$8 = globalThis_1, userAgent = userAgent$1 ? String(userAgent$1) : "", process$1 = globalThis$8.process, Deno = globalThis$8.Deno, versions = process$1 && process$1.versions || Deno && Deno.version, v8 = versions && versions.v8;
+
+v8 && (
+// in old Chrome, versions of V8 isn't V8 = Chrome / 10
+// but their correct versions are not interesting for us
+version = (match = v8.split("."))[0] > 0 && match[0] < 4 ? 1 : +(match[0] + match[1])), 
+// BrowserFS NodeJS `process` polyfill incorrectly set `.v8` to `0.0`
+// so check `userAgent` even if `.v8` exists, but 0
+!version && userAgent && (!(match = userAgent.match(/Edge\/(\d+)/)) || match[1] >= 74) && (match = userAgent.match(/Chrome\/(\d+)/)) && (version = +match[1]);
+
+var V8_VERSION = version, fails$4 = fails$8, $String$3 = globalThis_1.String, symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$4((function() {
+    var symbol = Symbol("symbol detection");
+    // Chrome 38 Symbol has incorrect toString conversion
+    // `get-own-property-symbols` polyfill symbols converted to object are not Symbol instances
+    // nb: Do not call `String` directly to avoid this being optimized out to `symbol+''` which will,
+    // of course, fail.
+        return !$String$3(symbol) || !(Object(symbol) instanceof Symbol) || 
+    // Chrome 38-40 symbols are not inherited from DOM collections prototypes to instances
+    !Symbol.sham && V8_VERSION && V8_VERSION < 41;
+})), useSymbolAsUid = symbolConstructorDetection && !Symbol.sham && "symbol" == typeof Symbol.iterator, isCallable$5 = isCallable$8, isPrototypeOf$1 = objectIsPrototypeOf, $Object$2 = Object, isSymbol$2 = useSymbolAsUid ? function(it) {
+    return "symbol" == typeof it;
+} : function(it) {
+    var $Symbol = function(namespace, method) {
+        return arguments.length < 2 ? aFunction(path$2[namespace]) || aFunction(globalThis$a[namespace]) : path$2[namespace] && path$2[namespace][method] || globalThis$a[namespace] && globalThis$a[namespace][method];
+    }("Symbol");
+    return isCallable$5($Symbol) && isPrototypeOf$1($Symbol.prototype, $Object$2(it));
+}, $String$2 = String, isCallable$4 = isCallable$8, $TypeError$5 = TypeError, aCallable$2 = function(argument) {
+    if (isCallable$4(argument)) return argument;
+    throw new $TypeError$5(function(argument) {
+        try {
+            return $String$2(argument);
+        } catch (error) {
+            return "Object";
+        }
+    }(argument) + " is not a function");
+}, aCallable$1 = aCallable$2, isNullOrUndefined = isNullOrUndefined$2, call$2 = functionCall, isCallable$3 = isCallable$8, isObject$4 = isObject$5, $TypeError$4 = TypeError, sharedStore = {
+    exports: {}
+}, globalThis$6 = globalThis_1, defineProperty = Object.defineProperty, globalThis$5 = globalThis_1, store$1 = sharedStore.exports = globalThis$5["__core-js_shared__"] || function(key, value) {
+    try {
+        defineProperty(globalThis$6, key, {
+            value: value,
+            configurable: !0,
+            writable: !0
+        });
+    } catch (error) {
+        globalThis$6[key] = value;
+    }
+    return value;
+}("__core-js_shared__", {});
+
+/* eslint-disable es/no-symbol -- required for testing */ (store$1.versions || (store$1.versions = [])).push({
+    version: "3.43.0",
+    mode: "pure",
+    copyright: "© 2014-2025 Denis Pushkarev (zloirock.ru)",
+    license: "https://github.com/zloirock/core-js/blob/v3.43.0/LICENSE",
+    source: "https://github.com/zloirock/core-js"
+});
+
+var key, value, store = sharedStore.exports, requireObjectCoercible$1 = requireObjectCoercible$3, $Object$1 = Object, hasOwnProperty = functionUncurryThis({}.hasOwnProperty), hasOwnProperty_1 = Object.hasOwn || function(it, key) {
+    return hasOwnProperty($Object$1(requireObjectCoercible$1(it)), key);
+}, uncurryThis$3 = functionUncurryThis, id = 0, postfix = Math.random(), toString$2 = uncurryThis$3(1.1.toString), hasOwn$2 = hasOwnProperty_1, NATIVE_SYMBOL = symbolConstructorDetection, USE_SYMBOL_AS_UID = useSymbolAsUid, Symbol$1 = globalThis_1.Symbol, WellKnownSymbolsStore = store[key = "wks"] || (store[key] = value || {}), createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol$1.for || Symbol$1 : Symbol$1 && Symbol$1.withoutSetter || function(key) {
+    return "Symbol(" + (void 0 === key ? "" : key) + ")_" + toString$2(++id + postfix, 36);
+}, wellKnownSymbol$5 = function(name) {
+    return hasOwn$2(WellKnownSymbolsStore, name) || (WellKnownSymbolsStore[name] = NATIVE_SYMBOL && hasOwn$2(Symbol$1, name) ? Symbol$1[name] : createWellKnownSymbol("Symbol." + name)), 
+    WellKnownSymbolsStore[name];
+}, call$1 = functionCall, isObject$3 = isObject$5, isSymbol$1 = isSymbol$2, $TypeError$3 = TypeError, TO_PRIMITIVE = wellKnownSymbol$5("toPrimitive"), toPrimitive = function(input, pref) {
+    if (!isObject$3(input) || isSymbol$1(input)) return input;
+    var result, func, exoticToPrim = (func = input[TO_PRIMITIVE], isNullOrUndefined(func) ? void 0 : aCallable$1(func));
+    if (exoticToPrim) {
+        if (void 0 === pref && (pref = "default"), result = call$1(exoticToPrim, input, pref), 
+        !isObject$3(result) || isSymbol$1(result)) return result;
+        throw new $TypeError$3("Can't convert object to primitive value");
+    }
+    return void 0 === pref && (pref = "number"), function(input, pref) {
+        var fn, val;
+        if ("string" === pref && isCallable$3(fn = input.toString) && !isObject$4(val = call$2(fn, input))) return val;
+        if (isCallable$3(fn = input.valueOf) && !isObject$4(val = call$2(fn, input))) return val;
+        if ("string" !== pref && isCallable$3(fn = input.toString) && !isObject$4(val = call$2(fn, input))) return val;
+        throw new $TypeError$4("Can't convert object to primitive value");
+    }(input, pref);
+}, isSymbol = isSymbol$2, toPropertyKey$2 = function(argument) {
+    var key = toPrimitive(argument, "string");
+    return isSymbol(key) ? key : key + "";
+}, isObject$2 = isObject$5, document$1 = globalThis_1.document, EXISTS = isObject$2(document$1) && isObject$2(document$1.createElement), ie8DomDefine = !descriptors && !fails$8((function() {
+    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+    return 7 !== Object.defineProperty((it = "div", EXISTS ? document$1.createElement(it) : {}), "a", {
+        get: function() {
+            return 7;
+        }
+    }).a;
+    var it;
+})), DESCRIPTORS$3 = descriptors, call = functionCall, propertyIsEnumerableModule = objectPropertyIsEnumerable, createPropertyDescriptor$1 = createPropertyDescriptor$2, toIndexedObject$1 = toIndexedObject$2, toPropertyKey$1 = toPropertyKey$2, hasOwn$1 = hasOwnProperty_1, IE8_DOM_DEFINE$1 = ie8DomDefine, $getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor;
+
+// `Object.getOwnPropertyDescriptor` method
+// https://tc39.es/ecma262/#sec-object.getownpropertydescriptor
+objectGetOwnPropertyDescriptor.f = DESCRIPTORS$3 ? $getOwnPropertyDescriptor$1 : function(O, P) {
+    if (O = toIndexedObject$1(O), P = toPropertyKey$1(P), IE8_DOM_DEFINE$1) try {
+        return $getOwnPropertyDescriptor$1(O, P);
+    } catch (error) {/* empty */}
+    if (hasOwn$1(O, P)) return createPropertyDescriptor$1(!call(propertyIsEnumerableModule.f, O, P), O[P]);
+};
+
+var fails$2 = fails$8, isCallable$2 = isCallable$8, replacement = /#|\.prototype\./, isForced$1 = function(feature, detection) {
+    var value = data[normalize(feature)];
+    return value === POLYFILL || value !== NATIVE && (isCallable$2(detection) ? fails$2(detection) : !!detection);
+}, normalize = isForced$1.normalize = function(string) {
+    return String(string).replace(replacement, ".").toLowerCase();
+}, data = isForced$1.data = {}, NATIVE = isForced$1.NATIVE = "N", POLYFILL = isForced$1.POLYFILL = "P", isForced_1 = isForced$1, aCallable = aCallable$2, NATIVE_BIND = functionBindNative, bind$1 = functionUncurryThisClause(functionUncurryThisClause.bind), objectDefineProperty = {}, v8PrototypeDefineBug = descriptors && fails$8((function() {
+    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
+    return 42 !== Object.defineProperty((function() {/* empty */}), "prototype", {
+        value: 42,
+        writable: !1
+    }).prototype;
+})), isObject$1 = isObject$5, $String$1 = String, $TypeError$2 = TypeError, DESCRIPTORS$1 = descriptors, IE8_DOM_DEFINE = ie8DomDefine, V8_PROTOTYPE_DEFINE_BUG = v8PrototypeDefineBug, anObject = function(argument) {
+    if (isObject$1(argument)) return argument;
+    throw new $TypeError$2($String$1(argument) + " is not an object");
+}, toPropertyKey = toPropertyKey$2, $TypeError$1 = TypeError, $defineProperty = Object.defineProperty, $getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
+
+// `Object.defineProperty` method
+// https://tc39.es/ecma262/#sec-object.defineproperty
+objectDefineProperty.f = DESCRIPTORS$1 ? V8_PROTOTYPE_DEFINE_BUG ? function(O, P, Attributes) {
+    if (anObject(O), P = toPropertyKey(P), anObject(Attributes), "function" == typeof O && "prototype" === P && "value" in Attributes && "writable" in Attributes && !Attributes.writable) {
+        var current = $getOwnPropertyDescriptor(O, P);
+        current && current.writable && (O[P] = Attributes.value, Attributes = {
+            configurable: "configurable" in Attributes ? Attributes.configurable : current.configurable,
+            enumerable: "enumerable" in Attributes ? Attributes.enumerable : current.enumerable,
+            writable: !1
+        });
+    }
+    return $defineProperty(O, P, Attributes);
+} : $defineProperty : function(O, P, Attributes) {
+    if (anObject(O), P = toPropertyKey(P), anObject(Attributes), IE8_DOM_DEFINE) try {
+        return $defineProperty(O, P, Attributes);
+    } catch (error) {/* empty */}
+    if ("get" in Attributes || "set" in Attributes) throw new $TypeError$1("Accessors not supported");
+    return "value" in Attributes && (O[P] = Attributes.value), O;
+};
+
+var definePropertyModule = objectDefineProperty, createPropertyDescriptor = createPropertyDescriptor$2, createNonEnumerableProperty$1 = descriptors ? function(object, key, value) {
+    return definePropertyModule.f(object, key, createPropertyDescriptor(1, value));
+} : function(object, key, value) {
+    return object[key] = value, object;
+}, globalThis$2 = globalThis_1, apply = functionApply, uncurryThis$1 = functionUncurryThisClause, isCallable$1 = isCallable$8, getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f, isForced = isForced_1, path$1 = path$3, bind = function(fn, that) {
+    return aCallable(fn), void 0 === that ? fn : NATIVE_BIND ? bind$1(fn, that) : function() {
+        return fn.apply(that, arguments);
+    };
+}, createNonEnumerableProperty = createNonEnumerableProperty$1, hasOwn = hasOwnProperty_1, wrapConstructor = function(NativeConstructor) {
+    var Wrapper = function(a, b, c) {
+        if (this instanceof Wrapper) {
+            switch (arguments.length) {
+              case 0:
+                return new NativeConstructor;
+
+              case 1:
+                return new NativeConstructor(a);
+
+              case 2:
+                return new NativeConstructor(a, b);
+            }
+            return new NativeConstructor(a, b, c);
+        }
+        return apply(NativeConstructor, this, arguments);
+    };
+    return Wrapper.prototype = NativeConstructor.prototype, Wrapper;
+}, _export = function(options, source) {
+    var FORCED, USE_NATIVE, VIRTUAL_PROTOTYPE, key, sourceProperty, targetProperty, nativeProperty, resultProperty, descriptor, TARGET = options.target, GLOBAL = options.global, STATIC = options.stat, PROTO = options.proto, nativeSource = GLOBAL ? globalThis$2 : STATIC ? globalThis$2[TARGET] : globalThis$2[TARGET] && globalThis$2[TARGET].prototype, target = GLOBAL ? path$1 : path$1[TARGET] || createNonEnumerableProperty(path$1, TARGET, {})[TARGET], targetPrototype = target.prototype;
+    for (key in source) 
+    // contains in native
+    USE_NATIVE = !(FORCED = isForced(GLOBAL ? key : TARGET + (STATIC ? "." : "#") + key, options.forced)) && nativeSource && hasOwn(nativeSource, key), 
+    targetProperty = target[key], USE_NATIVE && (nativeProperty = options.dontCallGetSet ? (descriptor = getOwnPropertyDescriptor(nativeSource, key)) && descriptor.value : nativeSource[key]), 
+    // export native or implementation
+    sourceProperty = USE_NATIVE && nativeProperty ? nativeProperty : source[key], (FORCED || PROTO || typeof targetProperty != typeof sourceProperty) && (
+    // bind methods to global for calling from export context
+    resultProperty = options.bind && USE_NATIVE ? bind(sourceProperty, globalThis$2) : options.wrap && USE_NATIVE ? wrapConstructor(sourceProperty) : PROTO && isCallable$1(sourceProperty) ? uncurryThis$1(sourceProperty) : sourceProperty, 
+    // add a flag to not completely full polyfills
+    (options.sham || sourceProperty && sourceProperty.sham || targetProperty && targetProperty.sham) && createNonEnumerableProperty(resultProperty, "sham", !0), 
+    createNonEnumerableProperty(target, key, resultProperty), PROTO && (hasOwn(path$1, VIRTUAL_PROTOTYPE = TARGET + "Prototype") || createNonEnumerableProperty(path$1, VIRTUAL_PROTOTYPE, {}), 
+    // export virtual prototype methods
+    createNonEnumerableProperty(path$1[VIRTUAL_PROTOTYPE], key, sourceProperty), 
+    // export real prototype methods
+    options.real && targetPrototype && (FORCED || !targetPrototype[key]) && createNonEnumerableProperty(targetPrototype, key, sourceProperty)));
+}, ceil = Math.ceil, floor = Math.floor, trunc = Math.trunc || function(x) {
+    var n = +x;
+    return (n > 0 ? floor : ceil)(n);
+}, toIntegerOrInfinity$2 = function(argument) {
+    var number = +argument;
+    // eslint-disable-next-line no-self-compare -- NaN check
+        return number != number || 0 === number ? 0 : trunc(number);
+}, toIntegerOrInfinity$1 = toIntegerOrInfinity$2, min$1 = Math.min, globalThis$1 = globalThis_1, path = path$3, getBuiltInPrototypeMethod$2 = function(CONSTRUCTOR, METHOD) {
+    var Namespace = path[CONSTRUCTOR + "Prototype"], pureMethod = Namespace && Namespace[METHOD];
+    if (pureMethod) return pureMethod;
+    var NativeConstructor = globalThis$1[CONSTRUCTOR], NativePrototype = NativeConstructor && NativeConstructor.prototype;
+    return NativePrototype && NativePrototype[METHOD];
+};
+
+/**
+ * Component Utilities
+ *
+ * Helper functions for component development with the new customization system
+ */
+/**
+ * Merge multiple class names
+ */
+function mergeClassNames(...classes) {
+    return classes.filter(Boolean).join(" ");
+}
+
+/**
+ * Check if a URL is a YouTube URL
+ */ function isYouTubeUrl(url) {
+    return /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/.+/.test(url);
+}
+
+/**
+ * Extract YouTube video ID from URL
+ */
+/**
+ * Utility to merge multiple React refs into one
+ */
+function setRef(ref, value) {
+    "function" == typeof ref ? ref(value) : ref && (
+    // This is safe because we're checking that ref exists first
+    ref.current = value);
+}
+
+/**
+ * Combines two React refs into a single ref function
+ * This is used when you need to use and forward a ref at the same time
+ */ function useForkRef(refA, refB) {
+    return React.useMemo((() => null == refA && null == refB ? null : refValue => {
+        setRef(refA, refValue), setRef(refB, refValue);
+    }), [ refA, refB ]);
+}
+
+const {CONSTANTS: CONSTANTS$3} = ATOMIX_GLASS, calculateElementCenter = rect => rect ? {
     x: rect.left + rect.width / 2,
     y: rect.top + rect.height / 2
 } : {
@@ -380,37 +741,37 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
     y: 0
 }, calculateMouseInfluence = mouseOffset => {
     if (!mouseOffset || "number" != typeof mouseOffset.x || "number" != typeof mouseOffset.y) return 0;
-    // Bounded calculation — keeps the glass effect subtle and stable
-        const influence = Math.sqrt(mouseOffset.x * mouseOffset.x + mouseOffset.y * mouseOffset.y) / CONSTANTS$2.MOUSE_INFLUENCE_DIVISOR;
+    // Clamp influence to keep mouse response subtle and stable.
+        const influence = Math.sqrt(mouseOffset.x * mouseOffset.x + mouseOffset.y * mouseOffset.y) / CONSTANTS$3.MOUSE_INFLUENCE_DIVISOR;
     return Math.min(.8, influence);
  // Tighter cap to prevent blur/filter blow-out
-}, clampBlur = value => "number" != typeof value || isNaN(value) ? CONSTANTS$2.MIN_BLUR : Math.max(CONSTANTS$2.MIN_BLUR, Math.min(50, value)), validateGlassSize = size => size && "number" == typeof size.width && "number" == typeof size.height && size.width > 0 && size.height > 0 && size.width <= CONSTANTS$2.MAX_SIZE && size.height <= CONSTANTS$2.MAX_SIZE, parseBorderRadiusValue = value => {
+}, clampBlur = value => "number" != typeof value || isNaN(value) ? CONSTANTS$3.MIN_BLUR : Math.max(CONSTANTS$3.MIN_BLUR, Math.min(50, value)), validateGlassSize = size => size && "number" == typeof size.width && "number" == typeof size.height && size.width > 0 && size.height > 0 && size.width <= CONSTANTS$3.MAX_SIZE && size.height <= CONSTANTS$3.MAX_SIZE, parseBorderRadiusValue = value => {
     if ("number" == typeof value) return Math.max(0, value);
-    if ("string" != typeof value || !value.trim()) return CONSTANTS$2.DEFAULT_CORNER_RADIUS;
+    if ("string" != typeof value || !value.trim()) return CONSTANTS$3.DEFAULT_CORNER_RADIUS;
     const trimmedValue = value.trim();
     // Handle px values
         if (trimmedValue.endsWith("px")) {
         const parsed = parseFloat(trimmedValue);
-        return isNaN(parsed) ? CONSTANTS$2.DEFAULT_CORNER_RADIUS : Math.max(0, parsed);
+        return isNaN(parsed) ? CONSTANTS$3.DEFAULT_CORNER_RADIUS : Math.max(0, parsed);
     }
     // Handle rem values (assume 16px = 1rem)
         if (trimmedValue.endsWith("rem")) {
         const parsed = parseFloat(trimmedValue);
-        return isNaN(parsed) ? CONSTANTS$2.DEFAULT_CORNER_RADIUS : Math.max(0, 16 * parsed);
+        return isNaN(parsed) ? CONSTANTS$3.DEFAULT_CORNER_RADIUS : Math.max(0, 16 * parsed);
     }
     // Handle em values (assume 16px = 1em for simplicity)
         if (trimmedValue.endsWith("em")) {
         const parsed = parseFloat(trimmedValue);
-        return isNaN(parsed) ? CONSTANTS$2.DEFAULT_CORNER_RADIUS : Math.max(0, 16 * parsed);
+        return isNaN(parsed) ? CONSTANTS$3.DEFAULT_CORNER_RADIUS : Math.max(0, 16 * parsed);
     }
     // Handle percentage (convert to approximate px value, assuming 200px container)
         if (trimmedValue.endsWith("%")) {
         const parsed = parseFloat(trimmedValue);
-        return isNaN(parsed) ? CONSTANTS$2.DEFAULT_CORNER_RADIUS : Math.max(0, parsed / 100 * 200);
+        return isNaN(parsed) ? CONSTANTS$3.DEFAULT_CORNER_RADIUS : Math.max(0, parsed / 100 * 200);
     }
     // Handle unitless numbers
         const numValue = parseFloat(trimmedValue);
-    return isNaN(numValue) ? CONSTANTS$2.DEFAULT_CORNER_RADIUS : Math.max(0, numValue);
+    return isNaN(numValue) ? CONSTANTS$3.DEFAULT_CORNER_RADIUS : Math.max(0, numValue);
 }, extractBorderRadiusFromElement = element => {
     if (!element || !element.props) return null;
     // Check inline styles first (highest priority)
@@ -426,11 +787,11 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
     // If element has children, recursively check them
         if (element.props.children) {
         const childRadius = extractBorderRadiusFromChildren(element.props.children);
-        if (childRadius > 0 && childRadius !== CONSTANTS$2.DEFAULT_CORNER_RADIUS) return childRadius;
+        if (childRadius > 0 && childRadius !== CONSTANTS$3.DEFAULT_CORNER_RADIUS) return childRadius;
     }
     return null;
 }, extractBorderRadiusFromChildren = children => {
-    if (!children) return CONSTANTS$2.DEFAULT_CORNER_RADIUS;
+    if (!children) return CONSTANTS$3.DEFAULT_CORNER_RADIUS;
     try {
         const childArray = React.Children.toArray(children);
         for (let i = 0; i < childArray.length; i++) {
@@ -443,17 +804,78 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
     } catch (error) {
         // Silently handle errors
     }
-    return CONSTANTS$2.DEFAULT_CORNER_RADIUS;
+    return CONSTANTS$3.DEFAULT_CORNER_RADIUS;
 }, smoothstep = t => {
     const clamped = Math.max(0, Math.min(1, t));
     return clamped * clamped * (3 - 2 * clamped);
-}, lerp$1 = (a, b, t) => a + (b - a) * t, softClamp = (value, max) => max <= 0 ? 0 : max * (1 - Math.exp(-value / max)), calculateSpring = (current, target, velocity, stiffness = .1, damping = .8) => {
+}, lerp = (a, b, t) => a + (b - a) * t, softClamp = (value, max) => max <= 0 ? 0 : max * (1 - Math.exp(-value / max)), clamp = (value, min, max) => "number" != typeof value || isNaN(value) ? min : Math.max(min, Math.min(max, value)), smoothstepEdge = (edge0, edge1, x) => "number" != typeof edge0 || "number" != typeof edge1 || "number" != typeof x ? 0 : smoothstep((x - edge0) / (edge1 - edge0)), easeInOutCubic = t => {
+    if ("number" != typeof t || isNaN(t)) return 0;
+    const clamped = Math.max(0, Math.min(1, t));
+    return clamped < .5 ? 4 * clamped * clamped * clamped : 1 - Math.pow(-2 * clamped + 2, 3) / 2;
+}, easeOutQuart = t => {
+    if ("number" != typeof t || isNaN(t)) return 0;
+    const clamped = Math.max(0, Math.min(1, t));
+    return 1 - Math.pow(1 - clamped, 4);
+}, vec2Length = (x, y) => {
+    if ("number" != typeof x || "number" != typeof y || isNaN(x) || isNaN(y)) return 0;
+    const maxComponent = Math.max(Math.abs(x), Math.abs(y));
+    if (0 === maxComponent) return 0;
+    const scaledX = x / maxComponent, scaledY = y / maxComponent;
+    return maxComponent * Math.sqrt(scaledX * scaledX + scaledY * scaledY);
+}, getInteractionIntensity = (isHovered, isActive) => ({
+    hoverIntensity: isHovered ? CONSTANTS$3.INTERACTION.HOVER_INTENSITY : 1,
+    activeIntensity: isActive ? CONSTANTS$3.INTERACTION.ACTIVE_INTENSITY : 1
+})
+/**
+ * Spring-damper integration helper
+ * Calculates the next value based on velocity, stiffness, and damping.
+ */ , calculateSpring = (current, target, velocity, stiffness = .1, damping = .8) => {
     const newVelocity = (velocity + (target - current) * stiffness) * damping;
     return {
         value: current + newVelocity,
         velocity: newVelocity
     };
-}, getDisplacementMap = (mode, displacementMap, polarDisplacementMap, prominentDisplacementMap, shaderMapUrl) => {
+};
+
+/**
+ * Calculate element center from bounding rect
+ */
+/**
+ * Normalizes a layout inset for use in CSS custom properties.
+ *
+ * @param value - Raw inset from `style` (number, px string, or `auto`).
+ * @param fallback - Value used when `value` is undefined.
+ */
+function formatGlassInsetValue(value, fallback = "auto") {
+    return void 0 === value ? "number" == typeof fallback ? `${fallback}px` : String(fallback) : "auto" === value ? "auto" : "number" == typeof value ? `${value}px` : value;
+}
+
+/**
+ * Determines whether the glass should use fixed/sticky layout semantics.
+ *
+ * @param explicit - Value of the `isFixedOrSticky` prop.
+ * @param position - `position` from the consumer `style` object.
+ */
+/** Coerces a value to a finite number, returning `fallback` when invalid. */
+function toSafeNumber(value, fallback = 0) {
+    return "number" != typeof value || isNaN(value) ? fallback : value;
+}
+
+/**
+ * Calculates the target frame rate for shader time-animation loops.
+ *
+ * Balances visual quality against distortion complexity and `animationSpeed`.
+ */
+/**
+ * Computes per-channel displacement scale for the SVG chromatic-aberration filter.
+ */
+function getChromaticDisplacementScale(mode, displacementScale, aberrationIntensity, channelFactor) {
+    return displacementScale * (("shader" === mode ? 1 : -1) - aberrationIntensity * channelFactor);
+}
+
+/**
+ * Get displacement map URL based on mode
+ */ const getDisplacementMap = (mode, displacementMap, polarDisplacementMap, prominentDisplacementMap, shaderMapUrl) => {
     switch (mode) {
       case "standard":
         return displacementMap;
@@ -470,13 +892,28 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
       default:
         return console.warn("AtomixGlass: Invalid displacement mode"), displacementMap;
     }
-}, sharedShaderCache = new Map, GlassFilterComponent = ({id: id, displacementScale: displacementScale, aberrationIntensity: aberrationIntensity, mode: mode, shaderMapUrl: shaderMapUrl, blurAmount: blurAmount}) => jsx("svg", {
-    style: {
-        position: "absolute",
-        width: "100%",
-        height: "100%",
-        inset: 0
-    },
+}, sharedShaderCache = new Map, CHROMATIC_CHANNELS = [ {
+    result: "RED_DISPLACED",
+    channelResult: "RED_CHANNEL",
+    aberrationFactor: 0,
+    colorMatrix: "1 0 0 0 0\n0 0 0 0 0\n0 0 0 0 0\n0 0 0 1 0"
+}, {
+    result: "GREEN_DISPLACED",
+    channelResult: "GREEN_CHANNEL",
+    aberrationFactor: .02,
+    colorMatrix: "0 0 0 0 0\n0 1 0 0 0\n0 0 0 0 0\n0 0 0 1 0"
+}, {
+    result: "BLUE_DISPLACED",
+    channelResult: "BLUE_CHANNEL",
+    aberrationFactor: .03,
+    colorMatrix: "0 0 0 0 0\n0 0 0 0 0\n0 0 1 0 0\n0 0 0 1 0"
+} ], FILTER_SVG_STYLE = {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    inset: 0
+}, GlassFilterComponent = ({id: id, displacementScale: displacementScale, aberrationIntensity: aberrationIntensity, mode: mode, shaderMapUrl: shaderMapUrl, blurAmount: blurAmount}) => jsx("svg", {
+    style: FILTER_SVG_STYLE,
     "aria-hidden": "true",
     children: jsxs("defs", {
         children: [ jsxs("radialGradient", {
@@ -530,43 +967,21 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
                 dx: "0",
                 dy: "0",
                 result: "CENTER_ORIGINAL"
-            }), jsx("feDisplacementMap", {
-                in: "SourceGraphic",
-                in2: "DISPLACEMENT_MAP",
-                scale: displacementScale * ("shader" === mode ? 1 : -1),
-                xChannelSelector: "R",
-                yChannelSelector: "B",
-                result: "RED_DISPLACED"
-            }), jsx("feColorMatrix", {
-                in: "RED_DISPLACED",
-                type: "matrix",
-                values: "1 0 0 0 0\n                 0 0 0 0 0\n                 0 0 0 0 0\n                 0 0 0 1 0",
-                result: "RED_CHANNEL"
-            }), jsx("feDisplacementMap", {
-                in: "SourceGraphic",
-                in2: "DISPLACEMENT_MAP",
-                scale: displacementScale * (("shader" === mode ? 1 : -1) - .02 * aberrationIntensity),
-                xChannelSelector: "R",
-                yChannelSelector: "B",
-                result: "GREEN_DISPLACED"
-            }), jsx("feColorMatrix", {
-                in: "GREEN_DISPLACED",
-                type: "matrix",
-                values: "0 0 0 0 0\n                 0 1 0 0 0\n                 0 0 0 0 0\n                 0 0 0 1 0",
-                result: "GREEN_CHANNEL"
-            }), jsx("feDisplacementMap", {
-                in: "SourceGraphic",
-                in2: "DISPLACEMENT_MAP",
-                scale: displacementScale * (("shader" === mode ? 1 : -1) - .03 * aberrationIntensity),
-                xChannelSelector: "R",
-                yChannelSelector: "B",
-                result: "BLUE_DISPLACED"
-            }), jsx("feColorMatrix", {
-                in: "BLUE_DISPLACED",
-                type: "matrix",
-                values: "0 0 0 0 0\n                 0 0 0 0 0\n                 0 0 1 0 0\n                 0 0 0 1 0",
-                result: "BLUE_CHANNEL"
-            }), jsx("feBlend", {
+            }), CHROMATIC_CHANNELS.map((channel => jsxs(React.Fragment, {
+                children: [ jsx("feDisplacementMap", {
+                    in: "SourceGraphic",
+                    in2: "DISPLACEMENT_MAP",
+                    scale: getChromaticDisplacementScale(mode, displacementScale, aberrationIntensity, channel.aberrationFactor),
+                    xChannelSelector: "R",
+                    yChannelSelector: "B",
+                    result: channel.result
+                }), jsx("feColorMatrix", {
+                    in: channel.result,
+                    type: "matrix",
+                    values: channel.colorMatrix,
+                    result: channel.channelResult
+                }) ]
+            }, channel.channelResult))), jsx("feBlend", {
                 in: "GREEN_CHANNEL",
                 in2: "BLUE_CHANNEL",
                 mode: "screen",
@@ -606,20 +1021,23 @@ import { Pause, Play, SkipBack, SkipForward, SpeakerX, SpeakerHigh, Gear, Downlo
     })
 });
 
-GlassFilterComponent.displayName = "GlassFilter";
+/**
+ * Module-level LRU cache for shader displacement maps.
+ *
+ * Shared across all `AtomixGlassContainer` instances so identical size and
+ * variant combinations are generated once.
+ */ GlassFilterComponent.displayName = "GlassFilter";
 
-// Memoize component to prevent unnecessary re-renders
+/** Shallow prop comparison to avoid redundant SVG filter regeneration. */
 const GlassFilter =  memo(GlassFilterComponent, ((prevProps, nextProps) => prevProps.id === nextProps.id && prevProps.displacementScale === nextProps.displacementScale && prevProps.aberrationIntensity === nextProps.aberrationIntensity && prevProps.mode === nextProps.mode && prevProps.shaderMapUrl === nextProps.shaderMapUrl && prevProps.blurAmount === nextProps.blurAmount)), AtomixGlassContainer =  forwardRef((({children: children, className: className = "", style: style, displacementScale: displacementScale = 25, blurAmount: blurAmount = .0625, saturation: saturation = 180, aberrationIntensity: aberrationIntensity = 2, mouseOffset: mouseOffset = {
     x: 0,
     y: 0
-}, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, isActive: isActive = !1, overLight: overLight = !1, overLightConfig: overLightConfig = {}, borderRadius: borderRadius = 0, padding: padding = "0 0", glassSize: glassSize = {
+}, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseDown: onMouseDown, onMouseUp: onMouseUp, isActive: isActive = !1, overLight: overLight = !1, overLightConfig: overLightConfig = {}, borderRadius: borderRadius = 0, glassSize: glassSize = {
     width: 0,
     height: 0
-}, onClick: onClick, mode: mode = "standard", effectiveWithoutEffects: effectiveWithoutEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", withLiquidBlur: withLiquidBlur = !1, isFixedOrSticky: isFixedOrSticky = !1, 
-// Phase 1: Animation System props
-shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpeed: animationSpeed = 1, withMultiLayerDistortion: withMultiLayerDistortion = !1, distortionOctaves: distortionOctaves = 3, distortionLacunarity: distortionLacunarity = 2, distortionGain: distortionGain = .5, distortionQuality: distortionQuality = "medium", contentRef: contentRef}, ref) => {
+}, onClick: onClick, mode: mode = "standard", effectiveWithoutEffects: effectiveWithoutEffects = !1, effectiveReducedMotion: effectiveReducedMotion = !1, shaderVariant: shaderVariant = "liquidGlass", withLiquidBlur: withLiquidBlur = !1, isFixedOrSticky: isFixedOrSticky = !1, withTimeAnimation: withTimeAnimation = !1, animationSpeed: animationSpeed = 1, withMultiLayerDistortion: withMultiLayerDistortion = !1, distortionOctaves: distortionOctaves = 3, distortionLacunarity: distortionLacunarity = 2, distortionGain: distortionGain = .5, distortionQuality: distortionQuality = "medium", contentRef: contentRef}, ref) => {
     // React 18 useId — stable, unique, and SSR-safe (no module-level counter)
-    const rawId = useId(), filterId = useMemo((() => `atomix-glass-filter-${rawId.replace(/:/g, "")}`), [ rawId ]), [shaderMapUrl, setShaderMapUrl] = useState(""), shaderGeneratorRef = useRef(null), shaderUtilsRef = useRef(null), shaderDebounceTimeoutRef = useRef(null), shaderUpdateTimeoutRef = useRef(null), animationFrameRef = useRef(null);
+    const rawId = useId(), filterId = useMemo((() => `atomix-glass-filter-${rawId.replace(/:/g, "")}`), [ rawId ]), containerRef = useForkRef(ref, null), [shaderMapUrl, setShaderMapUrl] = useState(""), shaderGeneratorRef = useRef(null), shaderUtilsRef = useRef(null), shaderDebounceTimeoutRef = useRef(null), shaderUpdateTimeoutRef = useRef(null), animationFrameRef = useRef(null);
     // Lazy load shader utilities only when shader mode is needed
     useEffect((() => {
         "shader" === mode ? 
@@ -697,15 +1115,23 @@ shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpee
                 shaderGeneratorRef.current = null;
             }
         };
-    }), [ mode, glassSize, shaderVariant ]), 
-    // Phase 1: Time-Based Animation Loop - Continuous shader regeneration
-    useEffect((() => {
+    }), [ mode, glassSize, shaderVariant ]), useEffect((() => {
         // Only run animations in shader mode with time animation enabled
         if ("shader" !== mode || !withTimeAnimation || effectiveReducedMotion || effectiveWithoutEffects) 
         // Cancel any existing animation frame
         return void (null !== animationFrameRef.current && (cancelAnimationFrame(animationFrameRef.current), 
         animationFrameRef.current = null));
-        const baseFps = "ultra" === distortionQuality ? 60 : "high" === distortionQuality ? 30 : "medium" === distortionQuality ? 24 : 20, effectiveSpeed = Math.max(.5, Math.min(2, animationSpeed || 1)), complexity = withMultiLayerDistortion ? Math.max(1, (distortionOctaves || 3) / 3 + .25 * Math.max(0, (distortionLacunarity || 2) - 2) + Math.max(0, (distortionGain || .5) - .5)) : 1, frameInterval = 1e3 / Math.max(12, Math.min(60, Math.round(baseFps * effectiveSpeed / complexity)));
+        const targetFps = function(options) {
+            const {distortionQuality: distortionQuality, animationSpeed: animationSpeed = 1, withMultiLayerDistortion: withMultiLayerDistortion, distortionOctaves: distortionOctaves = 3, distortionLacunarity: distortionLacunarity = 2, distortionGain: distortionGain = .5} = options, baseFps = "ultra" === distortionQuality ? 60 : "high" === distortionQuality ? 30 : "medium" === distortionQuality ? 24 : 20, effectiveSpeed = Math.max(.5, Math.min(2, animationSpeed)), complexity = withMultiLayerDistortion ? Math.max(1, distortionOctaves / 3 + .25 * Math.max(0, distortionLacunarity - 2) + Math.max(0, distortionGain - .5)) : 1;
+            return Math.max(12, Math.min(60, Math.round(baseFps * effectiveSpeed / complexity)));
+        }({
+            distortionQuality: distortionQuality,
+            animationSpeed: animationSpeed,
+            withMultiLayerDistortion: withMultiLayerDistortion,
+            distortionOctaves: distortionOctaves,
+            distortionLacunarity: distortionLacunarity,
+            distortionGain: distortionGain
+        }), frameInterval = 1e3 / targetFps;
         let lastUpdate = 0, isCancelled = !1;
         const animate = currentTime => {
             if (!isCancelled) {
@@ -729,88 +1155,21 @@ shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpee
         };
     }), [ mode, withTimeAnimation, animationSpeed, displacementScale, withMultiLayerDistortion, distortionOctaves, distortionLacunarity, distortionGain, distortionQuality, effectiveReducedMotion, effectiveWithoutEffects, glassSize ]);
     // Removed forced reflow to avoid layout thrash and potential feedback sizing loops
-    const [rectCache, setRectCache] = useState(null);
-    useEffect((() => {
-        if (!ref || "function" == typeof ref) return;
-        const element = ref.current;
-        if (element) try {
-            setRectCache(element.getBoundingClientRect());
-        } catch (error) {
-            console.warn("AtomixGlassContainer: Error getting element bounds", error), setRectCache(null);
-        }
-    }), [ ref, glassSize ]);
-    const liquidBlur = useMemo((() => {
-        const defaultBlur = {
-            baseBlur: blurAmount,
-            edgeBlur: 1.25 * blurAmount,
-            centerBlur: 1.1 * blurAmount,
-            flowBlur: 1.2 * blurAmount
-        };
-        // Enhanced validation for liquid blur
-                if (!withLiquidBlur || !rectCache || !mouseOffset || "number" != typeof mouseOffset.x || "number" != typeof mouseOffset.y || isNaN(mouseOffset.x) || isNaN(mouseOffset.y)) return defaultBlur;
-        try {
-            const mouseInfluence = calculateMouseInfluence(mouseOffset), maxBlur = 2 * blurAmount, baseBlur = Math.min(maxBlur, blurAmount + mouseInfluence * blurAmount * .15), edgeIntensity = .15 * mouseInfluence, edgeBlur = Math.min(maxBlur, baseBlur * (.8 + .4 * edgeIntensity)), centerIntensity = .1 * mouseInfluence, centerBlur = Math.min(maxBlur, baseBlur * (.3 + .3 * centerIntensity)), flowBlur = Math.min(maxBlur, 1.2 * baseBlur);
-            // NOTE: hover/active multipliers intentionally omitted here —
-            // they belong on opacity layers, not the blur filter itself.
-            return {
-                baseBlur: clampBlur(baseBlur),
-                edgeBlur: clampBlur(edgeBlur),
-                centerBlur: clampBlur(centerBlur),
-                flowBlur: clampBlur(flowBlur)
-            };
-        } catch (error) {
-            return console.warn("AtomixGlassContainer: Error calculating liquid blur", error), 
-            defaultBlur;
-        }
-    }), [ withLiquidBlur, blurAmount, mouseOffset, rectCache ]), backdropStyle = useMemo((() => {
-        try {
-            const dynamicSaturation = saturation + 20 * (liquidBlur.baseBlur || 0), validatedBaseBlur = "number" != typeof liquidBlur.baseBlur || isNaN(liquidBlur.baseBlur) ? 0 : liquidBlur.baseBlur, validatedEdgeBlur = "number" != typeof liquidBlur.edgeBlur || isNaN(liquidBlur.edgeBlur) ? 0 : liquidBlur.edgeBlur, validatedCenterBlur = "number" != typeof liquidBlur.centerBlur || isNaN(liquidBlur.centerBlur) ? 0 : liquidBlur.centerBlur, validatedFlowBlur = "number" != typeof liquidBlur.flowBlur || isNaN(liquidBlur.flowBlur) ? 0 : liquidBlur.flowBlur, area = rectCache ? rectCache.width * rectCache.height : 0;
-            // Validate blur values before using them
-                        return !withLiquidBlur || effectiveReducedMotion || effectiveWithoutEffects || area > 18e4 ? {
-                backdropFilter: `blur(${clampBlur(Math.max(validatedBaseBlur, .8 * validatedEdgeBlur, 1.1 * validatedCenterBlur, .9 * validatedFlowBlur))}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig?.contrast || 1.05}) brightness(${overLightConfig?.brightness || 1.05})`
-            } : {
-                backdropFilter: `blur(${clampBlur(.4 * validatedBaseBlur + .25 * validatedEdgeBlur + .15 * validatedCenterBlur + .2 * validatedFlowBlur)}px) saturate(${Math.min(dynamicSaturation, 200)}%) contrast(${overLightConfig?.contrast || 1}) brightness(${overLightConfig?.brightness || 1})`
-            };
-            // Single-pass fallback: stronger radius to match perceived blur of multi-pass
-                } catch (error) {
-            return console.warn("AtomixGlassContainer: Error calculating backdrop style", error), 
-            {
-                backdropFilter: `blur(${blurAmount}px) saturate(${saturation}%) contrast(1.05) brightness(1.05)`
-            };
-        }
-    }), [ liquidBlur, saturation, blurAmount, rectCache, effectiveReducedMotion, effectiveWithoutEffects, withLiquidBlur, overLightConfig ]), containerVars = useMemo((() => {
+    const containerVars = useMemo((() => {
         try {
-            // Safe extraction of mouse offset values
-            const mx = mouseOffset && "number" == typeof mouseOffset.x && !isNaN(mouseOffset.x) ? mouseOffset.x : 0, my = mouseOffset && "number" == typeof mouseOffset.y && !isNaN(mouseOffset.y) ? mouseOffset.y : 0;
             return {
-                "--atomix-glass-container-radius": `${"number" != typeof borderRadius || isNaN(borderRadius) ? 0 : borderRadius}px`,
-                "--atomix-glass-container-backdrop": backdropStyle?.backdropFilter || "none",
-                "--atomix-glass-container-shadow": overLight ? [ `inset 0 1px 0 rgba(255, 255, 255, ${(.4 + .002 * mx) * (overLightConfig?.shadowIntensity || 1)})`, `inset 0 -1px 0 rgba(0, 0, 0, ${(.2 + .001 * Math.abs(my)) * (overLightConfig?.shadowIntensity || 1)})`, `inset 0 0 20px rgba(0, 0, 0, ${(.08 + .001 * Math.abs(mx + my)) * (overLightConfig?.shadowIntensity || 1)})`, `0 2px 12px rgba(0, 0, 0, ${(.12 + .002 * Math.abs(my)) * (overLightConfig?.shadowIntensity || 1)})` ].join(", ") : "0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset",
-                "--atomix-glass-container-shadow-opacity": effectiveWithoutEffects ? 0 : 1,
-                // Background and shadow values use design token-aligned RGB values
-                "--atomix-glass-container-bg": overLight ? `linear-gradient(${180 + .5 * mx}deg, rgba(255, 255, 255, 0.1) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.05) 100%)` : "none",
-                "--atomix-glass-container-text-shadow": overLight ? "0px 1px 2px rgba(255, 255, 255, 0.15)" : "0px 2px 12px rgba(0, 0, 0, 0.4)",
-                "--atomix-glass-container-box-shadow": overLight ? "0px 16px 70px rgba(0, 0, 0, 0.75)" : "0px 12px 40px rgba(0, 0, 0, 0.25)"
+                "--atomix-glass-container-radius": `${"number" != typeof borderRadius || isNaN(borderRadius) ? 0 : borderRadius}px`
             };
         } catch (error) {
             return console.warn("AtomixGlassContainer: Error generating container variables", error), 
             {
-                "--atomix-glass-container-padding": "0 0",
-                "--atomix-glass-container-radius": "0px",
-                "--atomix-glass-container-backdrop": "none",
-                "--atomix-glass-container-shadow": "none",
-                "--atomix-glass-container-shadow-opacity": 1,
-                "--atomix-glass-container-bg": "none",
-                "--atomix-glass-container-text-shadow": "none"
+                "--atomix-glass-container-radius": "0px"
             };
         }
-    }), [ borderRadius, backdropStyle, mouseOffset, overLight, effectiveWithoutEffects, overLightConfig ]);
+    }), [ borderRadius ]);
     return jsx("div", {
-        ref: el => {
-            // Handle forwarded ref
-            "function" == typeof ref ? ref(el) : ref && (ref.current = el);
-        },
-        className: `${ATOMIX_GLASS.CONTAINER_CLASS} ${className} ${isActive ? ATOMIX_GLASS.CLASSES.ACTIVE : ""} ${overLight ? ATOMIX_GLASS.CLASSES.OVER_LIGHT : ""}`,
+        ref: containerRef,
+        className: mergeClassNames(ATOMIX_GLASS.CONTAINER_CLASS, className, isActive && ATOMIX_GLASS.CLASSES.ACTIVE, overLight && ATOMIX_GLASS.CLASSES.OVER_LIGHT),
         style: {
             ...style,
             ...containerVars
@@ -828,8 +1187,8 @@ shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpee
                     blurAmount: blurAmount,
                     mode: mode,
                     id: filterId,
-                    displacementScale: "number" != typeof displacementScale || isNaN(displacementScale) ? 0 : displacementScale,
-                    aberrationIntensity: "number" != typeof aberrationIntensity || isNaN(aberrationIntensity) ? 0 : aberrationIntensity,
+                    displacementScale: toSafeNumber(displacementScale),
+                    aberrationIntensity: toSafeNumber(aberrationIntensity),
                     shaderMapUrl: shaderMapUrl
                 }), jsx("div", {
                     className: ATOMIX_GLASS.FILTER_OVERLAY_CLASS,
@@ -851,8 +1210,12 @@ shaderTime: shaderTime, withTimeAnimation: withTimeAnimation = !1, animationSpee
     });
 }));
 
-// ─── Blur multiplier constants (module-level, never change at runtime) ────────
-AtomixGlassContainer.displayName = "AtomixGlassContainer";
+/**
+ * Internal glass surface that owns backdrop-filter, SVG distortion, and content.
+ *
+ * Layout and stacking styles are applied via the `style` prop from the parent.
+ * The root wrapper supplies CSS custom properties only.
+ */ AtomixGlassContainer.displayName = "AtomixGlassContainer";
 
 // Singleton instance
 const globalMouseTracker = new 
@@ -967,28 +1330,32 @@ class {
    */    getSubscriberCount() {
         return this.listeners.size;
     }
-}, updateAtomixGlassStyles = (wrapperElement, containerElement, params) => {
+}, {BORDER: BORDER, CONSTANTS: CONSTANTS$2} = ATOMIX_GLASS, BORDER_GRADIENT = BORDER.GRADIENT, WHITE = CONSTANTS$2.PALETTE.WHITE, updateAtomixGlassStyles = (wrapperElement, containerElement, params) => {
     if (!wrapperElement && !containerElement) return;
     if (!validateGlassSize(params.glassSize)) return;
-    const {mouseOffset: mouseOffset, globalMousePosition: globalMousePosition, glassSize: glassSize, isHovered: isHovered, isActive: isActive, isOverLight: isOverLight, baseOverLightConfig: baseOverLightConfig, effectiveBorderRadius: effectiveBorderRadius, effectiveWithoutEffects: effectiveWithoutEffects, effectiveReducedMotion: effectiveReducedMotion, elasticity: elasticity, elasticTranslation: elasticTranslation, elasticVelocity: elasticVelocity, mouseVelocity: mouseVelocity, directionalScale: directionalScale, scaleBase: scaleBase, onClick: onClick, withLiquidBlur: withLiquidBlur, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING, isFixedOrSticky: isFixedOrSticky = !1} = params, mouseInfluence = calculateMouseInfluence(mouseOffset), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1, overLightConfig = {
+    const {mouseOffset: mouseOffset, globalMousePosition: globalMousePosition, glassSize: glassSize, isHovered: isHovered, isActive: isActive, isOverLight: isOverLight, baseOverLightConfig: baseOverLightConfig, effectiveBorderRadius: effectiveBorderRadius, effectiveWithoutEffects: effectiveWithoutEffects, effectiveReducedMotion: effectiveReducedMotion, elasticity: elasticity, elasticTranslation: elasticTranslation, elasticVelocity: elasticVelocity, mouseVelocity: mouseVelocity, directionalScale: directionalScale, scaleBase: scaleBase, onClick: onClick, withLiquidBlur: withLiquidBlur, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, isFixedOrSticky: isFixedOrSticky = !1, borderAnimated: borderAnimated = !0, borderOpacityMultiplier: borderOpacityMultiplier = 1} = params, mouseInfluence = calculateMouseInfluence(mouseOffset), {hoverIntensity: hoverIntensity, activeIntensity: activeIntensity} = getInteractionIntensity(isHovered, isActive), overLightConfig = {
         opacity: baseOverLightConfig.opacity * hoverIntensity * activeIntensity,
         contrast: Math.min(1.6, baseOverLightConfig.contrast + .1 * mouseInfluence),
         brightness: Math.min(1.1, baseOverLightConfig.brightness + .05 * mouseInfluence),
         shadowIntensity: Math.min(1.2, Math.max(.5, baseOverLightConfig.shadowIntensity + .2 * mouseInfluence)),
         borderOpacity: Math.min(1, Math.max(.3, baseOverLightConfig.borderOpacity + .1 * mouseInfluence)),
         saturationBoost: baseOverLightConfig.saturationBoost
-    }, scaleX = directionalScale.x * scaleBase, scaleY = directionalScale.y * scaleBase, transformStyle = effectiveWithoutEffects ? `scale(${scaleBase})` : `translate(${elasticTranslation.x}px, ${elasticTranslation.y}px) scaleX(${scaleX}) scaleY(${scaleY})`, stretchMagnitude = ((pos1, pos2) => {
-        if (!pos1 || !pos2 || "number" != typeof pos1.x || "number" != typeof pos1.y || "number" != typeof pos2.x || "number" != typeof pos2.y) return 0;
-        const deltaX = pos1.x - pos2.x, deltaY = pos1.y - pos2.y;
-        return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-    })({
-        x: 0,
-        y: 0
-    }, elasticTranslation), tensionFactor = smoothstep(stretchMagnitude / 80), lightingContrast = Math.min(1.8, overLightConfig.contrast + .2 * tensionFactor), lightingBrightness = Math.min(1.2, overLightConfig.brightness + .1 * tensionFactor);
+    }, scaleX = directionalScale.x * scaleBase, scaleY = directionalScale.y * scaleBase, transformStyle = effectiveWithoutEffects ? `scale(${scaleBase})` : `translate(${elasticTranslation.x}px, ${elasticTranslation.y}px) scaleX(${scaleX}) scaleY(${scaleY})`, tensionFactor = 
+    /**
+ * Computes tension factor from elastic translation magnitude (0–1).
+ */
+    function(elasticTranslation) {
+        const magnitude = Math.hypot(elasticTranslation.x, elasticTranslation.y);
+        return smoothstep(magnitude / 80);
+    }
+    /**
+ * Updates the styles of the AtomixGlass wrapper and container elements imperatively
+ * to avoid React re-renders on mouse movement.
+ */ (elasticTranslation), lightingContrast = Math.min(1.8, overLightConfig.contrast + .2 * tensionFactor), lightingBrightness = Math.min(1.2, overLightConfig.brightness + .1 * tensionFactor);
     // Calculate mouse influence
         // Update Wrapper Styles (glassVars)
     if (wrapperElement) {
-        const mx = mouseOffset.x, my = mouseOffset.y, absMx = Math.abs(mx), absMy = Math.abs(my), GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT, velocityRotation = (mouseVelocity.x + elasticVelocity.x) * (GRADIENT.VELOCITY_ANGLE_MULTIPLIER || 2.5), borderGradientAngle = GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER + velocityRotation, chromaticOffset = GRADIENT.CHROMATIC_OFFSET || 1.5, angleR = borderGradientAngle - chromaticOffset, angleB = borderGradientAngle + chromaticOffset, borderStop1 = Math.max(GRADIENT.BORDER_STOP_1.MIN, GRADIENT.BORDER_STOP_1.BASE + my * GRADIENT.BORDER_STOP_1.MULTIPLIER), borderStop2 = Math.min(GRADIENT.BORDER_STOP_2.MAX, GRADIENT.BORDER_STOP_2.BASE + my * GRADIENT.BORDER_STOP_2.MULTIPLIER), tensionGlow = 1 + .5 * tensionFactor, borderOpacities = [ (GRADIENT.BORDER_OPACITY.BASE_1 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW) * tensionGlow, (GRADIENT.BORDER_OPACITY.BASE_2 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH) * tensionGlow, (GRADIENT.BORDER_OPACITY.BASE_3 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW) * tensionGlow, (GRADIENT.BORDER_OPACITY.BASE_4 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH) * tensionGlow ], configBorderOpacity = overLightConfig.borderOpacity, whiteColor = ATOMIX_GLASS.CONSTANTS.PALETTE.WHITE, blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK, hoverPositions = {
+        const mx = mouseOffset.x, my = mouseOffset.y, absMx = Math.abs(mx), absMy = Math.abs(my), GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT, whiteColor = ATOMIX_GLASS.CONSTANTS.PALETTE.WHITE, blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK, hoverPositions = {
             hover1: {
                 x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_1,
                 y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_1
@@ -1005,28 +1372,55 @@ class {
             x: GRADIENT.CENTER_POSITION + mx * GRADIENT.BASE_LAYER_MULTIPLIER,
             y: GRADIENT.CENTER_POSITION + my * GRADIENT.BASE_LAYER_MULTIPLIER
         }, opacityValues = {
-            hover1: isHovered || isActive ? .5 : 0,
-            hover2: isActive ? .5 : 0,
-            hover3: isHovered ? .4 : isActive ? .8 : 0,
-            base: isOverLight ? overLightConfig.opacity : 0,
-            over: isOverLight ? 1.1 * overLightConfig.opacity : 0
+            // hover-1: ambient highlight glow — present on hover and during press
+            hover1: isHovered || isActive ? 1 : 0,
+            // hover-2: press depth shadow — only fires on active (mousedown)
+            hover2: isActive ? 1 : 0,
+            // hover-3: global soft-light surface shift — half-strength on hover, full on press
+            hover3: isActive ? 1 : isHovered ? .55 : 0,
+            // Dark chrome: faint smoky tint; over-light keeps stronger fill
+            base: isOverLight ? overLightConfig.opacity : .14,
+            over: isOverLight ? 1.1 * overLightConfig.opacity : .1
         }, style = wrapperElement.style;
         style.setProperty("--atomix-glass-transform", transformStyle || "none");
         // Parallax for content (liquid refraction feel)
         const parallaxFactor = .38 + .12 * tensionFactor;
         style.setProperty("--atomix-glass-child-parallax", `translate(${elasticTranslation.x * -parallaxFactor}px, ${elasticTranslation.y * -parallaxFactor}px)`), 
-        style.setProperty("--atomix-glass-contrast", lightingContrast.toString()), style.setProperty("--atomix-glass-brightness", lightingBrightness.toString()), 
+        style.setProperty("--atomix-glass-contrast", lightingContrast.toString()), style.setProperty("--atomix-glass-brightness", lightingBrightness.toString());
         // ── Chromatic Rim Lighting ──────────────────────────────────────
-        // Layer 1: Core White/Blue highlight
-        style.setProperty("--atomix-glass-border-gradient-1", `linear-gradient(${angleB}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[0] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[1] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`), 
-        // Layer 2: Subtle Red/Warm highlight (offset angle)
-        style.setProperty("--atomix-glass-border-gradient-2", `linear-gradient(${angleR}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[2] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[3] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`), 
-        // Hover gradients
-        style.setProperty("--atomix-glass-hover-1-gradient", isOverLight ? `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_STOP}%)`), 
-        style.setProperty("--atomix-glass-hover-2-gradient", isOverLight ? `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_STOP}%)`), 
-        style.setProperty("--atomix-glass-hover-3-gradient", isOverLight ? `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_STOP}%)`), 
-        style.setProperty("--atomix-glass-base-gradient", isOverLight ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + mx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_BASE + my * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_MULTIPLIER}) ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + absMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`), 
-        style.setProperty("--atomix-glass-overlay-gradient", isOverLight ? `radial-gradient(circle at ${basePosition.x}% ${basePosition.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + absMx * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + absMy * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`), 
+        const borderVars = ATOMIX_GLASS.BORDER.GRADIENT_CSS_VARS;
+        if (borderAnimated && !effectiveWithoutEffects) {
+            const borderCssVars = 
+            /**
+ * Builds animated chromatic rim CSS variables for border layers 1 and 2.
+ * When empty, SCSS static conic/linear fallbacks apply.
+ */
+            function(params) {
+                const {mouseOffset: mouseOffset, mouseVelocity: mouseVelocity, elasticVelocity: elasticVelocity, borderOpacity: borderOpacity, opacityMultiplier: opacityMultiplier = 1, tensionFactor: tensionFactor = 0} = params, mx = mouseOffset.x, my = mouseOffset.y, absMx = Math.abs(mx), velocityRotation = (mouseVelocity.x + elasticVelocity.x) * BORDER_GRADIENT.VELOCITY_ANGLE_MULTIPLIER, borderGradientAngle = BORDER_GRADIENT.BASE_ANGLE + mx * BORDER_GRADIENT.ANGLE_MULTIPLIER + velocityRotation, chromaticOffset = BORDER_GRADIENT.CHROMATIC_OFFSET, angleR = borderGradientAngle - chromaticOffset, angleB = borderGradientAngle + chromaticOffset, borderStop1 = Math.max(BORDER_GRADIENT.STOP_1.MIN, BORDER_GRADIENT.STOP_1.BASE + my * BORDER_GRADIENT.STOP_1.MULTIPLIER), borderStop2 = Math.min(BORDER_GRADIENT.STOP_2.MAX, BORDER_GRADIENT.STOP_2.BASE + my * BORDER_GRADIENT.STOP_2.MULTIPLIER), tensionGlow = 1 + .5 * tensionFactor, opacities = BORDER_GRADIENT.OPACITY, borderOpacities = [ (opacities.BASE_1 + absMx * opacities.MULTIPLIER_LOW) * tensionGlow, (opacities.BASE_2 + absMx * opacities.MULTIPLIER_HIGH) * tensionGlow, (opacities.BASE_3 + absMx * opacities.MULTIPLIER_LOW) * tensionGlow, (opacities.BASE_4 + absMx * opacities.MULTIPLIER_HIGH) * tensionGlow ], configBorderOpacity = borderOpacity * opacityMultiplier, gradient1 = `linear-gradient(${angleB}deg, rgba(${WHITE}, 0) 0%, rgba(${WHITE}, ${(borderOpacities[0] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${WHITE}, ${(borderOpacities[1] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${WHITE}, 0) 100%)`, gradient2 = `linear-gradient(${angleR}deg, rgba(${WHITE}, 0) 0%, rgba(${WHITE}, ${(borderOpacities[2] ?? 1) * configBorderOpacity}) ${borderStop1}%, rgba(${WHITE}, ${(borderOpacities[3] ?? 1) * configBorderOpacity}) ${borderStop2}%, rgba(${WHITE}, 0) 100%)`;
+                return {
+                    [BORDER.GRADIENT_CSS_VARS.GRADIENT_1]: gradient1,
+                    [BORDER.GRADIENT_CSS_VARS.GRADIENT_2]: gradient2
+                };
+            }({
+                mouseOffset: mouseOffset,
+                mouseVelocity: mouseVelocity,
+                elasticVelocity: elasticVelocity,
+                borderOpacity: overLightConfig.borderOpacity,
+                opacityMultiplier: borderOpacityMultiplier,
+                tensionFactor: tensionFactor
+            });
+            style.setProperty(borderVars.GRADIENT_1, borderCssVars[borderVars.GRADIENT_1] ?? ""), 
+            style.setProperty(borderVars.GRADIENT_2, borderCssVars[borderVars.GRADIENT_2] ?? "");
+        } else style.removeProperty(borderVars.GRADIENT_1), style.removeProperty(borderVars.GRADIENT_2);
+        // Hover gradients — cursor-relative radial positions for realistic light tracking.
+        // hover-1: white overlay highlight following cursor (works on both dark + light)
+                style.setProperty("--atomix-glass-hover-1-gradient", `radial-gradient(65% 55% at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${whiteColor}, 0.24) 0%, rgba(${whiteColor}, 0.06) 45%, rgba(${whiteColor}, 0) 72%)`), 
+        // hover-2: press depth — darkens at cursor with multiply blend, isOverLight uses stronger black
+        style.setProperty("--atomix-glass-hover-2-gradient", isOverLight ? `radial-gradient(60% 50% at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${blackColor}, 0.22) 0%, rgba(${blackColor}, 0.06) 50%, rgba(${blackColor}, 0) 72%)` : `radial-gradient(60% 50% at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${blackColor}, 0.18) 0%, rgba(${blackColor}, 0.04) 50%, rgba(${blackColor}, 0) 72%)`), 
+        // hover-3: full-surface soft-light tint; linear gradient angled with cursor X
+        style.setProperty("--atomix-glass-hover-3-gradient", `linear-gradient(${150 + .3 * mx}deg, rgba(${whiteColor}, ${isOverLight ? .08 : .12}) 0%, rgba(${whiteColor}, 0.04) 55%, rgba(${whiteColor}, 0) 100%)`), 
+        style.setProperty("--atomix-glass-base-gradient", isOverLight ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + mx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_BASE + my * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_MULTIPLIER}) ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + absMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `linear-gradient(180deg, rgba(${blackColor}, 0.42) 0%, rgba(${blackColor}, 0.22) 55%, rgba(${blackColor}, 0.12) 100%)`), 
+        style.setProperty("--atomix-glass-overlay-gradient", isOverLight ? `radial-gradient(circle at ${basePosition.x}% ${basePosition.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + absMx * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + absMy * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `radial-gradient(120% 80% at 50% 0%, rgba(${whiteColor}, 0.14) 0%, rgba(${whiteColor}, 0) 55%)`), 
         // Opacities
         style.setProperty("--atomix-glass-hover-1-opacity", opacityValues.hover1.toString()), 
         style.setProperty("--atomix-glass-hover-2-opacity", opacityValues.hover2.toString()), 
@@ -1063,151 +1457,16 @@ class {
         backdropFilterString = !withLiquidBlur || effectiveReducedMotion || effectiveWithoutEffects || area > 18e4 ? `blur(${clampBlur(Math.max(liquidBlur.baseBlur, .8 * liquidBlur.edgeBlur, 1.1 * liquidBlur.centerBlur, .9 * liquidBlur.flowBlur))}px) saturate(${Math.min(dynamicSaturation, 250)}%) contrast(${lightingContrast}) brightness(${lightingBrightness})` : `blur(${clampBlur(.4 * liquidBlur.baseBlur + .25 * liquidBlur.edgeBlur + .15 * liquidBlur.centerBlur + .2 * liquidBlur.flowBlur)}px) saturate(${Math.min(dynamicSaturation, 250)}%) contrast(${lightingContrast}) brightness(${lightingBrightness})`;
         // Container variables
                 const style = containerElement.style;
-        style.setProperty("--atomix-glass-container-padding", padding), style.setProperty("--atomix-glass-container-radius", `${effectiveBorderRadius}px`), 
+        style.setProperty("--atomix-glass-container-radius", `${effectiveBorderRadius}px`), 
         style.setProperty("--atomix-glass-container-backdrop", backdropFilterString), 
         // Shadows
-        style.setProperty("--atomix-glass-container-shadow", isOverLight ? [ `inset 0 1px 0 rgba(255, 255, 255, ${(.4 + .002 * mx) * (overLightConfig.shadowIntensity || 1)})`, `inset 0 -1px 0 rgba(0, 0, 0, ${(.2 + .001 * Math.abs(my)) * (overLightConfig.shadowIntensity || 1)})`, `inset 0 0 20px rgba(0, 0, 0, ${(.08 + .001 * Math.abs(mx + my)) * (overLightConfig.shadowIntensity || 1)})`, `0 2px 12px rgba(0, 0, 0, ${(.12 + .002 * Math.abs(my)) * (overLightConfig.shadowIntensity || 1)})` ].join(", ") : "0 0 20px rgba(0, 0, 0, 0.15) inset, 0 4px 8px rgba(0, 0, 0, 0.08) inset"), 
+        style.setProperty("--atomix-glass-container-shadow", isOverLight ? [ `inset 0 1px 0 rgba(255, 255, 255, ${(.35 + .002 * mx) * (overLightConfig.shadowIntensity || 1)})`, `inset 0 -1px 0 rgba(0, 0, 0, ${(.15 + .001 * Math.abs(my)) * (overLightConfig.shadowIntensity || 1)})`, `inset 0 0 20px rgba(0, 0, 0, ${(.06 + .001 * Math.abs(mx + my)) * (overLightConfig.shadowIntensity || 1)})`, `0 2px 12px rgba(0, 0, 0, ${(.08 + .002 * Math.abs(my)) * (overLightConfig.shadowIntensity || 1)})` ].join(", ") : ATOMIX_GLASS.CONSTANTS.CONTAINER_SHADOW.LIGHT), 
         style.setProperty("--atomix-glass-container-shadow-opacity", effectiveWithoutEffects ? "0" : "1"), 
         style.setProperty("--atomix-glass-container-bg", isOverLight ? `linear-gradient(${180 + .5 * mx}deg, rgba(255, 255, 255, 0.1) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.05) 100%)` : "none"), 
         style.setProperty("--atomix-glass-container-text-shadow", isOverLight ? "0px 1px 2px rgba(255, 255, 255, 0.15)" : "0px 2px 12px rgba(0, 0, 0, 0.4)"), 
-        style.setProperty("--atomix-glass-container-box-shadow", isOverLight ? "0px 16px 70px rgba(0, 0, 0, 0.75)" : "0px 12px 40px rgba(0, 0, 0, 0.25)");
+        style.setProperty("--atomix-glass-container-box-shadow", isOverLight ? "0px 16px 70px rgba(0, 0, 0, 0.75)" : "0 4px 16px rgba(0, 0, 0, 0.14), 0 1px 4px rgba(0, 0, 0, 0.10)");
     }
-};
-
-/**
- * Updates the styles of the AtomixGlass wrapper and container elements imperatively
- * to avoid React re-renders on mouse movement.
- */
-/**
- * Animation System for AtomixGlass Component
- *
- * Implements Phase 1 features from the AtomixGlass Feature Implementation Roadmap:
- * - Feature 1.1: Time-Based Animation System
- * - Feature 1.2: Multi-Layer Distortion System (FBM)
- *
- * @packageDocumentation
- */
-// ============================================================================
-// Noise Functions for FBM (Feature 1.2)
-// ============================================================================
-/**
- * Perlin noise implementation for smooth gradient noise
- *
- * @param x - X coordinate
- * @param y - Y coordinate
- * @returns Noise value in range [0, 1]
- */
-function perlinNoise(x, y) {
-    // Simplified Perlin noise using pseudo-random gradients
-    const X = 255 & Math.floor(x), Y = 255 & Math.floor(y), xf = x - Math.floor(x), yf = y - Math.floor(y), u = fade(xf), v = fade(yf), A = p[X] + Y & 255, B = p[X + 1] + Y & 255, ga = grad(p[A], xf, yf), gb = grad(p[B], xf - 1, yf), gc = grad(p[A + 1 & 255], xf, yf - 1), gd = grad(p[B + 1 & 255], xf - 1, yf - 1), lerpX1 = lerp(ga, gb, u), lerpX2 = lerp(gc, gd, u);
-    // Scale to [0, 1] range
-    return (lerp(lerpX1, lerpX2, v) + 1) / 2;
-}
-
-// ============================================================================
-// Fractal Brownian Motion (FBM) Engine (Feature 1.2)
-// ============================================================================
-/**
- * Creates an FBM engine with configurable parameters
- *
- * @param config - FBM configuration (octaves, lacunarity, gain)
- * @returns Object with fbm function
- *
- * @example
- * ```typescript
- * const fbmEngine = createFBMEngine({ octaves: 5, lacunarity: 2, gain: 0.5 });
- *
- * // Generate noise at position (0.5, 0.5) with time animation
- * const noiseValue = fbmEngine.fbm(0.5, 0.5, Date.now());
- * ```
- */ function createFBMEngine(config) {
-    /**
-   * Fractal Brownian Motion function
-   * Combines multiple octaves of noise for complex, natural patterns
-   *
-   * @param x - X coordinate
-   * @param y - Y coordinate
-   * @param time - Optional time value for animation
-   * @returns FBM noise value in range [0, 1]
-   */
-    const fbm = (x, y, time = 0) => {
-        let value = 0, amplitude = .5, frequency = 1, phase = .001 * time;
-        // Convert to seconds for reasonable animation speed
-        for (let i = 0; i < config.octaves; i++) 
-        // Apply time-based phase shift to all octaves
-        value += perlinNoise(x * frequency + phase, y * frequency + phase) * amplitude, 
-        frequency *= config.lacunarity, // Increase frequency
-        amplitude *= config.gain;
-        return value;
-    };
-    /**
-   * Get FBM with simple time factor
-   */    return {
-        fbm: fbm,
-        fbmWithTime: (x, y, time) => fbm(x, y, time)
-    };
-}
-
-/**
- * Gets optimal FBM config based on quality preset
- *
- * @param quality - Quality preset level
- * @returns FBM configuration for the quality level
- */ const fbmEngineCache = new Map;
-
-// ============================================================================
-// Shader Utility Functions for Time-Based Effects
-// ============================================================================
-/**
- * Liquid glass distortion with time-based animation
- * Uses FBM to create organic, flowing liquid effects
- *
- * @param uv - UV coordinates (normalized 0-1)
- * @param time - Elapsed time in milliseconds
- * @param config - FBM configuration
- * @returns Distorted UV coordinates
- */ function liquidGlassWithTime(uv, time, config) {
-    const configKey = `${config.octaves}-${config.lacunarity}-${config.gain}`;
-    let fbmEngine = fbmEngineCache.get(configKey);
-    fbmEngine || (fbmEngine = createFBMEngine(config), fbmEngineCache.set(configKey, fbmEngine));
-    // Animate noise with time
-        const animatedNoise = fbmEngine.fbmWithTime(2 * uv.x + 1e-4 * time, 2 * uv.y + 15e-5 * time, time);
-    return {
-        x: uv.x + .04 * (animatedNoise - .5),
-        y: uv.y + .04 * (animatedNoise - .5)
-    };
-}
-
-// ============================================================================
-// Helper Functions
-// ============================================================================
-/**
- * Fade curve for smooth interpolation (Perlin's fade function)
- */ function fade(t) {
-    return t * t * t * (t * (6 * t - 15) + 10);
-}
-
-/**
- * Linear interpolation
- */ function lerp(a, b, t) {
-    return a + t * (b - a);
-}
-
-/**
- * Gradient calculation for Perlin noise
- */ function grad(hash, x, y) {
-    const h = 15 & hash, u = h < 8 ? x : y, v = h < 4 ? y : 12 === h || 14 === h ? x : 0;
-    return (1 & h ? -u : u) + (2 & h ? -v : v);
-}
-
-/**
- * Permutation table for Perlin noise
- */ const p = (() => {
-    const permutation = [];
-    for (let i = 0; i < 256; i++) permutation[i] = Math.floor(256 * Math.random());
-    // Duplicate for overflow handling
-        return [ ...permutation, ...permutation ];
-})(), {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS;
+}, {CONSTANTS: CONSTANTS$1} = ATOMIX_GLASS;
 
 const {CONSTANTS: CONSTANTS} = ATOMIX_GLASS, backgroundDetectionCache = new WeakMap, setCachedBackgroundDetection = (parentElement, overLightConfig, result, threshold) => {
     parentElement && backgroundDetectionCache.set(parentElement, {
@@ -1222,12 +1481,35 @@ const {CONSTANTS: CONSTANTS} = ATOMIX_GLASS, backgroundDetectionCache = new Weak
  * Composable hook for AtomixGlass component logic
  * Manages all state, calculations, and event handlers
  */
-function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef: wrapperRef, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, onClick: onClick, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, children: children, blurAmount: blurAmount, saturation: saturation, padding: padding, withLiquidBlur: withLiquidBlur, isFixedOrSticky: isFixedOrSticky = !1, priority: priority = 1, withTimeAnimation: 
-// Default priority
-// Phase 1: Animation System Props
-withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: animationSpeed = ATOMIX_GLASS.DEFAULTS.ANIMATION_SPEED, withMultiLayerDistortion: withMultiLayerDistortion = ATOMIX_GLASS.DEFAULTS.WITH_MULTI_LAYER_DISTORTION, distortionOctaves: distortionOctaves = ATOMIX_GLASS.DEFAULTS.DISTORTION_OCTAVES, distortionLacunarity: distortionLacunarity = ATOMIX_GLASS.DEFAULTS.DISTORTION_LACUNARITY, distortionGain: distortionGain = ATOMIX_GLASS.DEFAULTS.DISTORTION_GAIN, distortionQuality: distortionQuality = ATOMIX_GLASS.DEFAULTS.DISTORTION_QUALITY}) {
-    // State
-    const [isHovered, setIsHovered] = useState(!1), [isActive, setIsActive] = useState(!1), cachedRectRef = useRef(null), internalGlobalMousePositionRef = useRef({
+function useAtomixGlass({glassRef: glassRef, contentRef: contentRef, wrapperRef: wrapperRef, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, border: border, withBorder: withBorder = !0, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, onClick: onClick, debugBorderRadius: debugBorderRadius = !1, debugOverLight: debugOverLight = !1, children: children, blurAmount: blurAmount, saturation: saturation, withLiquidBlur: withLiquidBlur, isFixedOrSticky: isFixedOrSticky = !1, priority: priority = 1}) {
+    // State
+    const [isHovered, setIsHovered] = useState(!1), [isActive, setIsActive] = useState(!1), resolvedBorder = useMemo((() => 
+    /**
+ * Resolves `border` and legacy `withBorder` into a single configuration object.
+ */
+    function(border, withBorder) {
+        const legacyDefault = withBorder ?? !0;
+        return void 0 === border ? {
+            enabled: legacyDefault,
+            width: BORDER.DEFAULT_WIDTH,
+            opacityMultiplier: 1,
+            animated: !0
+        } : "boolean" == typeof border ? {
+            enabled: border,
+            width: BORDER.DEFAULT_WIDTH,
+            opacityMultiplier: 1,
+            animated: !0
+        } : {
+            enabled: border.enabled ?? legacyDefault,
+            width: (value = border.width, void 0 === value ? BORDER.DEFAULT_WIDTH : "number" == typeof value ? `${value}px` : value),
+            opacityMultiplier: border.opacity ?? 1,
+            animated: !1 !== border.animated
+        };
+        /**
+ * Formats border width for CSS custom properties.
+ */
+        var value;
+    }(border, withBorder)), [ border, withBorder ]), cachedRectRef = useRef(null), internalGlobalMousePositionRef = useRef({
         x: 0,
         y: 0
     }), internalMouseOffsetRef = useRef({
@@ -1251,52 +1533,10 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
     }), scaleVelocityRef = useRef({
         x: 0,
         y: 0
-    });
-    useRef(0);
-    const mouseVelocityRef = useRef({
+    }), mouseVelocityRef = useRef({
         x: 0,
         y: 0
-    }), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), animationFrameIdRef = useRef(null), animationStartTimeRef = useRef(0), elapsedTimeRef = useRef(0), shaderTimeRef = useRef(0), fbmConfig = useMemo((() => {
-        // If quality preset is provided, use it as base
-        const preset = (quality = distortionQuality, ATOMIX_GLASS.CONSTANTS.DISTORTION_QUALITY_PRESETS[quality]);
-        // Override with custom values if provided
-                var quality;
-        return {
-            octaves: distortionOctaves ?? preset.octaves,
-            lacunarity: distortionLacunarity ?? preset.lacunarity,
-            gain: distortionGain ?? preset.gain
-        };
-    }), [ distortionQuality, distortionOctaves, distortionLacunarity, distortionGain ]), fbmEngine = useMemo((() => withMultiLayerDistortion ? createFBMEngine(fbmConfig) : null), [ withMultiLayerDistortion, fbmConfig ]), effectiveReducedMotion = useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveWithTimeAnimation = useMemo((() => withTimeAnimation && !effectiveReducedMotion), [ withTimeAnimation, effectiveReducedMotion ]);
-    /**
-   * Animation loop for time-based effects
-   */
-    useEffect((() => {
-        if (!effectiveWithTimeAnimation || "undefined" == typeof window) return;
-        let lastFrameTime = performance.now();
-        /**
-     * Animation frame handler
-     */        const animate = currentTime => {
-            // Calculate delta time
-            const deltaTime = currentTime - lastFrameTime;
-            lastFrameTime = currentTime;
-            // Apply animation speed multiplier
-            const scaledDelta = deltaTime * animationSpeed;
-            elapsedTimeRef.current += scaledDelta, shaderTimeRef.current = elapsedTimeRef.current, 
-            // Continue animation loop
-            animationFrameIdRef.current = requestAnimationFrame(animate);
-        };
-        // Start animation
-                // Cleanup
-        return animationStartTimeRef.current = performance.now(), animationFrameIdRef.current = requestAnimationFrame(animate), 
-        () => {
-            null !== animationFrameIdRef.current && (cancelAnimationFrame(animationFrameIdRef.current), 
-            animationFrameIdRef.current = null);
-        };
-    }), [ effectiveWithTimeAnimation, animationSpeed ]);
-    /**
-   * Get current shader time for animations
-   */
-    const getShaderTime = useCallback((() => shaderTimeRef.current), []), applyTimeBasedDistortion = useCallback((uv => effectiveWithTimeAnimation && fbmEngine ? liquidGlassWithTime(uv, shaderTimeRef.current, fbmConfig) : uv), [ effectiveWithTimeAnimation, fbmEngine, fbmConfig ]), effectiveBorderRadius = useMemo((() => void 0 !== borderRadius ? Math.max(0, borderRadius) : Math.max(0, dynamicBorderRadius)), [ borderRadius, dynamicBorderRadius ]), {glassSize: glassSize} = function({glassRef: glassRef, effectiveBorderRadius: effectiveBorderRadius, cachedRectRef: cachedRectRef}) {
+    }), [userPrefersReducedMotion, setUserPrefersReducedMotion] = useState(!1), [userPrefersHighContrast, setUserPrefersHighContrast] = useState(!1), [detectedOverLight, setDetectedOverLight] = useState(!1), effectiveReducedMotion = useMemo((() => reducedMotion || userPrefersReducedMotion), [ reducedMotion, userPrefersReducedMotion ]), effectiveBorderRadius = useMemo((() => void 0 !== borderRadius ? Math.max(0, borderRadius) : Math.max(0, dynamicBorderRadius)), [ borderRadius, dynamicBorderRadius ]), {glassSize: glassSize} = function({glassRef: glassRef, effectiveBorderRadius: effectiveBorderRadius, cachedRectRef: cachedRectRef}) {
         const [glassSize, setGlassSize] = useState({
             width: 270,
             height: 69
@@ -1356,9 +1596,6 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
         effectiveBorderRadius: effectiveBorderRadius,
         cachedRectRef: cachedRectRef
     }), effectiveHighContrast = useMemo((() => highContrast || userPrefersHighContrast), [ highContrast, userPrefersHighContrast ]), effectiveWithoutEffects = useMemo((() => withoutEffects || effectiveReducedMotion), [ withoutEffects, effectiveReducedMotion ]), globalMousePosition = externalGlobalMousePosition || internalGlobalMousePositionRef.current, mouseOffset = externalMouseOffset || internalMouseOffsetRef.current;
-    /**
-   * Apply time-based distortion to UV coordinates
-   */    
     // Extract border-radius from children
     useEffect((() => {
         const extractRadius = () => {
@@ -1518,25 +1755,26 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
    * Get effective overLight value based on configuration
    */
     const getEffectiveOverLight = useCallback((() => "boolean" == typeof overLight ? overLight : ("auto" === overLight || "object" == typeof overLight && null !== overLight) && detectedOverLight), [ overLight, detectedOverLight ]), validateConfigValue = useCallback(((value, min, max, defaultValue) => "number" != typeof value || isNaN(value) || !isFinite(value) ? defaultValue : Math.min(max, Math.max(min, value))), []), overLightConfig = useMemo((() => {
-        const isOverLight = getEffectiveOverLight(), hoverIntensity = isHovered ? 1.4 : 1, activeIntensity = isActive ? 1.6 : 1, baseConfig = {
+        const isOverLight = getEffectiveOverLight(), {hoverIntensity: hoverIntensity, activeIntensity: activeIntensity} = getInteractionIntensity(isHovered, isActive), baseConfig = {
             isOverLight: isOverLight,
             threshold: .7,
             opacity: isOverLight ? Math.min(.6, Math.max(.2, .5 * hoverIntensity * activeIntensity)) : 0,
-            contrast: 1.4,
-            brightness: .9,
-            saturationBoost: 1.3,
-            // Fixed value — dynamic saturation amplifies perceived displacement
-            shadowIntensity: .9,
-            borderOpacity: .7
+            // Dark UI (Apple Music): neutral contrast + slight brightness lift
+            contrast: isOverLight ? 1.4 : 1.02,
+            brightness: isOverLight ? .9 : 1.02,
+            saturationBoost: isOverLight ? 1.3 : 1,
+            shadowIntensity: isOverLight ? .9 : 1,
+            borderOpacity: isOverLight ? ATOMIX_GLASS.BORDER.OVER_LIGHT.opacity : ATOMIX_GLASS.BORDER.DARK.opacity
         };
         if ("object" == typeof overLight && null !== overLight) {
-            const objConfig = overLight, validatedThreshold = validateConfigValue(objConfig.threshold, .1, 1, baseConfig.threshold), validatedOpacity = validateConfigValue(objConfig.opacity, .1, 1, baseConfig.opacity), validatedContrast = validateConfigValue(objConfig.contrast, .5, 2.5, baseConfig.contrast), validatedBrightness = validateConfigValue(objConfig.brightness, .5, 2, baseConfig.brightness), validatedSaturationBoost = validateConfigValue(objConfig.saturationBoost, .5, 3, baseConfig.saturationBoost), finalConfig = {
+            const objConfig = overLight, validatedThreshold = validateConfigValue(objConfig.threshold, .1, 1, baseConfig.threshold), validatedOpacity = validateConfigValue(objConfig.opacity, .1, 1, baseConfig.opacity), validatedContrast = validateConfigValue(objConfig.contrast, .5, 2.5, baseConfig.contrast), validatedBrightness = validateConfigValue(objConfig.brightness, .5, 2, baseConfig.brightness), validatedSaturationBoost = validateConfigValue(objConfig.saturationBoost, .5, 3, baseConfig.saturationBoost), validatedBorderOpacity = validateConfigValue(objConfig.borderOpacity, .1, 1, baseConfig.borderOpacity), finalConfig = {
                 ...baseConfig,
                 threshold: validatedThreshold,
                 opacity: validatedOpacity * hoverIntensity * activeIntensity,
                 contrast: validatedContrast,
                 brightness: validatedBrightness,
-                saturationBoost: validatedSaturationBoost
+                saturationBoost: validatedSaturationBoost,
+                borderOpacity: validatedBorderOpacity
             };
             return "undefined" == typeof process || process.env, finalConfig;
         }
@@ -1561,8 +1799,8 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
             };
             const curG = internalGlobalMousePositionRef.current, tgtG = targetGlobalMousePositionRef.current;
             internalGlobalMousePositionRef.current = {
-                x: lerp$1(curG.x, tgtG.x, CONSTANTS.LERP_FACTOR),
-                y: lerp$1(curG.y, tgtG.y, CONSTANTS.LERP_FACTOR)
+                x: lerp(curG.x, tgtG.x, CONSTANTS.LERP_FACTOR),
+                y: lerp(curG.y, tgtG.y, CONSTANTS.LERP_FACTOR)
             };
             // ── Calculate Elastic Physics ─────────────────────────────────────
             let targetElasticTranslation = {
@@ -1634,12 +1872,13 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
                 withLiquidBlur: withLiquidBlur,
                 blurAmount: blurAmount,
                 saturation: saturation,
-                padding: padding,
-                isFixedOrSticky: isFixedOrSticky
+                isFixedOrSticky: isFixedOrSticky,
+                borderAnimated: resolvedBorder.animated,
+                borderOpacityMultiplier: resolvedBorder.opacityMultiplier
             }), Math.abs(mouseVelocityRef.current.x) < .001 && Math.abs(mouseVelocityRef.current.y) < .001 && Math.abs(elasticVelocityRef.current.x) < .001 && Math.abs(elasticVelocityRef.current.y) < .001 && Math.abs(scaleVelocityRef.current.x) < .001 && Math.abs(scaleVelocityRef.current.y) < .001 && Math.abs(internalMouseOffsetRef.current.x - targetMouseOffsetRef.current.x) < .001 && Math.abs(internalMouseOffsetRef.current.y - targetMouseOffsetRef.current.y) < .001 ? stopLerpLoop() : lerpRafRef.current = requestAnimationFrame(tick);
         };
         lerpRafRef.current = requestAnimationFrame(tick);
-    }), [ glassRef, wrapperRef, glassSize, isHovered, isActive, overLightConfig, effectiveBorderRadius, effectiveWithoutEffects, effectiveReducedMotion, elasticity, onClick, withLiquidBlur, blurAmount, saturation, padding, isFixedOrSticky, stopLerpLoop ]), handleGlobalMousePosition = useCallback((globalPos => {
+    }), [ glassRef, wrapperRef, glassSize, isHovered, isActive, overLightConfig, effectiveBorderRadius, effectiveWithoutEffects, effectiveReducedMotion, elasticity, onClick, withLiquidBlur, blurAmount, saturation, isFixedOrSticky, resolvedBorder.animated, resolvedBorder.opacityMultiplier, stopLerpLoop ]), handleGlobalMousePosition = useCallback((globalPos => {
         if (externalGlobalMousePosition && externalMouseOffset) return;
         if (effectiveWithoutEffects) return;
         const container = mouseContainer?.current || glassRef.current;
@@ -1703,9 +1942,10 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
             withLiquidBlur: withLiquidBlur,
             blurAmount: blurAmount,
             saturation: saturation,
-            padding: padding
+            borderAnimated: resolvedBorder.animated,
+            borderOpacityMultiplier: resolvedBorder.opacityMultiplier
         });
-    }), [ isHovered, isActive, glassSize, overLightConfig, effectiveBorderRadius, effectiveWithoutEffects, effectiveReducedMotion, elasticity, wrapperRef, glassRef, externalMouseOffset, externalGlobalMousePosition, withLiquidBlur, blurAmount, saturation, padding, onClick ]);
+    }), [ isHovered, isActive, glassSize, overLightConfig, effectiveBorderRadius, effectiveWithoutEffects, effectiveReducedMotion, elasticity, wrapperRef, glassRef, externalMouseOffset, externalGlobalMousePosition, withLiquidBlur, blurAmount, saturation, resolvedBorder.animated, resolvedBorder.opacityMultiplier, onClick ]);
     // Event handlers
     const handleMouseEnter = useCallback((() => setIsHovered(!0)), []), handleMouseLeave = useCallback((() => setIsHovered(!1)), []), handleMouseDown = useCallback((() => setIsActive(!0)), []), handleMouseUp = useCallback((() => setIsActive(!1)), []), handleKeyDown = useCallback((e => {
         !onClick || "Enter" !== e.key && " " !== e.key || (e.preventDefault(), onClick());
@@ -1725,9 +1965,8 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
         mouseOffset: mouseOffset,
         // This is now static (refs or props) unless prop changes
         overLightConfig: overLightConfig,
+        resolvedBorder: resolvedBorder,
         transformStyle: transformStyle,
-        getShaderTime: getShaderTime,
-        applyTimeBasedDistortion: applyTimeBasedDistortion,
         handleMouseEnter: handleMouseEnter,
         handleMouseLeave: handleMouseLeave,
         handleMouseDown: handleMouseDown,
@@ -1759,317 +1998,41 @@ withTimeAnimation = ATOMIX_GLASS.DEFAULTS.WITH_TIME_ANIMATION, animationSpeed: a
         maxWidth: 1024,
         params: {
             distortionOctaves: 4,
-            displacementScale: .85,
-            blurAmount: .9,
-            animationSpeed: .9,
-            chromaticIntensity: .75
-        }
-    },
-    desktop: {
-        minWidth: 1025,
-        params: {
-            distortionOctaves: 5,
-            displacementScale: 1,
-            blurAmount: 1,
-            animationSpeed: 1,
-            chromaticIntensity: 1
-        }
-    }
-};
-
-/**
- * Device performance tier detection
- *
- * Uses Device Memory API and Hardware Concurrency API to classify devices
- * into performance tiers for automatic quality adjustment.
- *
- * @returns Performance tier classification
- */ var commonjsGlobal = "undefined" != typeof globalThis ? globalThis : "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : {};
-
-function getDefaultExportFromCjs(x) {
-    return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
-}
-
-var fails$8 = function(exec) {
-    try {
-        return !!exec();
-    } catch (error) {
-        return !0;
-    }
-}, functionBindNative = !fails$8((function() {
-    // eslint-disable-next-line es/no-function-prototype-bind -- safe
-    var test = function() {/* empty */}.bind();
-    // eslint-disable-next-line no-prototype-builtins -- safe
-        return "function" != typeof test || test.hasOwnProperty("prototype");
-})), NATIVE_BIND$3 = functionBindNative, FunctionPrototype$1 = Function.prototype, call$5 = FunctionPrototype$1.call, uncurryThisWithBind = NATIVE_BIND$3 && FunctionPrototype$1.bind.bind(call$5, call$5), functionUncurryThis = NATIVE_BIND$3 ? uncurryThisWithBind : function(fn) {
-    return function() {
-        return call$5.apply(fn, arguments);
-    };
-}, objectIsPrototypeOf = functionUncurryThis({}.isPrototypeOf), check = function(it) {
-    return it && it.Math === Math && it;
-}, globalThis_1 = 
-// eslint-disable-next-line es/no-global-this -- safe
-check("object" == typeof globalThis && globalThis) || check("object" == typeof window && window) || 
-// eslint-disable-next-line no-restricted-globals -- safe
-check("object" == typeof self && self) || check("object" == typeof commonjsGlobal && commonjsGlobal) || check("object" == typeof commonjsGlobal && commonjsGlobal) || 
-// eslint-disable-next-line no-new-func -- fallback
-function() {
-    return this;
-}() || Function("return this")(), NATIVE_BIND$2 = functionBindNative, FunctionPrototype = Function.prototype, apply$1 = FunctionPrototype.apply, call$4 = FunctionPrototype.call, functionApply = "object" == typeof Reflect && Reflect.apply || (NATIVE_BIND$2 ? call$4.bind(apply$1) : function() {
-    return call$4.apply(apply$1, arguments);
-}), uncurryThis$7 = functionUncurryThis, toString$3 = uncurryThis$7({}.toString), stringSlice = uncurryThis$7("".slice), classofRaw$2 = function(it) {
-    return stringSlice(toString$3(it), 8, -1);
-}, classofRaw$1 = classofRaw$2, uncurryThis$6 = functionUncurryThis, functionUncurryThisClause = function(fn) {
-    // Nashorn bug:
-    //   https://github.com/zloirock/core-js/issues/1128
-    //   https://github.com/zloirock/core-js/issues/1130
-    if ("Function" === classofRaw$1(fn)) return uncurryThis$6(fn);
-}, documentAll = "object" == typeof document && document.all, isCallable$8 = void 0 === documentAll && void 0 !== documentAll ? function(argument) {
-    return "function" == typeof argument || argument === documentAll;
-} : function(argument) {
-    return "function" == typeof argument;
-}, objectGetOwnPropertyDescriptor = {}, descriptors = !fails$8((function() {
-    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
-    return 7 !== Object.defineProperty({}, 1, {
-        get: function() {
-            return 7;
-        }
-    })[1];
-})), NATIVE_BIND$1 = functionBindNative, call$3 = Function.prototype.call, functionCall = NATIVE_BIND$1 ? call$3.bind(call$3) : function() {
-    return call$3.apply(call$3, arguments);
-}, objectPropertyIsEnumerable = {}, $propertyIsEnumerable = {}.propertyIsEnumerable, getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor, NASHORN_BUG = getOwnPropertyDescriptor$1 && !$propertyIsEnumerable.call({
-    1: 2
-}, 1);
-
-// `Object.prototype.propertyIsEnumerable` method implementation
-// https://tc39.es/ecma262/#sec-object.prototype.propertyisenumerable
-objectPropertyIsEnumerable.f = NASHORN_BUG ? function(V) {
-    var descriptor = getOwnPropertyDescriptor$1(this, V);
-    return !!descriptor && descriptor.enumerable;
-} : $propertyIsEnumerable;
-
-var match, version, createPropertyDescriptor$2 = function(bitmap, value) {
-    return {
-        enumerable: !(1 & bitmap),
-        configurable: !(2 & bitmap),
-        writable: !(4 & bitmap),
-        value: value
-    };
-}, fails$5 = fails$8, classof$3 = classofRaw$2, $Object$3 = Object, split = functionUncurryThis("".split), indexedObject = fails$5((function() {
-    // throws an error in rhino, see https://github.com/mozilla/rhino/issues/346
-    // eslint-disable-next-line no-prototype-builtins -- safe
-    return !$Object$3("z").propertyIsEnumerable(0);
-})) ? function(it) {
-    return "String" === classof$3(it) ? split(it, "") : $Object$3(it);
-} : $Object$3, isNullOrUndefined$2 = function(it) {
-    return null == it;
-}, isNullOrUndefined$1 = isNullOrUndefined$2, $TypeError$6 = TypeError, requireObjectCoercible$3 = function(it) {
-    if (isNullOrUndefined$1(it)) throw new $TypeError$6("Can't call method on " + it);
-    return it;
-}, IndexedObject = indexedObject, requireObjectCoercible$2 = requireObjectCoercible$3, toIndexedObject$2 = function(it) {
-    return IndexedObject(requireObjectCoercible$2(it));
-}, isCallable$7 = isCallable$8, isObject$5 = function(it) {
-    return "object" == typeof it ? null !== it : isCallable$7(it);
-}, path$3 = {}, path$2 = path$3, globalThis$a = globalThis_1, isCallable$6 = isCallable$8, aFunction = function(variable) {
-    return isCallable$6(variable) ? variable : void 0;
-}, navigator$1 = globalThis_1.navigator, userAgent$1 = navigator$1 && navigator$1.userAgent, globalThis$8 = globalThis_1, userAgent = userAgent$1 ? String(userAgent$1) : "", process$1 = globalThis$8.process, Deno = globalThis$8.Deno, versions = process$1 && process$1.versions || Deno && Deno.version, v8 = versions && versions.v8;
-
-v8 && (
-// in old Chrome, versions of V8 isn't V8 = Chrome / 10
-// but their correct versions are not interesting for us
-version = (match = v8.split("."))[0] > 0 && match[0] < 4 ? 1 : +(match[0] + match[1])), 
-// BrowserFS NodeJS `process` polyfill incorrectly set `.v8` to `0.0`
-// so check `userAgent` even if `.v8` exists, but 0
-!version && userAgent && (!(match = userAgent.match(/Edge\/(\d+)/)) || match[1] >= 74) && (match = userAgent.match(/Chrome\/(\d+)/)) && (version = +match[1]);
-
-var V8_VERSION = version, fails$4 = fails$8, $String$3 = globalThis_1.String, symbolConstructorDetection = !!Object.getOwnPropertySymbols && !fails$4((function() {
-    var symbol = Symbol("symbol detection");
-    // Chrome 38 Symbol has incorrect toString conversion
-    // `get-own-property-symbols` polyfill symbols converted to object are not Symbol instances
-    // nb: Do not call `String` directly to avoid this being optimized out to `symbol+''` which will,
-    // of course, fail.
-        return !$String$3(symbol) || !(Object(symbol) instanceof Symbol) || 
-    // Chrome 38-40 symbols are not inherited from DOM collections prototypes to instances
-    !Symbol.sham && V8_VERSION && V8_VERSION < 41;
-})), useSymbolAsUid = symbolConstructorDetection && !Symbol.sham && "symbol" == typeof Symbol.iterator, isCallable$5 = isCallable$8, isPrototypeOf$1 = objectIsPrototypeOf, $Object$2 = Object, isSymbol$2 = useSymbolAsUid ? function(it) {
-    return "symbol" == typeof it;
-} : function(it) {
-    var $Symbol = function(namespace, method) {
-        return arguments.length < 2 ? aFunction(path$2[namespace]) || aFunction(globalThis$a[namespace]) : path$2[namespace] && path$2[namespace][method] || globalThis$a[namespace] && globalThis$a[namespace][method];
-    }("Symbol");
-    return isCallable$5($Symbol) && isPrototypeOf$1($Symbol.prototype, $Object$2(it));
-}, $String$2 = String, isCallable$4 = isCallable$8, $TypeError$5 = TypeError, aCallable$2 = function(argument) {
-    if (isCallable$4(argument)) return argument;
-    throw new $TypeError$5(function(argument) {
-        try {
-            return $String$2(argument);
-        } catch (error) {
-            return "Object";
-        }
-    }(argument) + " is not a function");
-}, aCallable$1 = aCallable$2, isNullOrUndefined = isNullOrUndefined$2, call$2 = functionCall, isCallable$3 = isCallable$8, isObject$4 = isObject$5, $TypeError$4 = TypeError, sharedStore = {
-    exports: {}
-}, globalThis$6 = globalThis_1, defineProperty = Object.defineProperty, globalThis$5 = globalThis_1, store$1 = sharedStore.exports = globalThis$5["__core-js_shared__"] || function(key, value) {
-    try {
-        defineProperty(globalThis$6, key, {
-            value: value,
-            configurable: !0,
-            writable: !0
-        });
-    } catch (error) {
-        globalThis$6[key] = value;
-    }
-    return value;
-}("__core-js_shared__", {});
-
-/* eslint-disable es/no-symbol -- required for testing */ (store$1.versions || (store$1.versions = [])).push({
-    version: "3.43.0",
-    mode: "pure",
-    copyright: "© 2014-2025 Denis Pushkarev (zloirock.ru)",
-    license: "https://github.com/zloirock/core-js/blob/v3.43.0/LICENSE",
-    source: "https://github.com/zloirock/core-js"
-});
-
-var key, value, store = sharedStore.exports, requireObjectCoercible$1 = requireObjectCoercible$3, $Object$1 = Object, hasOwnProperty = functionUncurryThis({}.hasOwnProperty), hasOwnProperty_1 = Object.hasOwn || function(it, key) {
-    return hasOwnProperty($Object$1(requireObjectCoercible$1(it)), key);
-}, uncurryThis$3 = functionUncurryThis, id = 0, postfix = Math.random(), toString$2 = uncurryThis$3(1.1.toString), hasOwn$2 = hasOwnProperty_1, NATIVE_SYMBOL = symbolConstructorDetection, USE_SYMBOL_AS_UID = useSymbolAsUid, Symbol$1 = globalThis_1.Symbol, WellKnownSymbolsStore = store[key = "wks"] || (store[key] = value || {}), createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol$1.for || Symbol$1 : Symbol$1 && Symbol$1.withoutSetter || function(key) {
-    return "Symbol(" + (void 0 === key ? "" : key) + ")_" + toString$2(++id + postfix, 36);
-}, wellKnownSymbol$5 = function(name) {
-    return hasOwn$2(WellKnownSymbolsStore, name) || (WellKnownSymbolsStore[name] = NATIVE_SYMBOL && hasOwn$2(Symbol$1, name) ? Symbol$1[name] : createWellKnownSymbol("Symbol." + name)), 
-    WellKnownSymbolsStore[name];
-}, call$1 = functionCall, isObject$3 = isObject$5, isSymbol$1 = isSymbol$2, $TypeError$3 = TypeError, TO_PRIMITIVE = wellKnownSymbol$5("toPrimitive"), toPrimitive = function(input, pref) {
-    if (!isObject$3(input) || isSymbol$1(input)) return input;
-    var result, func, exoticToPrim = (func = input[TO_PRIMITIVE], isNullOrUndefined(func) ? void 0 : aCallable$1(func));
-    if (exoticToPrim) {
-        if (void 0 === pref && (pref = "default"), result = call$1(exoticToPrim, input, pref), 
-        !isObject$3(result) || isSymbol$1(result)) return result;
-        throw new $TypeError$3("Can't convert object to primitive value");
-    }
-    return void 0 === pref && (pref = "number"), function(input, pref) {
-        var fn, val;
-        if ("string" === pref && isCallable$3(fn = input.toString) && !isObject$4(val = call$2(fn, input))) return val;
-        if (isCallable$3(fn = input.valueOf) && !isObject$4(val = call$2(fn, input))) return val;
-        if ("string" !== pref && isCallable$3(fn = input.toString) && !isObject$4(val = call$2(fn, input))) return val;
-        throw new $TypeError$4("Can't convert object to primitive value");
-    }(input, pref);
-}, isSymbol = isSymbol$2, toPropertyKey$2 = function(argument) {
-    var key = toPrimitive(argument, "string");
-    return isSymbol(key) ? key : key + "";
-}, isObject$2 = isObject$5, document$1 = globalThis_1.document, EXISTS = isObject$2(document$1) && isObject$2(document$1.createElement), ie8DomDefine = !descriptors && !fails$8((function() {
-    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
-    return 7 !== Object.defineProperty((it = "div", EXISTS ? document$1.createElement(it) : {}), "a", {
-        get: function() {
-            return 7;
-        }
-    }).a;
-    var it;
-})), DESCRIPTORS$3 = descriptors, call = functionCall, propertyIsEnumerableModule = objectPropertyIsEnumerable, createPropertyDescriptor$1 = createPropertyDescriptor$2, toIndexedObject$1 = toIndexedObject$2, toPropertyKey$1 = toPropertyKey$2, hasOwn$1 = hasOwnProperty_1, IE8_DOM_DEFINE$1 = ie8DomDefine, $getOwnPropertyDescriptor$1 = Object.getOwnPropertyDescriptor;
-
-// `Object.getOwnPropertyDescriptor` method
-// https://tc39.es/ecma262/#sec-object.getownpropertydescriptor
-objectGetOwnPropertyDescriptor.f = DESCRIPTORS$3 ? $getOwnPropertyDescriptor$1 : function(O, P) {
-    if (O = toIndexedObject$1(O), P = toPropertyKey$1(P), IE8_DOM_DEFINE$1) try {
-        return $getOwnPropertyDescriptor$1(O, P);
-    } catch (error) {/* empty */}
-    if (hasOwn$1(O, P)) return createPropertyDescriptor$1(!call(propertyIsEnumerableModule.f, O, P), O[P]);
-};
-
-var fails$2 = fails$8, isCallable$2 = isCallable$8, replacement = /#|\.prototype\./, isForced$1 = function(feature, detection) {
-    var value = data[normalize(feature)];
-    return value === POLYFILL || value !== NATIVE && (isCallable$2(detection) ? fails$2(detection) : !!detection);
-}, normalize = isForced$1.normalize = function(string) {
-    return String(string).replace(replacement, ".").toLowerCase();
-}, data = isForced$1.data = {}, NATIVE = isForced$1.NATIVE = "N", POLYFILL = isForced$1.POLYFILL = "P", isForced_1 = isForced$1, aCallable = aCallable$2, NATIVE_BIND = functionBindNative, bind$1 = functionUncurryThisClause(functionUncurryThisClause.bind), objectDefineProperty = {}, v8PrototypeDefineBug = descriptors && fails$8((function() {
-    // eslint-disable-next-line es/no-object-defineproperty -- required for testing
-    return 42 !== Object.defineProperty((function() {/* empty */}), "prototype", {
-        value: 42,
-        writable: !1
-    }).prototype;
-})), isObject$1 = isObject$5, $String$1 = String, $TypeError$2 = TypeError, DESCRIPTORS$1 = descriptors, IE8_DOM_DEFINE = ie8DomDefine, V8_PROTOTYPE_DEFINE_BUG = v8PrototypeDefineBug, anObject = function(argument) {
-    if (isObject$1(argument)) return argument;
-    throw new $TypeError$2($String$1(argument) + " is not an object");
-}, toPropertyKey = toPropertyKey$2, $TypeError$1 = TypeError, $defineProperty = Object.defineProperty, $getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
-
-// `Object.defineProperty` method
-// https://tc39.es/ecma262/#sec-object.defineproperty
-objectDefineProperty.f = DESCRIPTORS$1 ? V8_PROTOTYPE_DEFINE_BUG ? function(O, P, Attributes) {
-    if (anObject(O), P = toPropertyKey(P), anObject(Attributes), "function" == typeof O && "prototype" === P && "value" in Attributes && "writable" in Attributes && !Attributes.writable) {
-        var current = $getOwnPropertyDescriptor(O, P);
-        current && current.writable && (O[P] = Attributes.value, Attributes = {
-            configurable: "configurable" in Attributes ? Attributes.configurable : current.configurable,
-            enumerable: "enumerable" in Attributes ? Attributes.enumerable : current.enumerable,
-            writable: !1
-        });
+            displacementScale: .85,
+            blurAmount: .9,
+            animationSpeed: .9,
+            chromaticIntensity: .75
+        }
+    },
+    desktop: {
+        minWidth: 1025,
+        params: {
+            distortionOctaves: 5,
+            displacementScale: 1,
+            blurAmount: 1,
+            animationSpeed: 1,
+            chromaticIntensity: 1
+        }
     }
-    return $defineProperty(O, P, Attributes);
-} : $defineProperty : function(O, P, Attributes) {
-    if (anObject(O), P = toPropertyKey(P), anObject(Attributes), IE8_DOM_DEFINE) try {
-        return $defineProperty(O, P, Attributes);
-    } catch (error) {/* empty */}
-    if ("get" in Attributes || "set" in Attributes) throw new $TypeError$1("Accessors not supported");
-    return "value" in Attributes && (O[P] = Attributes.value), O;
 };
 
-var definePropertyModule = objectDefineProperty, createPropertyDescriptor = createPropertyDescriptor$2, createNonEnumerableProperty$1 = descriptors ? function(object, key, value) {
-    return definePropertyModule.f(object, key, createPropertyDescriptor(1, value));
-} : function(object, key, value) {
-    return object[key] = value, object;
-}, globalThis$2 = globalThis_1, apply = functionApply, uncurryThis$1 = functionUncurryThisClause, isCallable$1 = isCallable$8, getOwnPropertyDescriptor = objectGetOwnPropertyDescriptor.f, isForced = isForced_1, path$1 = path$3, bind = function(fn, that) {
-    return aCallable(fn), void 0 === that ? fn : NATIVE_BIND ? bind$1(fn, that) : function() {
-        return fn.apply(that, arguments);
-    };
-}, createNonEnumerableProperty = createNonEnumerableProperty$1, hasOwn = hasOwnProperty_1, wrapConstructor = function(NativeConstructor) {
-    var Wrapper = function(a, b, c) {
-        if (this instanceof Wrapper) {
-            switch (arguments.length) {
-              case 0:
-                return new NativeConstructor;
-
-              case 1:
-                return new NativeConstructor(a);
-
-              case 2:
-                return new NativeConstructor(a, b);
-            }
-            return new NativeConstructor(a, b, c);
-        }
-        return apply(NativeConstructor, this, arguments);
-    };
-    return Wrapper.prototype = NativeConstructor.prototype, Wrapper;
-}, _export = function(options, source) {
-    var FORCED, USE_NATIVE, VIRTUAL_PROTOTYPE, key, sourceProperty, targetProperty, nativeProperty, resultProperty, descriptor, TARGET = options.target, GLOBAL = options.global, STATIC = options.stat, PROTO = options.proto, nativeSource = GLOBAL ? globalThis$2 : STATIC ? globalThis$2[TARGET] : globalThis$2[TARGET] && globalThis$2[TARGET].prototype, target = GLOBAL ? path$1 : path$1[TARGET] || createNonEnumerableProperty(path$1, TARGET, {})[TARGET], targetPrototype = target.prototype;
-    for (key in source) 
-    // contains in native
-    USE_NATIVE = !(FORCED = isForced(GLOBAL ? key : TARGET + (STATIC ? "." : "#") + key, options.forced)) && nativeSource && hasOwn(nativeSource, key), 
-    targetProperty = target[key], USE_NATIVE && (nativeProperty = options.dontCallGetSet ? (descriptor = getOwnPropertyDescriptor(nativeSource, key)) && descriptor.value : nativeSource[key]), 
-    // export native or implementation
-    sourceProperty = USE_NATIVE && nativeProperty ? nativeProperty : source[key], (FORCED || PROTO || typeof targetProperty != typeof sourceProperty) && (
-    // bind methods to global for calling from export context
-    resultProperty = options.bind && USE_NATIVE ? bind(sourceProperty, globalThis$2) : options.wrap && USE_NATIVE ? wrapConstructor(sourceProperty) : PROTO && isCallable$1(sourceProperty) ? uncurryThis$1(sourceProperty) : sourceProperty, 
-    // add a flag to not completely full polyfills
-    (options.sham || sourceProperty && sourceProperty.sham || targetProperty && targetProperty.sham) && createNonEnumerableProperty(resultProperty, "sham", !0), 
-    createNonEnumerableProperty(target, key, resultProperty), PROTO && (hasOwn(path$1, VIRTUAL_PROTOTYPE = TARGET + "Prototype") || createNonEnumerableProperty(path$1, VIRTUAL_PROTOTYPE, {}), 
-    // export virtual prototype methods
-    createNonEnumerableProperty(path$1[VIRTUAL_PROTOTYPE], key, sourceProperty), 
-    // export real prototype methods
-    options.real && targetPrototype && (FORCED || !targetPrototype[key]) && createNonEnumerableProperty(targetPrototype, key, sourceProperty)));
-}, ceil = Math.ceil, floor = Math.floor, trunc = Math.trunc || function(x) {
-    var n = +x;
-    return (n > 0 ? floor : ceil)(n);
-}, toIntegerOrInfinity$2 = function(argument) {
-    var number = +argument;
-    // eslint-disable-next-line no-self-compare -- NaN check
-        return number != number || 0 === number ? 0 : trunc(number);
-}, toIntegerOrInfinity$1 = toIntegerOrInfinity$2, max = Math.max, min$1 = Math.min, toIntegerOrInfinity = toIntegerOrInfinity$2, min = Math.min, toIndexedObject = toIndexedObject$2, lengthOfArrayLike = function(obj) {
-    return argument = obj.length, (len = toIntegerOrInfinity(argument)) > 0 ? min(len, 9007199254740991) : 0;
+/**
+ * Device performance tier detection
+ *
+ * Uses Device Memory API and Hardware Concurrency API to classify devices
+ * into performance tiers for automatic quality adjustment.
+ *
+ * @returns Performance tier classification
+ */ var toIntegerOrInfinity = toIntegerOrInfinity$2, max = Math.max, min = Math.min, toIndexedObject = toIndexedObject$2, lengthOfArrayLike = function(obj) {
+    return argument = obj.length, (len = toIntegerOrInfinity$1(argument)) > 0 ? min$1(len, 9007199254740991) : 0;
     var argument, len;
 }, createMethod = function(IS_INCLUDES) {
     return function($this, el, fromIndex) {
         var O = toIndexedObject($this), length = lengthOfArrayLike(O);
         if (0 === length) return !IS_INCLUDES && -1;
         var value, index = function(index, length) {
-            var integer = toIntegerOrInfinity$1(index);
-            return integer < 0 ? max(integer + length, 0) : min$1(integer, length);
+            var integer = toIntegerOrInfinity(index);
+            return integer < 0 ? max(integer + length, 0) : min(integer, length);
         }(fromIndex, length);
         // Array#includes uses SameValueZero equality algorithm
         // eslint-disable-next-line no-self-compare -- NaN check
@@ -2098,12 +2061,7 @@ _export({
     }
 });
 
-var globalThis$1 = globalThis_1, path = path$3, getBuiltInPrototypeMethod$2 = function(CONSTRUCTOR, METHOD) {
-    var Namespace = path[CONSTRUCTOR + "Prototype"], pureMethod = Namespace && Namespace[METHOD];
-    if (pureMethod) return pureMethod;
-    var NativeConstructor = globalThis$1[CONSTRUCTOR], NativePrototype = NativeConstructor && NativeConstructor.prototype;
-    return NativePrototype && NativePrototype[METHOD];
-}, includes$4 = getBuiltInPrototypeMethod$2("Array", "includes"), isObject = isObject$5, classof$2 = classofRaw$2, MATCH$1 = wellKnownSymbol$5("match"), $TypeError = TypeError, test = {};
+var includes$4 = getBuiltInPrototypeMethod$2("Array", "includes"), isObject = isObject$5, classof$2 = classofRaw$2, MATCH$1 = wellKnownSymbol$5("match"), $TypeError = TypeError, test = {};
 
 test[wellKnownSymbol$5("toStringTag")] = "z";
 
@@ -2159,148 +2117,6 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
 /**
  * Get GPU memory info if available (Chrome DevTools only)
  */
-/** Map an FPS value to a semantic color token string. */
-const getQualityColor = quality => {
-    switch (quality) {
-      case "high":
-        return "var(--atomix-color-success, #4ade80)";
-
-      case "medium":
-        return "var(--atomix-color-warning, #fbbf24)";
-
-      case "low":
-        return "var(--atomix-color-danger, #ef4444)";
-
-      default:
-        return "#9ca3af";
-    }
-}, getFpsLabel = fps => fps >= 58 ? "Optimal" : fps >= 45 ? "Warning" : "Critical";
-
-/** Map a quality level string to a semantic color token string. */
-// Inject keyframes once
-if ("undefined" != typeof document) {
-    const styleId = "perf-dashboard-keyframes";
-    if (!document.getElementById(styleId)) {
-        const styleEl = document.createElement("style");
-        styleEl.id = styleId, styleEl.textContent = "\n@keyframes perf-dashboard-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.5; }\n}\n", 
-        document.head.appendChild(styleEl);
-    }
-}
-
-/**
- * PerformanceDashboard - Real-time performance monitoring overlay.
- *
- * Displays FPS, frame time, quality level, GPU memory, and auto-scaling status.
- * Rendered only when `debugPerformance={true}` on the parent `AtomixGlass`.
- */ const PerformanceDashboard =  memo((({metrics: metrics, isVisible: isVisible = !0, onClose: onClose}) => {
-    if (!isVisible) return null;
-    const fpsColor = (fps = metrics.fps) >= 58 ? "var(--atomix-color-success, #4ade80)" : fps >= 45 ? "var(--atomix-color-warning, #fbbf24)" : "var(--atomix-color-danger, #ef4444)";
-    var fps;
-    const isCritical = metrics.fps < 45;
-    return jsxs("div", {
-        className: "c-perf-dashboard u-position-fixed u-top-4 u-end-4 u-p-3 u-px-4 u-text-xs u-font-mono u-text-white u-rounded-md u-border u-border-white-alpha-10 u-shadow-lg",
-        style: {
-            zIndex: 9999,
-            minWidth: "12.5rem",
-            // 200px
-            backgroundColor: "rgba(17, 24, 39, 0.95)",
-            backdropFilter: "blur(8px)",
-            transition: "opacity 0.3s ease"
-        },
-        children: [ jsxs("div", {
-            className: "u-flex u-items-center u-justify-between u-mb-2 u-pb-2 u-border-b u-border-white-alpha-10",
-            children: [ jsx("span", {
-                className: "u-text-sm u-font-bold u-text-white",
-                children: "Performance Monitor"
-            }), onClose && jsx("button", {
-                className: "u-bg-transparent u-border-none u-p-0 u-line-height-1 u-text-base u-text-gray-400 u-cursor-pointer hover:u-text-white",
-                onClick: onClose,
-                "aria-label": "Close performance dashboard",
-                style: {
-                    transition: "color 0.2s ease"
-                },
-                children: "×"
-            }) ]
-        }), jsxs("div", {
-            className: "u-flex u-items-center u-justify-between u-mb-1-5",
-            children: [ jsx("span", {
-                className: "u-text-gray-400 u-me-3",
-                children: "FPS"
-            }), jsx("span", {
-                className: "u-font-bold",
-                style: {
-                    color: fpsColor
-                },
-                children: Math.round(metrics.fps)
-            }) ]
-        }), jsxs("div", {
-            className: "u-flex u-items-center u-justify-between u-mb-1-5",
-            children: [ jsx("span", {
-                className: "u-text-gray-400 u-me-3",
-                children: "Frame Time"
-            }), jsxs("span", {
-                className: "u-font-bold",
-                children: [ metrics.frameTime.toFixed(2), "ms" ]
-            }) ]
-        }), jsxs("div", {
-            className: "u-flex u-items-center u-justify-between u-mb-1-5",
-            children: [ jsx("span", {
-                className: "u-text-gray-400 u-me-3",
-                children: "Quality"
-            }), jsx("span", {
-                className: "u-font-bold u-text-uppercase",
-                style: {
-                    fontSize: "0.6875rem",
-                    // 11px
-                    color: getQualityColor(metrics.qualityLevel)
-                },
-                children: metrics.qualityLevel
-            }) ]
-        }), metrics.gpuMemory && jsxs("div", {
-            className: "u-flex u-items-center u-justify-between u-mb-1-5",
-            children: [ jsx("span", {
-                className: "u-text-gray-400 u-me-3",
-                children: "GPU Memory"
-            }), jsxs("span", {
-                className: "u-font-bold",
-                children: [ "~", Math.round(metrics.gpuMemory / 1024), "MB" ]
-            }) ]
-        }), metrics.isAutoScaling && jsx("div", {
-            className: "u-mt-2 u-pt-2 u-border-t u-border-white-alpha-10 u-text-center",
-            style: {
-                fontSize: "0.625rem",
-                // 10px
-                color: "#6b7280"
-            },
-            children: "Auto-scaling active"
-        }), jsxs("div", {
-            className: "u-flex u-items-center u-gap-2 u-mt-2 u-pt-2 u-border-t u-border-white-alpha-10",
-            children: [ jsx("div", {
-                className: "u-rounded-full",
-                style: {
-                    width: "0.5rem",
-                    height: "0.5rem",
-                    flexShrink: 0,
-                    backgroundColor: fpsColor,
-                    ...isCritical && {
-                        animation: "perf-dashboard-pulse 1s infinite"
-                    }
-                }
-            }), jsx("span", {
-                className: "u-text-xs",
-                style: {
-                    fontSize: "0.625rem",
-                    // 10px
-                    color: fpsColor
-                },
-                children: getFpsLabel(metrics.fps)
-            }) ]
-        }) ]
-    });
-}));
-
-PerformanceDashboard.displayName = "PerformanceDashboard";
-
 /**
  * Mobile optimization presets
  *
@@ -2420,18 +2236,13 @@ const PERFORMANCE_PRESET = {
             saturation: 70
         }
     }
-}, AtomixGlassInner =  forwardRef((function({children: children, displacementScale: displacementScale = ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, aberrationIntensity: aberrationIntensity = ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer = null, className: className = "", padding: padding = ATOMIX_GLASS.DEFAULTS.PADDING, overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, style: style = {}, mode: mode = ATOMIX_GLASS.DEFAULTS.MODE, onClick: onClick, shaderVariant: shaderVariant = "liquidGlass", "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, withLiquidBlur: withLiquidBlur = !1, withBorder: withBorder = !0, withOverLightLayers: withOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS, debugPerformance: debugPerformance = !1, debugOverLight: debugOverLight = !1, height: height, width: width, withTimeAnimation: withTimeAnimation = !1, animationSpeed: animationSpeed = 1, withMultiLayerDistortion: withMultiLayerDistortion = !1, distortionOctaves: distortionOctaves = 3, distortionLacunarity: distortionLacunarity = 2, distortionGain: distortionGain = .5, distortionQuality: distortionQuality = "medium", devicePreset: devicePreset = "balanced", disableResponsiveBreakpoints: disableResponsiveBreakpoints = !1, isFixedOrSticky: propsIsFixedOrSticky, ...rest}, ref) {
-    const glassRef = useRef(null), contentRef = useRef(null), internalWrapperRef = useRef(null), mergedRef = useMemo((() => 
-    // Helper to merge refs
-    function(...refs) {
-        return node => {
-            refs.forEach((ref => {
-                "function" == typeof ref ? ref(node) : null != ref && (ref.current = node);
-            }));
-        };
-    }
-    // Internal implementation with forwardRef
-    (ref, internalWrapperRef)), [ ref ]), {zIndex: customZIndex, ...restStyle} = style, isFixedOrSticky = propsIsFixedOrSticky || "fixed" === restStyle.position || "sticky" === restStyle.position, {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveBorderRadius: effectiveBorderRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveWithoutEffects: effectiveWithoutEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle, getShaderTime: getShaderTime, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown} = useAtomixGlass({
+}, AtomixGlassInner =  forwardRef((function({children: children, displacementScale: displacementScale = ATOMIX_GLASS.DEFAULTS.DISPLACEMENT_SCALE, blurAmount: blurAmount = ATOMIX_GLASS.DEFAULTS.BLUR_AMOUNT, saturation: saturation = ATOMIX_GLASS.DEFAULTS.SATURATION, aberrationIntensity: aberrationIntensity = ATOMIX_GLASS.DEFAULTS.ABERRATION_INTENSITY, elasticity: elasticity = ATOMIX_GLASS.DEFAULTS.ELASTICITY, borderRadius: borderRadius, globalMousePosition: externalGlobalMousePosition, mouseOffset: externalMouseOffset, mouseContainer: mouseContainer = null, className: className = "", overLight: overLight = ATOMIX_GLASS.DEFAULTS.OVER_LIGHT, style: style = {}, mode: mode = ATOMIX_GLASS.DEFAULTS.MODE, onClick: onClick, shaderVariant: shaderVariant = "liquidGlass", "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, reducedMotion: reducedMotion = !1, highContrast: highContrast = !1, withoutEffects: withoutEffects = !1, withLiquidBlur: withLiquidBlur = !1, border: border, withBorder: withBorder = !0, debugBorderRadius: debugBorderRadius = !1, withOverLightLayers: withOverLightLayers = ATOMIX_GLASS.DEFAULTS.ENABLE_OVER_LIGHT_LAYERS, debugPerformance: debugPerformance = !1, debugOverLight: debugOverLight = !1, height: height, width: width, withTimeAnimation: withTimeAnimation = !1, animationSpeed: animationSpeed = 1, withMultiLayerDistortion: withMultiLayerDistortion = !1, distortionOctaves: distortionOctaves = 3, distortionLacunarity: distortionLacunarity = 2, distortionGain: distortionGain = .5, distortionQuality: distortionQuality = "medium", devicePreset: devicePreset = "balanced", disableResponsiveBreakpoints: disableResponsiveBreakpoints = !1, isFixedOrSticky: propsIsFixedOrSticky, ...rest}, ref) {
+    const glassRef = useRef(null), contentRef = useRef(null), internalWrapperRef = useRef(null), mergedRef = useForkRef(ref, internalWrapperRef), {zIndex: customZIndex, ...restStyle} = style, isFixedOrSticky = (explicit = propsIsFixedOrSticky, 
+    position = restStyle.position, Boolean(explicit || "fixed" === position || "sticky" === position));
+    var explicit, position;
+    /**
+ * Extracts layout-related properties from a React `CSSProperties` object.
+ */    const {isHovered: isHovered, isActive: isActive, glassSize: glassSize, effectiveBorderRadius: effectiveBorderRadius, effectiveReducedMotion: effectiveReducedMotion, effectiveHighContrast: effectiveHighContrast, effectiveWithoutEffects: effectiveWithoutEffects, overLightConfig: overLightConfig, globalMousePosition: globalMousePosition, mouseOffset: mouseOffset, transformStyle: transformStyle, handleMouseEnter: handleMouseEnter, handleMouseLeave: handleMouseLeave, handleMouseDown: handleMouseDown, handleMouseUp: handleMouseUp, handleKeyDown: handleKeyDown, resolvedBorder: resolvedBorder} = useAtomixGlass({
         glassRef: glassRef,
         contentRef: contentRef,
         wrapperRef: internalWrapperRef,
@@ -2451,20 +2262,13 @@ const PERFORMANCE_PRESET = {
         blurAmount: blurAmount,
         saturation: saturation,
         withLiquidBlur: withLiquidBlur,
-        padding: padding,
+        border: border,
+        withBorder: withBorder,
+        debugBorderRadius: debugBorderRadius,
         style: style,
-        isFixedOrSticky: isFixedOrSticky,
-        // Phase 1: Animation System props
-        withTimeAnimation: withTimeAnimation,
-        animationSpeed: animationSpeed,
-        withMultiLayerDistortion: withMultiLayerDistortion,
-        distortionOctaves: distortionOctaves,
-        distortionLacunarity: distortionLacunarity,
-        distortionGain: distortionGain,
-        distortionQuality: distortionQuality
+        isFixedOrSticky: isFixedOrSticky
     });
-    // Responsive breakpoint system - automatically adjusts parameters based on viewport
-    !
+    (
     /**
  * Responsive Glass Parameters Hook
  *
@@ -2619,7 +2423,7 @@ const PERFORMANCE_PRESET = {
                 }), [ enabled ]), useCallback((() => {
             calculateParams();
         }), [ calculateParams ]);
-    }({
+    })({
         baseParams: {
             ...useMemo((() => 
             /**
@@ -2653,9 +2457,7 @@ const PERFORMANCE_PRESET = {
         breakpoints: MOBILE_OPTIMIZED_BREAKPOINTS,
         enabled: !disableResponsiveBreakpoints && "undefined" != typeof window,
         debug: !1
-    });
-    // Performance monitoring - tracks FPS, frame time, memory usage
-    const {metrics: performanceMetrics, toggleMonitoring: toggleMonitoring} = 
+    }), 
     /**
  * Performance Monitor Hook
  *
@@ -2690,7 +2492,13 @@ const PERFORMANCE_PRESET = {
             timestamp: 0,
             isAutoScaling: !0,
             lowFpsCount: 0
-        }), [manualOverride, setManualOverride] = useState(!1), [isEnabled, setIsEnabled] = useState(enabled), frameCountRef = useRef(0), lastFpsUpdateRef = useRef(0), lastFrameTimeRef = useRef(0), animationFrameRef = useRef(null), lowFpsCountRef = useRef(0), highFpsCountRef = useRef(0), qualityLevelRef = useRef("medium"), updateMetrics = useCallback((newMetrics => {
+        }), [manualOverride, setManualOverride] = useState(!1), [isEnabled, setIsEnabled] = useState(enabled);
+        // Sync external `enabled` prop changes into internal state
+        useEffect((() => {
+            setIsEnabled(enabled ?? !0);
+        }), [ enabled ]);
+        // Refs for frame tracking
+        const frameCountRef = useRef(0), lastFpsUpdateRef = useRef(0), lastFrameTimeRef = useRef(0), animationFrameRef = useRef(null), lowFpsCountRef = useRef(0), highFpsCountRef = useRef(0), qualityLevelRef = useRef("medium"), updateMetrics = useCallback((newMetrics => {
             setMetrics((prev => ({
                 ...prev,
                 ...newMetrics,
@@ -2810,191 +2618,214 @@ const PERFORMANCE_PRESET = {
         /**
    * Reset to auto-scaling mode
    */        var fps, currentQuality;
-        return {
-            metrics: metrics,
-            recommendedQuality: (fps = metrics.fps, currentQuality = metrics.qualityLevel, fps >= 58 ? "high" : fps >= 45 ? "high" === currentQuality ? "high" : "medium" : "low"),
-            isUnderperforming: metrics.fps < minFps,
-            setQualityLevel: setQualityLevel,
-            resetAutoScaling: resetAutoScaling,
-            toggleMonitoring: toggleMonitoring
-        };
+        fps = metrics.fps, currentQuality = metrics.qualityLevel, metrics.fps;
     }({
         enabled: debugPerformance,
-        // Enable when debugPerformance is true
         debug: !1,
         showOverlay: !1
     });
-    // Auto-start performance monitoring when debugPerformance is enabled
-        React.useEffect((() => {
-        debugPerformance && toggleMonitoring();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        }), [ debugPerformance ]);
-    // Re-run when debugPerformance changes
-    const isOverLight = useMemo((() => overLightConfig.isOverLight), [ overLightConfig.isOverLight ]), shouldRenderOverLightLayers = withOverLightLayers && isOverLight, rootLayoutStyle = useMemo((() => {
-        if (!isFixedOrSticky) return {};
-        const {position: p, top: t, left: l, right: r, bottom: b} = restStyle;
-        return {
-            ...p && {
-                position: p
-            },
-            ...void 0 !== t && {
-                top: t
-            },
-            ...void 0 !== l && {
-                left: l
-            },
-            ...void 0 !== r && {
-                right: r
-            },
-            ...void 0 !== b && {
-                bottom: b
-            }
-        };
-    }), [ isFixedOrSticky, restStyle ]);
-    // Calculate base style with transforms
-    // When layout is hoisted to the root, strip those props from the container
-    useMemo((() => {
-        if (isFixedOrSticky) {
-            const {position: _p, top: _t, left: _l, right: _r, bottom: _b, ...visualStyle} = restStyle;
-            return {
-                ...visualStyle
-            };
+    const isOverLight = useMemo((() => overLightConfig.isOverLight), [ overLightConfig.isOverLight ]), shouldRenderOverLightLayers = withOverLightLayers && isOverLight, containerStyle = useMemo((() => ({
+        ...restStyle,
+        ...void 0 !== customZIndex && {
+            zIndex: customZIndex
         }
+    })), [ restStyle, customZIndex ]), componentClassName = mergeClassNames(ATOMIX_GLASS.BASE_CLASS, effectiveReducedMotion && `${ATOMIX_GLASS.BASE_CLASS}--reduced-motion`, effectiveHighContrast && `${ATOMIX_GLASS.BASE_CLASS}--high-contrast`, effectiveWithoutEffects && `${ATOMIX_GLASS.BASE_CLASS}--disabled-effects`, className), positionStyles = useMemo((() => 
+    /**
+ * Returns the internal positioning context for effect layers relative to the root.
+ */
+    function(isFixedOrSticky, restStyle) {
         return {
-            ...restStyle
+            position: isFixedOrSticky ? "absolute" : restStyle.position || "absolute",
+            top: 0,
+            left: 0,
+            right: "auto",
+            bottom: "auto"
         };
-    }), [ isFixedOrSticky, restStyle ]);
-    // Build className with state modifiers
-    const componentClassName = [ ATOMIX_GLASS.BASE_CLASS, effectiveReducedMotion && `${ATOMIX_GLASS.BASE_CLASS}--reduced-motion`, effectiveHighContrast && `${ATOMIX_GLASS.BASE_CLASS}--high-contrast`, effectiveWithoutEffects && `${ATOMIX_GLASS.BASE_CLASS}--disabled-effects`, className ].filter(Boolean).join(" "), positionStyles = useMemo((() => ({
-        position: isFixedOrSticky ? "absolute" : restStyle.position || "absolute",
-        top: isFixedOrSticky ? restStyle.top ?? 0 : 0,
-        left: isFixedOrSticky ? restStyle.left ?? 0 : 0,
-        right: isFixedOrSticky ? restStyle.right ?? "auto" : "auto",
-        bottom: isFixedOrSticky ? restStyle.bottom ?? "auto" : "auto"
-    })), [ isFixedOrSticky, restStyle.position, restStyle.top, restStyle.left, restStyle.right, restStyle.bottom ]), adjustedSize = useMemo((() => {
-        // Keep a reference to positionStyles to avoid unused-variable lint,
-        // but sizing is driven by explicit width/height or measured size.
-        positionStyles.position;
-        const resolveLength = (value, measured) => void 0 !== value && isFixedOrSticky ? "number" == typeof value ? `${value}px` : value : measured > 0 && isFixedOrSticky ? `${measured}px` : "100%", effectiveWidth = width ?? restStyle.width, effectiveHeight = height ?? restStyle.height;
+    }
+    /**
+ * Computes `--atomix-glass-width` and `--atomix-glass-height` values.
+ *
+ * Fixed/sticky elements prefer explicit dimensions or measured size; in-flow
+ * elements default to `100%`.
+ */ (isFixedOrSticky, restStyle)), [ isFixedOrSticky, restStyle ]), adjustedSize = useMemo((() => function(options) {
+        const {width: width, height: height, restStyle: restStyle, glassSize: glassSize, isFixedOrSticky: isFixedOrSticky} = options, resolveLength = (value, measured) => void 0 !== value && isFixedOrSticky ? "number" == typeof value ? `${value}px` : value : measured > 0 && isFixedOrSticky ? `${measured}px` : "100%", effectiveWidth = width ?? restStyle.width, effectiveHeight = height ?? restStyle.height;
         return {
             width: resolveLength(effectiveWidth, glassSize.width),
             height: resolveLength(effectiveHeight, glassSize.height)
         };
-    }), [ width, height, restStyle.width, restStyle.height, positionStyles.position, glassSize.width, glassSize.height, isFixedOrSticky ]), gradientValues = useMemo((() => {
-        const mx = mouseOffset.x, my = mouseOffset.y, absMx = Math.abs(mx), absMy = Math.abs(my), GRADIENT = ATOMIX_GLASS.CONSTANTS.GRADIENT;
-        return {
-            borderGradientAngle: GRADIENT.BASE_ANGLE + mx * GRADIENT.ANGLE_MULTIPLIER,
-            borderStop1: Math.max(GRADIENT.BORDER_STOP_1.MIN, GRADIENT.BORDER_STOP_1.BASE + my * GRADIENT.BORDER_STOP_1.MULTIPLIER),
-            borderStop2: Math.min(GRADIENT.BORDER_STOP_2.MAX, GRADIENT.BORDER_STOP_2.BASE + my * GRADIENT.BORDER_STOP_2.MULTIPLIER),
-            borderOpacities: [ GRADIENT.BORDER_OPACITY.BASE_1 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW, GRADIENT.BORDER_OPACITY.BASE_2 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH, GRADIENT.BORDER_OPACITY.BASE_3 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_LOW, GRADIENT.BORDER_OPACITY.BASE_4 + absMx * GRADIENT.BORDER_OPACITY.MULTIPLIER_HIGH ],
-            hoverPositions: {
-                hover1: {
-                    x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_1,
-                    y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_1
-                },
-                hover2: {
-                    x: GRADIENT.CENTER_POSITION + mx / GRADIENT.HOVER_POSITION.DIVISOR_2,
-                    y: GRADIENT.CENTER_POSITION + my / GRADIENT.HOVER_POSITION.DIVISOR_2
-                },
-                hover3: {
-                    x: GRADIENT.CENTER_POSITION + mx * GRADIENT.HOVER_POSITION.MULTIPLIER_3,
-                    y: GRADIENT.CENTER_POSITION + my * GRADIENT.HOVER_POSITION.MULTIPLIER_3
-                }
-            },
-            basePosition: {
-                x: GRADIENT.CENTER_POSITION + mx * GRADIENT.BASE_LAYER_MULTIPLIER,
-                y: GRADIENT.CENTER_POSITION + my * GRADIENT.BASE_LAYER_MULTIPLIER
-            },
-            mx: mx,
-            my: my,
-            absMx: absMx,
-            absMy: absMy
-        };
-    }), [ mouseOffset.x, mouseOffset.y ]), clampedOverLightOpacity = Math.max(0, Math.min(1, overLightConfig?.opacity ?? .4)), clampedBorderOpacity = Math.max(0, Math.min(1, overLightConfig?.borderOpacity ?? 1)), opacityValues = useMemo((() => ({
-        hover1: isHovered || isActive ? .5 : 0,
-        hover2: isActive ? .5 : 0,
-        hover3: isHovered ? .4 : isActive ? .8 : 0,
-        base: isOverLight ? clampedOverLightOpacity || .4 : 0,
-        over: isOverLight ? 1.1 * (clampedOverLightOpacity || .4) : 0
-    })), [ isHovered, isActive, isOverLight, clampedOverLightOpacity ]), glassVars = useMemo((() => {
-        const whiteColor = ATOMIX_GLASS.CONSTANTS.PALETTE.WHITE, blackColor = ATOMIX_GLASS.CONSTANTS.PALETTE.BLACK, {borderGradientAngle: borderGradientAngle, borderStop1: borderStop1, borderStop2: borderStop2, borderOpacities: borderOpacities, hoverPositions: hoverPositions, basePosition: basePosition, mx: mx, my: my, absMx: absMx, absMy: absMy} = gradientValues;
+    }
+    /**
+ * Builds the CSS custom properties applied to the root `.c-atomix-glass` element.
+ *
+ * These variables drive layer geometry, transforms, and stacking offsets. They
+ * must not include layout properties that would interfere with backdrop-filter.
+ */ ({
+        width: width,
+        height: height,
+        restStyle: restStyle,
+        glassSize: glassSize,
+        isFixedOrSticky: isFixedOrSticky
+    })), [ width, height, restStyle, glassSize, isFixedOrSticky ]), glassVars = useMemo((() => function(input) {
+        const {effectiveBorderRadius: effectiveBorderRadius, transformStyle: transformStyle, adjustedSize: adjustedSize, isOverLight: isOverLight, customZIndex: customZIndex, isFixedOrSticky: isFixedOrSticky, positionStyles: positionStyles, restStyle: restStyle, borderWidth: borderWidth = ATOMIX_GLASS.BORDER.DEFAULT_WIDTH} = input, layerPosition = 
+        /**
+ * Resolves the `--atomix-glass-position` value for decorative layers.
+ *
+ * Fixed/sticky layers use the same positioning mode as the container; in-flow
+ * layers default to the internal absolute positioning context.
+ */
+        function(isFixedOrSticky, positionStyles, restStyle) {
+            return isFixedOrSticky ? `${function(style) {
+                const {position: position, top: top, left: left, right: right, bottom: bottom, inset: inset} = style;
+                return {
+                    ...null != position && {
+                        position: position
+                    },
+                    ...void 0 !== top && {
+                        top: top
+                    },
+                    ...void 0 !== left && {
+                        left: left
+                    },
+                    ...void 0 !== right && {
+                        right: right
+                    },
+                    ...void 0 !== bottom && {
+                        bottom: bottom
+                    },
+                    ...void 0 !== inset && {
+                        inset: inset
+                    }
+                };
+            }
+            /**
+ * Resolves inset custom properties for decorative layers (hover, borders, backgrounds).
+ *
+ * For fixed and sticky modes, insets mirror the container so sibling layers remain
+ * aligned. In-flow modes, insets follow the consumer `style` when a non-default
+ * `position` is provided.
+ */ (restStyle).position ?? restStyle.position ?? "fixed"}` : `${positionStyles.position}`;
+        }(isFixedOrSticky, positionStyles, restStyle), layerInsets = function(isFixedOrSticky, restStyle) {
+            if (isFixedOrSticky) return {
+                top: formatGlassInsetValue(restStyle.top, 0),
+                left: formatGlassInsetValue(restStyle.left, 0),
+                right: formatGlassInsetValue(restStyle.right, "auto"),
+                bottom: formatGlassInsetValue(restStyle.bottom, "auto")
+            };
+            const position = restStyle.position;
+            return null != position && "static" !== position && "relative" !== position ? {
+                top: formatGlassInsetValue(restStyle.top, 0),
+                left: formatGlassInsetValue(restStyle.left, 0),
+                right: formatGlassInsetValue(restStyle.right, "auto"),
+                bottom: formatGlassInsetValue(restStyle.bottom, "auto")
+            } : {
+                top: "0px",
+                left: "0px",
+                right: "auto",
+                bottom: "auto"
+            };
+        }(isFixedOrSticky, restStyle);
         return {
             ...void 0 !== customZIndex && {
                 "--atomix-glass-base-z-index": customZIndex
             },
             "--atomix-glass-radius": `${effectiveBorderRadius}px`,
             "--atomix-glass-transform": transformStyle || "none",
-            "--atomix-glass-container-position": `${isFixedOrSticky ? rootLayoutStyle.position : positionStyles.position}`,
-            "--atomix-glass-position": `${isFixedOrSticky ? rootLayoutStyle.position : positionStyles.position}`,
-            "--atomix-glass-top": `${isFixedOrSticky ? restStyle.top ?? 0 : 0}px`,
-            "--atomix-glass-left": `${isFixedOrSticky ? restStyle.left ?? 0 : 0}px`,
-            "--atomix-glass-right": isFixedOrSticky ? restStyle.right ?? "auto" : "auto",
-            "--atomix-glass-bottom": isFixedOrSticky ? restStyle.bottom ?? "auto" : "auto",
+            "--atomix-glass-container-position": layerPosition,
+            "--atomix-glass-position": layerPosition,
+            "--atomix-glass-top": layerInsets.top,
+            "--atomix-glass-left": layerInsets.left,
+            "--atomix-glass-right": layerInsets.right,
+            "--atomix-glass-bottom": layerInsets.bottom,
             "--atomix-glass-width": adjustedSize.width,
             "--atomix-glass-height": adjustedSize.height,
-            "--atomix-glass-border-width": "var(--atomix-spacing-0-5, 0.125rem)",
-            "--atomix-glass-blend-mode": isOverLight ? "multiply" : "overlay",
-            "--atomix-glass-border-gradient-1": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[0] ?? 1) * clampedBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[1] ?? 1) * clampedBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
-            "--atomix-glass-border-gradient-2": `linear-gradient(${borderGradientAngle}deg, rgba(${whiteColor}, 0) 0%, rgba(${whiteColor}, ${(borderOpacities[2] ?? 1) * clampedBorderOpacity}) ${borderStop1}%, rgba(${whiteColor}, ${(borderOpacities[3] ?? 1) * clampedBorderOpacity}) ${borderStop2}%, rgba(${whiteColor}, 0) 100%)`,
-            "--atomix-glass-hover-1-opacity": opacityValues.hover1,
-            "--atomix-glass-hover-1-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover1.x}% ${hoverPositions.hover1.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_1.WHITE_STOP}%)`,
-            "--atomix-glass-hover-2-opacity": opacityValues.hover2,
-            "--atomix-glass-hover-2-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover2.x}% ${hoverPositions.hover2.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_2.WHITE_STOP}%)`,
-            "--atomix-glass-hover-3-opacity": opacityValues.hover3,
-            "--atomix-glass-hover-3-gradient": isOverLight ? `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_START}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_STOP}%, rgba(${blackColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.BLACK_END}%)` : `radial-gradient(circle at ${hoverPositions.hover3.x}% ${hoverPositions.hover3.y}%, rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_START}) 0%, rgba(${whiteColor}, 0) ${ATOMIX_GLASS.CONSTANTS.GRADIENT_OPACITY.HOVER_3.WHITE_STOP}%)`,
-            "--atomix-glass-base-opacity": opacityValues.base,
-            "--atomix-glass-base-gradient": isOverLight ? `linear-gradient(${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.ANGLE}deg, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_BASE + mx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_BASE + my * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_MULTIPLIER}) ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_BASE + absMx * ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.BASE_GRADIENT.WHITE_OPACITY})`,
-            "--atomix-glass-overlay-opacity": opacityValues.over,
-            "--atomix-glass-overlay-gradient": isOverLight ? `radial-gradient(circle at ${basePosition.x}% ${basePosition.y}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_BASE + absMx * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_START_MULTIPLIER}) 0%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID}) ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_MID_STOP}%, rgba(${blackColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_BASE + absMy * ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.BLACK_END_MULTIPLIER}) 100%)` : `rgba(${whiteColor}, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_GRADIENT.WHITE_OPACITY})`,
-            "--atomix-glass-overlay-highlight-opacity": opacityValues.over * ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.OPACITY_MULTIPLIER,
-            "--atomix-glass-overlay-highlight-bg": `radial-gradient(circle at ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.POSITION_X}% ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.POSITION_Y}%, rgba(255, 255, 255, ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.WHITE_OPACITY}) 0%, transparent ${ATOMIX_GLASS.CONSTANTS.OVERLAY_HIGHLIGHT.STOP}%)`
+            // Aliases maintained for backward compatibility and consumer overrides.
+            "--atomix-glass-container-width": adjustedSize.width,
+            "--atomix-glass-container-height": adjustedSize.height,
+            [ATOMIX_GLASS.BORDER.WIDTH_CSS_VAR]: borderWidth,
+            "--atomix-glass-blend-mode": isOverLight ? "multiply" : "overlay"
+        };
+    }
+    /**
+ * Applies mode-specific multipliers and accessibility overrides to container effects.
+ */ ({
+        effectiveBorderRadius: effectiveBorderRadius,
+        transformStyle: transformStyle,
+        adjustedSize: adjustedSize,
+        isOverLight: isOverLight,
+        customZIndex: customZIndex,
+        isFixedOrSticky: isFixedOrSticky,
+        positionStyles: positionStyles,
+        restStyle: restStyle,
+        borderWidth: resolvedBorder.width
+    })), [ effectiveBorderRadius, transformStyle, adjustedSize, isOverLight, customZIndex, isFixedOrSticky, positionStyles, restStyle, resolvedBorder.width ]), containerEffects = useMemo((() => function(options) {
+        const {MULTIPLIERS: MULTIPLIERS, SATURATION: SATURATION} = ATOMIX_GLASS.CONSTANTS, zeroMouse = {
+            x: 0,
+            y: 0
+        }, resolveSaturation = () => options.effectiveHighContrast ? SATURATION.HIGH_CONTRAST : options.isOverLight ? options.saturation * options.saturationBoost : options.saturation;
+        if (options.effectiveWithoutEffects) return {
+            displacementScale: 0,
+            blurAmount: 0,
+            saturation: resolveSaturation(),
+            aberrationIntensity: 0,
+            mouseOffset: zeroMouse,
+            globalMousePosition: zeroMouse
         };
-    }), [ gradientValues, opacityValues, effectiveBorderRadius, transformStyle, adjustedSize, isOverLight, clampedBorderOpacity, customZIndex, isFixedOrSticky, positionStyles.position, rootLayoutStyle.position, restStyle.top, restStyle.left, restStyle.right, restStyle.bottom ]), renderBackgroundLayer = layerType => jsx("div", {
-        className: [ ATOMIX_GLASS.BACKGROUND_LAYER_CLASS, "dark" === layerType ? ATOMIX_GLASS.BACKGROUND_LAYER_DARK_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_BLACK_CLASS, isOverLight ? ATOMIX_GLASS.BACKGROUND_LAYER_OVER_LIGHT_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_HIDDEN_CLASS ].filter(Boolean).join(" ")
+        let resolvedDisplacement = options.displacementScale;
+        "shader" === options.mode ? resolvedDisplacement *= MULTIPLIERS.SHADER_DISPLACEMENT : options.isOverLight && (resolvedDisplacement *= MULTIPLIERS.OVER_LIGHT_DISPLACEMENT);
+        let resolvedAberration = options.aberrationIntensity;
+        return "shader" === options.mode && (resolvedAberration *= MULTIPLIERS.SHADER_ABERRATION), 
+        {
+            displacementScale: resolvedDisplacement,
+            blurAmount: options.blurAmount,
+            saturation: resolveSaturation(),
+            aberrationIntensity: resolvedAberration,
+            mouseOffset: options.mouseOffset,
+            globalMousePosition: options.globalMousePosition
+        };
+    }({
+        displacementScale: displacementScale,
+        blurAmount: blurAmount,
+        saturation: saturation,
+        aberrationIntensity: aberrationIntensity,
+        mode: mode,
+        effectiveWithoutEffects: effectiveWithoutEffects,
+        effectiveHighContrast: effectiveHighContrast,
+        isOverLight: isOverLight,
+        saturationBoost: overLightConfig.saturationBoost,
+        mouseOffset: mouseOffset,
+        globalMousePosition: globalMousePosition
+    })), [ displacementScale, blurAmount, saturation, aberrationIntensity, mode, effectiveWithoutEffects, effectiveHighContrast, isOverLight, overLightConfig.saturationBoost, mouseOffset, globalMousePosition ]), renderBackgroundLayer = layerType => jsx("div", {
+        "aria-hidden": "true",
+        className: mergeClassNames(ATOMIX_GLASS.BACKGROUND_LAYER_CLASS, "dark" === layerType ? ATOMIX_GLASS.BACKGROUND_LAYER_DARK_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_BLACK_CLASS, isOverLight ? ATOMIX_GLASS.BACKGROUND_LAYER_OVER_LIGHT_CLASS : ATOMIX_GLASS.BACKGROUND_LAYER_HIDDEN_CLASS)
     });
-    // Calculate position and size styles for internal layers
-    // When root is fixed/sticky, internal layers use absolute (relative to root)
-        return jsxs("div", {
+    return jsxs("div", {
         ...rest,
         ref: mergedRef,
         className: componentClassName,
-        style: {
-            ...glassVars
-        },
+        style: glassVars,
         role: role || (onClick ? "button" : void 0),
         tabIndex: onClick ? tabIndex ?? 0 : tabIndex,
         "aria-label": ariaLabel,
         "aria-describedby": ariaDescribedBy,
         "aria-disabled": !(!onClick || !effectiveWithoutEffects) || !onClick && void 0,
-        "aria-pressed": onClick ? isActive : void 0,
         onKeyDown: onClick ? handleKeyDown : void 0,
         children: [ jsx(AtomixGlassContainer, {
             ref: glassRef,
             contentRef: contentRef,
             className: className,
-            style: {
-                ...restStyle
-            },
+            style: containerStyle,
             borderRadius: effectiveBorderRadius,
-            displacementScale: effectiveWithoutEffects ? 0 : "shader" === mode ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_DISPLACEMENT : isOverLight ? displacementScale * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.OVER_LIGHT_DISPLACEMENT : displacementScale,
-            blurAmount: effectiveWithoutEffects ? 0 : blurAmount,
-            saturation: effectiveHighContrast ? ATOMIX_GLASS.CONSTANTS.SATURATION.HIGH_CONTRAST : isOverLight ? saturation * overLightConfig.saturationBoost : saturation,
-            aberrationIntensity: effectiveWithoutEffects ? 0 : "shader" === mode ? aberrationIntensity * ATOMIX_GLASS.CONSTANTS.MULTIPLIERS.SHADER_ABERRATION : aberrationIntensity,
+            displacementScale: containerEffects.displacementScale,
+            blurAmount: containerEffects.blurAmount,
+            saturation: containerEffects.saturation,
+            aberrationIntensity: containerEffects.aberrationIntensity,
             glassSize: glassSize,
-            padding: padding,
-            mouseOffset: effectiveWithoutEffects ? {
-                x: 0,
-                y: 0
-            } : mouseOffset,
-            globalMousePosition: effectiveWithoutEffects ? {
-                x: 0,
-                y: 0
-            } : globalMousePosition,
+            mouseOffset: containerEffects.mouseOffset,
+            globalMousePosition: containerEffects.globalMousePosition,
             onMouseEnter: handleMouseEnter,
             onMouseLeave: handleMouseLeave,
             onMouseDown: handleMouseDown,
             onMouseUp: handleMouseUp,
-            isHovered: isHovered,
             isActive: isActive,
             overLight: isOverLight,
             overLightConfig: {
@@ -3010,8 +2841,6 @@ const PERFORMANCE_PRESET = {
             shaderVariant: shaderVariant,
             withLiquidBlur: withLiquidBlur,
             isFixedOrSticky: isFixedOrSticky,
-            // Phase 1: Animation System props
-            shaderTime: getShaderTime(),
             withTimeAnimation: withTimeAnimation,
             animationSpeed: animationSpeed,
             withMultiLayerDistortion: withMultiLayerDistortion,
@@ -3022,32 +2851,39 @@ const PERFORMANCE_PRESET = {
             children: children
         }), Boolean(onClick) && jsxs(Fragment, {
             children: [ jsx("div", {
+                "aria-hidden": "true",
                 className: ATOMIX_GLASS.HOVER_1_CLASS
             }), jsx("div", {
+                "aria-hidden": "true",
                 className: ATOMIX_GLASS.HOVER_2_CLASS
             }), jsx("div", {
+                "aria-hidden": "true",
                 className: ATOMIX_GLASS.HOVER_3_CLASS
             }) ]
-        }), renderBackgroundLayer("dark"), renderBackgroundLayer("black"), shouldRenderOverLightLayers && jsxs(Fragment, {
+        }), [ "dark", "black" ].map((layerType => jsx(React.Fragment, {
+            children: renderBackgroundLayer(layerType)
+        }, layerType))), shouldRenderOverLightLayers && jsxs(Fragment, {
             children: [ jsx("div", {
+                "aria-hidden": "true",
                 className: ATOMIX_GLASS.BASE_LAYER_CLASS
             }), jsx("div", {
+                "aria-hidden": "true",
                 className: ATOMIX_GLASS.OVERLAY_LAYER_CLASS
             }), jsx("div", {
+                "aria-hidden": "true",
                 className: ATOMIX_GLASS.OVERLAY_HIGHLIGHT_CLASS
             }) ]
-        }), withBorder && jsxs(Fragment, {
+        }), resolvedBorder.enabled && jsxs(Fragment, {
             children: [ jsx("span", {
+                "aria-hidden": "true",
                 className: ATOMIX_GLASS.BORDER_BACKDROP_CLASS
             }), jsx("span", {
+                "aria-hidden": "true",
                 className: ATOMIX_GLASS.BORDER_1_CLASS
             }), jsx("span", {
+                "aria-hidden": "true",
                 className: ATOMIX_GLASS.BORDER_2_CLASS
             }) ]
-        }), debugPerformance && performanceMetrics && jsx(PerformanceDashboard, {
-            metrics: performanceMetrics,
-            isVisible: !0,
-            onClose: () => {}
         }) ]
     });
 }));
@@ -3057,44 +2893,16 @@ const PERFORMANCE_PRESET = {
  * Default preset for most mobile devices
  */ AtomixGlassInner.displayName = "AtomixGlass";
 
-/**
- * AtomixGlass - wrapped with React.memo to prevent unnecessary re-renders.
- * Ref is forwarded to the root `<div>` element.
- */
-const AtomixGlass =  memo(AtomixGlassInner), smoothStep = (a, b, t) => {
-    // Add input validation
-    if ("number" != typeof a || "number" != typeof b || "number" != typeof t) return 0;
-    const clamped = Math.max(0, Math.min(1, (t - a) / (b - a)));
-    return clamped * clamped * (3 - 2 * clamped);
-}, calculateLength = (x, y) => {
-    // Add input validation and error handling
-    if ("number" != typeof x || "number" != typeof y || isNaN(x) || isNaN(y)) return 0;
-    // Prevent potential overflow
-        const maxX = Math.max(Math.abs(x), Math.abs(y));
-    if (0 === maxX) return 0;
-    const scaledX = x / maxX, scaledY = y / maxX;
-    return maxX * Math.sqrt(scaledX * scaledX + scaledY * scaledY);
-}, roundedRectSDF = (x, y, width, height, radius) => {
+/** Memoized public export. Ref targets the root `.c-atomix-glass` wrapper. */
+const AtomixGlass =  memo(AtomixGlassInner), roundedRectSDF = (x, y, width, height, radius) => {
     // Add input validation
     if ("number" != typeof x || "number" != typeof y || "number" != typeof width || "number" != typeof height || "number" != typeof radius) return 0;
     const qx = Math.abs(x) - width + radius, qy = Math.abs(y) - height + radius;
-    return Math.min(Math.max(qx, qy), 0) + calculateLength(Math.max(qx, 0), Math.max(qy, 0)) - radius;
+    return Math.min(Math.max(qx, qy), 0) + vec2Length(Math.max(qx, 0), Math.max(qy, 0)) - radius;
 }, createTexture = (x, y) => ({
     x: "number" != typeof x || isNaN(x) ? .5 : Math.max(0, Math.min(1, x)),
     y: "number" != typeof y || isNaN(y) ? .5 : Math.max(0, Math.min(1, y))
-}), validateVec2 = vec => vec && "number" == typeof vec.x && "number" == typeof vec.y && !isNaN(vec.x) && !isNaN(vec.y), clampValue = (value, min, max) => 
-// Add input validation
-"number" != typeof value || "number" != typeof min || "number" != typeof max || isNaN(value) ? min : isNaN(min) ? 0 : isNaN(max) ? 1 : Math.max(min, Math.min(max, value)), easeInOutCubic = t => {
-    // Add input validation
-    if ("number" != typeof t || isNaN(t)) return 0;
-    const clampedT = Math.max(0, Math.min(1, t));
-    return clampedT < .5 ? 4 * clampedT * clampedT * clampedT : 1 - Math.pow(-2 * clampedT + 2, 3) / 2;
-}, easeOutQuart = t => {
-    // Add input validation
-    if ("number" != typeof t || isNaN(t)) return 0;
-    const clampedT = Math.max(0, Math.min(1, t));
-    return 1 - Math.pow(1 - clampedT, 4);
-}, noise2D = (x, y) => {
+}), validateVec2 = vec => vec && "number" == typeof vec.x && "number" == typeof vec.y && !isNaN(vec.x) && !isNaN(vec.y), noise2D = (x, y) => {
     // Add input validation
     if ("number" != typeof x || "number" != typeof y || isNaN(x) || isNaN(y)) return 0;
     const X = 255 & Math.floor(x), Y = 255 & Math.floor(y), xf = x - Math.floor(x), yf = y - Math.floor(y), u = easeInOutCubic(xf), v = easeInOutCubic(yf), hash = (i, j) => {
@@ -3133,13 +2941,13 @@ const AtomixGlass =  memo(AtomixGlassInner), smoothStep = (a, b, t) => {
             x: .5,
             y: .5
         };
-        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now(), mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = calculateLength(mouseX, mouseY), mouseFalloff = easeOutQuart(1 - Math.min(2 * mouseDistance, 1)), organicFlow = fbm(12 * (ix + .5 * mouseX) + time, 12 * (iy + .5 * mouseY) + .7 * time, 3) - .5, distanceToEdge = roundedRectSDF(ix, iy, .4, .3, .35), baseDisplacement = smoothStep(.8, 0, distanceToEdge - .05), radialDist = ((x, y, strength) => {
+        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now(), mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = vec2Length(mouseX, mouseY), mouseFalloff = easeOutQuart(1 - Math.min(2 * mouseDistance, 1)), organicFlow = fbm(12 * (ix + .5 * mouseX) + time, 12 * (iy + .5 * mouseY) + .7 * time, 3) - .5, distanceToEdge = roundedRectSDF(ix, iy, .4, .3, .35), baseDisplacement = smoothstepEdge(.8, 0, distanceToEdge - .05), radialDist = ((x, y, strength) => {
             // Add input validation
             if ("number" != typeof x || "number" != typeof y || isNaN(x) || isNaN(y) || isNaN(strength)) return {
                 x: 0,
                 y: 0
             };
-            const distance = calculateLength(x, y), distortion = Math.pow(Math.min(distance, 10), 2) * strength;
+            const distance = vec2Length(x, y), distortion = Math.pow(Math.min(distance, 10), 2) * strength;
             // Limit distance to prevent extreme values
             return {
                 x: x * (1 + distortion),
@@ -3151,7 +2959,7 @@ const AtomixGlass =  memo(AtomixGlassInner), smoothStep = (a, b, t) => {
                 x: 0,
                 y: 0
             };
-            const distance = calculateLength(x, y);
+            const distance = vec2Length(x, y);
             // Prevent division by zero and extreme values
                         if (0 === distance) return {
                 x: 0,
@@ -3162,8 +2970,8 @@ const AtomixGlass =  memo(AtomixGlassInner), smoothStep = (a, b, t) => {
                 x: Math.cos(angle) * distance * intensity,
                 y: Math.sin(angle) * distance * intensity
             };
-        })(ix, iy, .015 * baseDisplacement), scaled = smoothStep(0, 1, 1.15 * baseDisplacement), finalX = ix + totalDistortionX + .5 * chromaticOffset.x, finalY = iy + totalDistortionY + .5 * chromaticOffset.y;
-        return createTexture(clampValue(finalX * scaled + .5, 0, 1), clampValue(finalY * scaled + .5, 0, 1));
+        })(ix, iy, .015 * baseDisplacement), scaled = smoothstepEdge(0, 1, 1.15 * baseDisplacement), finalX = ix + totalDistortionX + .5 * chromaticOffset.x, finalY = iy + totalDistortionY + .5 * chromaticOffset.y;
+        return createTexture(clamp(finalX * scaled + .5, 0, 1), clamp(finalY * scaled + .5, 0, 1));
     },
     // Premium Apple-style fluid glass with enhanced organic flow
     appleFluid: (uv, mousePosition) => {
@@ -3171,8 +2979,8 @@ const AtomixGlass =  memo(AtomixGlassInner), smoothStep = (a, b, t) => {
             x: .5,
             y: .5
         };
-        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .6, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = calculateLength(mouseX, mouseY), mouseFalloff = easeOutQuart(1 - Math.min(1.5 * mouseDistance, 1)), organicX = fbm(10 * (ix + .3 * mouseX) + time, 10 * (iy + .3 * mouseY), 5) - .5, organicY = fbm(10 * (ix - .3 * mouseX), 10 * (iy - .3 * mouseY) + .8 * time, 5) - .5, distanceToEdge = roundedRectSDF(ix, iy, .42, .32, .38), mask = smoothStep(.85, -.1, distanceToEdge), fluidVelocityX = Math.sin(6 * ix + 2 * time) * Math.cos(4 * iy - time) * .025, fluidVelocityY = Math.cos(4 * ix - time) * Math.sin(6 * iy + 2 * time) * .025, vortexAngle = Math.atan2(iy - mouseY, ix - mouseX), vortexStrength = mouseFalloff * mouseDistance * .08, vortexX = Math.cos(vortexAngle + time) * vortexStrength, totalY = iy + (.035 * organicY + fluidVelocityY + Math.sin(vortexAngle + time) * vortexStrength) * mask;
-        return createTexture(clampValue(ix + (.035 * organicX + fluidVelocityX + vortexX) * mask + .5, 0, 1), clampValue(totalY + .5, 0, 1));
+        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .6, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = vec2Length(mouseX, mouseY), mouseFalloff = easeOutQuart(1 - Math.min(1.5 * mouseDistance, 1)), organicX = fbm(10 * (ix + .3 * mouseX) + time, 10 * (iy + .3 * mouseY), 5) - .5, organicY = fbm(10 * (ix - .3 * mouseX), 10 * (iy - .3 * mouseY) + .8 * time, 5) - .5, distanceToEdge = roundedRectSDF(ix, iy, .42, .32, .38), mask = smoothstepEdge(.85, -.1, distanceToEdge), fluidVelocityX = Math.sin(6 * ix + 2 * time) * Math.cos(4 * iy - time) * .025, fluidVelocityY = Math.cos(4 * ix - time) * Math.sin(6 * iy + 2 * time) * .025, vortexAngle = Math.atan2(iy - mouseY, ix - mouseX), vortexStrength = mouseFalloff * mouseDistance * .08, vortexX = Math.cos(vortexAngle + time) * vortexStrength, totalY = iy + (.035 * organicY + fluidVelocityY + Math.sin(vortexAngle + time) * vortexStrength) * mask;
+        return createTexture(clamp(ix + (.035 * organicX + fluidVelocityX + vortexX) * mask + .5, 0, 1), clamp(totalY + .5, 0, 1));
     },
     // High-end glass with advanced refraction and depth
     premiumGlass: (uv, mousePosition) => {
@@ -3180,7 +2988,7 @@ const AtomixGlass =  memo(AtomixGlassInner), smoothStep = (a, b, t) => {
             x: .5,
             y: .5
         };
-        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .4, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = calculateLength(mouseX, mouseY), centerDistance = calculateLength(ix, iy), refractionStrength = .3 * Math.pow(Math.min(centerDistance, 1), 1.5), refractionAngle = Math.atan2(iy, ix);
+        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .4, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = vec2Length(mouseX, mouseY), centerDistance = vec2Length(ix, iy), refractionStrength = .3 * Math.pow(Math.min(centerDistance, 1), 1.5), refractionAngle = Math.atan2(iy, ix);
         // Multi-layer depth effect
         let depthX = 0, depthY = 0;
         for (let layer = 0; layer < 3; layer++) {
@@ -3188,8 +2996,8 @@ const AtomixGlass =  memo(AtomixGlassInner), smoothStep = (a, b, t) => {
             depthX += Math.sin(ix * layerScale + layerTime) * layerStrength, depthY += Math.cos(iy * layerScale - layerTime) * layerStrength;
         }
         // Glass refraction with mouse influence
-                const refractionX = Math.cos(refractionAngle) * refractionStrength * (1 + .5 * mouseDistance), refractionY = Math.sin(refractionAngle) * refractionStrength * (1 + .5 * mouseDistance), organicNoise = fbm(8 * ix + time, 8 * iy - time, 2) - .5, distanceToEdge = roundedRectSDF(ix, iy, .43, .33, .36), edgeMask = smoothStep(.9, -.05, distanceToEdge), finalY = iy + (refractionY + depthY + .015 * organicNoise) * edgeMask;
-        return createTexture(clampValue(ix + (refractionX + depthX + .015 * organicNoise) * edgeMask + .5, 0, 1), clampValue(finalY + .5, 0, 1));
+                const refractionX = Math.cos(refractionAngle) * refractionStrength * (1 + .5 * mouseDistance), refractionY = Math.sin(refractionAngle) * refractionStrength * (1 + .5 * mouseDistance), organicNoise = fbm(8 * ix + time, 8 * iy - time, 2) - .5, distanceToEdge = roundedRectSDF(ix, iy, .43, .33, .36), edgeMask = smoothstepEdge(.9, -.05, distanceToEdge), finalY = iy + (refractionY + depthY + .015 * organicNoise) * edgeMask;
+        return createTexture(clamp(ix + (refractionX + depthX + .015 * organicNoise) * edgeMask + .5, 0, 1), clamp(finalY + .5, 0, 1));
     },
     // Metallic liquid effect with shimmer
     liquidMetal: (uv, mousePosition) => {
@@ -3197,8 +3005,8 @@ const AtomixGlass =  memo(AtomixGlassInner), smoothStep = (a, b, t) => {
             x: .5,
             y: .5
         };
-        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * 1.2, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, wave1 = Math.sin(20 * ix + 4 * time) * Math.cos(15 * iy - 3 * time) * .02, wave2 = Math.cos(15 * ix - 2 * time) * Math.sin(20 * iy + 5 * time) * .015, shimmer = .025 * fbm(25 * ix + 2 * time, 25 * iy - 2 * time, 4), flowAngle = Math.atan2(iy - mouseY, ix - mouseX), flowDistance = calculateLength(ix - mouseX, iy - mouseY), flowEffect = .02 * Math.sin(15 * flowDistance - 6 * time) * easeOutQuart(1 - Math.min(2 * flowDistance, 1)), distanceToEdge = roundedRectSDF(ix, iy, .41, .31, .37), mask = smoothStep(.88, -.08, distanceToEdge), totalX = ix + (wave1 + shimmer + Math.cos(flowAngle) * flowEffect) * mask, totalY = iy + (wave2 + .8 * shimmer + Math.sin(flowAngle) * flowEffect) * mask;
-        return createTexture(clampValue(totalX + .5, 0, 1), clampValue(totalY + .5, 0, 1));
+        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * 1.2, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, wave1 = Math.sin(20 * ix + 4 * time) * Math.cos(15 * iy - 3 * time) * .02, wave2 = Math.cos(15 * ix - 2 * time) * Math.sin(20 * iy + 5 * time) * .015, shimmer = .025 * fbm(25 * ix + 2 * time, 25 * iy - 2 * time, 4), flowAngle = Math.atan2(iy - mouseY, ix - mouseX), flowDistance = vec2Length(ix - mouseX, iy - mouseY), flowEffect = .02 * Math.sin(15 * flowDistance - 6 * time) * easeOutQuart(1 - Math.min(2 * flowDistance, 1)), distanceToEdge = roundedRectSDF(ix, iy, .41, .31, .37), mask = smoothstepEdge(.88, -.08, distanceToEdge), totalX = ix + (wave1 + shimmer + Math.cos(flowAngle) * flowEffect) * mask, totalY = iy + (wave2 + .8 * shimmer + Math.sin(flowAngle) * flowEffect) * mask;
+        return createTexture(clamp(totalX + .5, 0, 1), clamp(totalY + .5, 0, 1));
     },
     // basiBasi - Expert Premium Glass Shader
     // The most advanced shader with caustics, spectral dispersion, parallax depth, and volumetric effects
@@ -3207,7 +3015,7 @@ const AtomixGlass =  memo(AtomixGlassInner), smoothStep = (a, b, t) => {
             x: .5,
             y: .5
         };
-        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .5, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = calculateLength(mouseX, mouseY), mouseFalloff = easeOutQuart(1 - Math.min(1.2 * mouseDistance, 1)), causticIntensity = ((x, y, time, intensity = 1) => 
+        const ix = uv.x - .5, iy = uv.y - .5, time = 8e-4 * Date.now() * .5, mouseX = mousePosition && validateVec2(mousePosition) ? mousePosition.x - .5 : 0, mouseY = mousePosition && validateVec2(mousePosition) ? mousePosition.y - .5 : 0, mouseDistance = vec2Length(mouseX, mouseY), mouseFalloff = easeOutQuart(1 - Math.min(1.2 * mouseDistance, 1)), causticIntensity = ((x, y, time, intensity = 1) => 
         // Add input validation
         "number" != typeof x || "number" != typeof y || "number" != typeof time || "number" != typeof intensity || isNaN(x) || isNaN(y) || isNaN(time) || isNaN(intensity) ? .5 : .5 * (Math.sin(8 * x + 2 * time) * Math.cos(8 * y - 2 * time) * .5 + Math.sin(8 * (x + .5) * 1.3 - 2 * time * .8) * Math.cos(8 * (y - .3) * 1.3 + 2 * time * .8) * .3 + Math.sin(8 * (x - .3) * .7 + 2 * time * 1.2) * Math.cos(8 * (y + .4) * .7 - 2 * time * 1.2) * .2 + 1) * intensity)(ix, iy, time, .8), causticDistortion = .02 * (causticIntensity - .5), refractionAngle = Math.atan2(iy, ix), spectralDispersion = ((x, y, angle) => {
             // Add input validation
@@ -3225,7 +3033,7 @@ const AtomixGlass =  memo(AtomixGlassInner), smoothStep = (a, b, t) => {
                     y: 0
                 }
             };
-            const distance = calculateLength(x, y), dispersionStrength = Math.min(.025 * distance, 1), redOffset = .8 * dispersionStrength, greenOffset = 1 * dispersionStrength, blueOffset = 1.2 * dispersionStrength;
+            const distance = vec2Length(x, y), dispersionStrength = Math.min(.025 * distance, 1), redOffset = .8 * dispersionStrength, greenOffset = 1 * dispersionStrength, blueOffset = 1.2 * dispersionStrength;
             return {
                 r: {
                     x: Math.cos(angle) * redOffset,
@@ -3265,8 +3073,8 @@ const AtomixGlass =  memo(AtomixGlassInner), smoothStep = (a, b, t) => {
             return turbulence;
         })(6 * ix, 6 * iy, time, 6), turbulenceX = .012 * Math.cos(turbulence * Math.PI * 2), turbulenceY = .012 * Math.sin(turbulence * Math.PI * 2), microSurface = ((x, y, time) => 
         // Add input validation
-        "number" != typeof x || "number" != typeof y || "number" != typeof time || isNaN(x) || isNaN(y) || isNaN(time) ? .5 : .5 * (.7 * fbm(40 * x + .3 * time, 40 * y - .3 * time, 6) + .3 * fbm(80 * x, 80 * y, 4)))(ix, iy, time), microDetailX = .008 * (microSurface - .5), microDetailY = .008 * (microSurface - .5), centerDistance = calculateLength(ix, iy), dynamicRefraction = .35 * Math.pow(Math.min(centerDistance, 1), 1.8) * (1 + mouseFalloff * mouseDistance * .8), refractionX = Math.cos(refractionAngle) * dynamicRefraction, refractionY = Math.sin(refractionAngle) * dynamicRefraction, vortexAngle = Math.atan2(iy - mouseY, ix - mouseX), vortexDistance = calculateLength(ix - mouseX, iy - mouseY), vortexStrength = mouseFalloff * Math.sin(10 * vortexDistance - 3 * time) * .025, vortexX = Math.cos(vortexAngle + 2 * time) * vortexStrength, vortexY = Math.sin(vortexAngle + 2 * time) * vortexStrength, fluidX = Math.sin(10 * ix + 5 * mouseX + 2.5 * time) * Math.cos(8 * iy - 2 * time) * .018, fluidY = Math.cos(8 * ix - 2 * time) * Math.sin(10 * iy + 5 * mouseY + 2.5 * time) * .018, rippleEffect = (.012 * Math.sin(15 * Math.min(centerDistance, 10) - 4 * time) + .008 * Math.cos(20 * Math.min(centerDistance, 10) + 3 * time)) * mouseFalloff, rippleX = Math.cos(refractionAngle) * rippleEffect, rippleY = Math.sin(refractionAngle) * rippleEffect, distanceToEdge = roundedRectSDF(ix, iy, .44, .34, .39), edgeMask = smoothStep(.92, -.12, distanceToEdge), edgeSoftness = smoothStep(.85, .1, distanceToEdge), finalY = iy + (1.2 * refractionY + .8 * spectralY + 1.5 * parallaxY + .9 * scatteringY + 1 * turbulenceY + .6 * microDetailY + 1.3 * vortexY + 1.1 * fluidY + .7 * rippleY + .8 * causticDistortion) * edgeMask * edgeSoftness * .85;
-        return createTexture(clampValue(ix + (1.2 * refractionX + .8 * spectralX + 1.5 * parallaxX + .9 * scatteringX + 1 * turbulenceX + .6 * microDetailX + 1.3 * vortexX + 1.1 * fluidX + .7 * rippleX + causticDistortion) * edgeMask * edgeSoftness * .85 + .5, 0, 1), clampValue(finalY + .5, 0, 1));
+        "number" != typeof x || "number" != typeof y || "number" != typeof time || isNaN(x) || isNaN(y) || isNaN(time) ? .5 : .5 * (.7 * fbm(40 * x + .3 * time, 40 * y - .3 * time, 6) + .3 * fbm(80 * x, 80 * y, 4)))(ix, iy, time), microDetailX = .008 * (microSurface - .5), microDetailY = .008 * (microSurface - .5), centerDistance = vec2Length(ix, iy), dynamicRefraction = .35 * Math.pow(Math.min(centerDistance, 1), 1.8) * (1 + mouseFalloff * mouseDistance * .8), refractionX = Math.cos(refractionAngle) * dynamicRefraction, refractionY = Math.sin(refractionAngle) * dynamicRefraction, vortexAngle = Math.atan2(iy - mouseY, ix - mouseX), vortexDistance = vec2Length(ix - mouseX, iy - mouseY), vortexStrength = mouseFalloff * Math.sin(10 * vortexDistance - 3 * time) * .025, vortexX = Math.cos(vortexAngle + 2 * time) * vortexStrength, vortexY = Math.sin(vortexAngle + 2 * time) * vortexStrength, fluidX = Math.sin(10 * ix + 5 * mouseX + 2.5 * time) * Math.cos(8 * iy - 2 * time) * .018, fluidY = Math.cos(8 * ix - 2 * time) * Math.sin(10 * iy + 5 * mouseY + 2.5 * time) * .018, rippleEffect = (.012 * Math.sin(15 * Math.min(centerDistance, 10) - 4 * time) + .008 * Math.cos(20 * Math.min(centerDistance, 10) + 3 * time)) * mouseFalloff, rippleX = Math.cos(refractionAngle) * rippleEffect, rippleY = Math.sin(refractionAngle) * rippleEffect, distanceToEdge = roundedRectSDF(ix, iy, .44, .34, .39), edgeMask = smoothstepEdge(.92, -.12, distanceToEdge), edgeSoftness = smoothstepEdge(.85, .1, distanceToEdge), finalY = iy + (1.2 * refractionY + .8 * spectralY + 1.5 * parallaxY + .9 * scatteringY + 1 * turbulenceY + .6 * microDetailY + 1.3 * vortexY + 1.1 * fluidY + .7 * rippleY + .8 * causticDistortion) * edgeMask * edgeSoftness * .85;
+        return createTexture(clamp(ix + (1.2 * refractionX + .8 * spectralX + 1.5 * parallaxX + .9 * scatteringX + 1 * turbulenceX + .6 * microDetailX + 1.3 * vortexX + 1.1 * fluidX + .7 * rippleX + causticDistortion) * edgeMask * edgeSoftness * .85 + .5, 0, 1), clamp(finalY + .5, 0, 1));
     },
     // Aliases for compatibility
     plasma: (uv, mousePosition) => fragmentShaders.premiumGlass(uv, mousePosition),
@@ -3308,8 +3116,8 @@ const AtomixGlass =  memo(AtomixGlassInner), smoothStep = (a, b, t) => {
                     let dx = pos.x * w - x, dy = pos.y * h - y;
                     // Apply edge smoothing for Apple-like effect
                     const edgeX = 2 * Math.min(x / w, (w - x) / w), edgeY = 2 * Math.min(y / h, (h - y) / h), edgeFactor = Math.min(edgeX, edgeY);
-                    dx *= smoothStep(0, .2, edgeFactor), dy *= smoothStep(0, .2, edgeFactor), maxScale = Math.max(maxScale, Math.abs(dx), Math.abs(dy)), 
-                    rawValues.push(dx, dy);
+                    dx *= smoothstepEdge(0, .2, edgeFactor), dy *= smoothstepEdge(0, .2, edgeFactor), 
+                    maxScale = Math.max(maxScale, Math.abs(dx), Math.abs(dy)), rawValues.push(dx, dy);
                 }
                 // Improved normalization to prevent artifacts while maintaining intensity
                                 maxScale = Math.max(maxScale, 1);
@@ -3319,9 +3127,9 @@ const AtomixGlass =  memo(AtomixGlassInner), smoothStep = (a, b, t) => {
                 let rawIndex = 0;
                 for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) {
                     const dx = rawValues[rawIndex++] || 0, dy = rawValues[rawIndex++] || 0, edgeDistance = Math.min(x, y, w - x - 1, h - y - 1), edgeFactor = Math.min(1, edgeDistance / 2), r = dx * edgeFactor / maxScale + .5, g = dy * edgeFactor / maxScale + .5, pixelIndex = 4 * (y * w + x);
-                    data[pixelIndex] = clampValue(255 * r, 0, 255), // Red channel (X displacement)
-                    data[pixelIndex + 1] = clampValue(255 * g, 0, 255), // Green channel (Y displacement)
-                    data[pixelIndex + 2] = clampValue(255 * g, 0, 255), // Blue channel (Y displacement for SVG filter compatibility)
+                    data[pixelIndex] = clamp(255 * r, 0, 255), // Red channel (X displacement)
+                    data[pixelIndex + 1] = clamp(255 * g, 0, 255), // Green channel (Y displacement)
+                    data[pixelIndex + 2] = clamp(255 * g, 0, 255), // Blue channel (Y displacement for SVG filter compatibility)
                     data[pixelIndex + 3] = 255;
                 }
                 return this.context.putImageData(imageData, 0, 0), this.canvas.toDataURL();
@@ -3349,34 +3157,10 @@ const AtomixGlass =  memo(AtomixGlassInner), smoothStep = (a, b, t) => {
             return this.canvasDPI;
         }
     },
-    createFBMEngine: createFBMEngine,
-    fragmentShaders: fragmentShaders,
-    liquidGlassWithTime: liquidGlassWithTime
+    fragmentShaders: fragmentShaders
 }, Symbol.toStringTag, {
     value: "Module"
-}));
-
-// Adapted from https://github.com/shuding/liquid-glass
-// Constants
-/**
- * Component Utilities
- *
- * Helper functions for component development with the new customization system
- */
-/**
- * Check if a URL is a YouTube URL
- */
-function isYouTubeUrl(url) {
-    return /^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/.+/.test(url);
-}
-
-/**
- * Extract YouTube video ID from URL
- */
-/**
- * Advanced Video Player Component
- */
-const VideoPlayer =  forwardRef((({src: src, type: type = "video", youtubeId: youtubeId, poster: poster, autoplay: autoplay = !1, loop: loop = !1, muted: muted = !1, controls: controls = !0, preload: preload = "metadata", width: width, height: height, aspectRatio: aspectRatio = "16:9", className: className = "", onPlay: onPlay, onPause: onPause, onEnded: onEnded, onTimeUpdate: onTimeUpdate, onVolumeChange: onVolumeChange, onFullscreenChange: onFullscreenChange, onError: onError, showDownload: showDownload = !1, showShare: showShare = !1, showSettings: showSettings = !0, playbackRates: playbackRates = [ .5, .75, 1, 1.25, 1.5, 2 ], subtitles: subtitles, quality: quality, ambientMode: ambientMode = !1, glass: glass = !1, glassOpacity: glassOpacity = 1, glassContent: glassContent, style: style, ...props}, ref) => {
+})), VideoPlayer =  forwardRef((({src: src, type: type = "video", youtubeId: youtubeId, poster: poster, autoplay: autoplay = !1, loop: loop = !1, muted: muted = !1, controls: controls = !0, preload: preload = "metadata", width: width, height: height, aspectRatio: aspectRatio = "16:9", className: className = "", onPlay: onPlay, onPause: onPause, onEnded: onEnded, onTimeUpdate: onTimeUpdate, onVolumeChange: onVolumeChange, onFullscreenChange: onFullscreenChange, onError: onError, showDownload: showDownload = !1, showShare: showShare = !1, showSettings: showSettings = !0, playbackRates: playbackRates = [ .5, .75, 1, 1.25, 1.5, 2 ], subtitles: subtitles, quality: quality, ambientMode: ambientMode = !1, glass: glass = !1, glassOpacity: glassOpacity = 1, glassContent: glassContent, style: style, ...props}, ref) => {
     const videoRef = useRef(null), containerRef = useRef(null), canvasRef = useRef(null), iframeRef = useRef(null), [containerBorderRadius, setContainerBorderRadius] = useState(8), isYouTube = "youtube" === type || youtubeId || src && isYouTubeUrl(src), videoId = youtubeId || (isYouTube && src ? function(url) {
         if (!isYouTubeUrl(url)) return null;
         const patterns = [ /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/, /youtube\.com\/.*[?&]v=([^&\n?#]+)/ ];
@@ -3554,7 +3338,10 @@ const VideoPlayer =  forwardRef((({src: src, type: type = "video", youtubeId: yo
             getProgressPercentage: getProgressPercentage,
             getBufferedPercentage: getBufferedPercentage
         };
-    }({
+    }
+    /**
+ * Advanced Video Player Component
+ */ ({
         videoRef: videoRef,
         containerRef: containerRef,
         onPlay: onPlay,
@@ -4053,6 +3840,8 @@ const VideoPlayer =  forwardRef((({src: src, type: type = "video", youtubeId: yo
     });
 }));
 
+// Adapted from https://github.com/shuding/liquid-glass
+// Constants
 VideoPlayer.displayName = "VideoPlayer";
 
 /**
@@ -4307,10 +4096,10 @@ const Badge =  memo((({label: label, variant: variant = "primary", size: size =
     if (glass) {
         // Default glass settings for badges
         const defaultGlassProps = {
-            displacementScale: 20,
-            borderRadius: ref.current?.getBoundingClientRect().width ? ref.current?.getBoundingClientRect().width / 2 : 16,
-            className: "c-badge--glass",
-            elasticity: 0
+            ...GLASS_DEFAULTS_BADGE,
+            // Override borderRadius dynamically if the ref is available
+            borderRadius: ref.current?.getBoundingClientRect().width ? ref.current?.getBoundingClientRect().width / 2 : GLASS_DEFAULTS_BADGE.borderRadius,
+            className: "c-badge--glass"
         }, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
@@ -4375,12 +4164,7 @@ const Spinner =  memo( forwardRef((({size: size = "md", variant: variant = "prim
         })
     });
     if (glass) {
-        const defaultGlassProps = {
-            displacementScale: 20,
-            blurAmount: 1,
-            borderRadius: 999,
-            mode: "shader"
-        }, glassProps = !0 === glass ? defaultGlassProps : {
+        const defaultGlassProps = GLASS_DEFAULTS_SPINNER, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
         };
@@ -4660,11 +4444,7 @@ const Button =  React.memo( forwardRef((({label: label, children: children, onCl
     // This is a safe fallback for disabled links.
         if (glass) {
         // Default glass props
-        const defaultGlassProps = {
-            displacementScale: 20,
-            blurAmount: 0,
-            saturation: 200
-        }, glassProps = !0 === glass ? defaultGlassProps : {
+        const defaultGlassProps = GLASS_DEFAULTS_BUTTON, glassProps = !0 === glass ? defaultGlassProps : {
             ...defaultGlassProps,
             ...glass
         };