@mirror-physics/fractal-ui 0.2.0-next.90 → 0.2.0-next.91

package/dist/index.css

@@ -2814,32 +2814,28 @@
 /* src/components/Ghost/Ghost.css */
 .fractal-ghost {
   --fractal-ghost-base: var(--bg-surface-1);
-  --fractal-ghost-shine: color-mix(in srgb, var(--bg-canvas) 82%, transparent);
   position: relative;
   display: block;
   min-width: 0;
   min-height: 1px;
   overflow: hidden;
-  background: var(--fractal-ghost-base);
-  border-radius: var(--radius-sm);
-}
-.fractal-ghost::after {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: -50%;
-  width: 50%;
-  background:
+  --fractal-ghost-shine: color-mix(in srgb, var(--bg-canvas) 70%, transparent);
+  background-color: var(--fractal-ghost-base);
+  background-image:
     linear-gradient(
-      105deg,
-      transparent 0%,
+      110deg,
+      transparent 30%,
+      color-mix(in srgb, var(--fractal-ghost-shine) 20%, transparent) 38%,
+      color-mix(in srgb, var(--fractal-ghost-shine) 65%, transparent) 44%,
       var(--fractal-ghost-shine) 50%,
-      transparent 100%);
-  content: "";
-  pointer-events: none;
-  transform: translate3d(-100%, 0, 0);
-  animation: fractal-ghost-shine var(--duration-ambient) linear infinite;
-  will-change: transform;
+      color-mix(in srgb, var(--fractal-ghost-shine) 65%, transparent) 56%,
+      color-mix(in srgb, var(--fractal-ghost-shine) 20%, transparent) 62%,
+      transparent 70%);
+  background-size: 300% 100%;
+  background-repeat: no-repeat;
+  background-position: 100% 0;
+  border-radius: var(--radius-sm);
+  animation: fractal-ghost-shine calc(var(--duration-ambient) * 2) var(--ease-in-out) infinite;
 }
 .fractal-ghost-line {
   height: 0.875rem;
@@ -3119,16 +3115,16 @@
 }
 @keyframes fractal-ghost-shine {
   from {
-    transform: translate3d(-100%, 0, 0);
+    background-position: 100% 0;
   }
   to {
-    transform: translate3d(300%, 0, 0);
+    background-position: 0% 0;
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .fractal-ghost::after {
-    display: none;
+  .fractal-ghost {
     animation: none;
+    background-image: none;
   }
 }